Skip to content

Commit

Permalink
fix: ds-783 update title SVG assets
Browse files Browse the repository at this point in the history
Long explanation ahead. TLDR: I had to make SVG files in a very particular way to prevent patternfly/react/webpack from crashing on them.

`titleBrand.svg` and `title.svg` were created using the `Red Hat Display` font in Inkscape which is, at the time of this writing, the official font for signage like this. Text objects were converted to paths before saving. The path objects produced for the text (e.g. "Discovery") were also broken into separate objects using the "Break apart" command. All objects include a faint hairline stroke (`rgba(00000033)`) so the white shapes are still visible on all-white backgrounds. The files were saved as "Plain SVG".

These instructions are **VERY IMPORTANT** to follow precisely if you want to make future changes to SVGs in quipucords-ui like this.

**DO NOT SAVE AS "Optimized SVG" OR POST-PROCESS THESE FILES THROUGH `scour`.** Although optimized files *are* perfectly valid and display correctly in all modern web browsers like Firefox, Chrome, and Safari as well as other popular SVG viewers, there are problems in how quipucords-ui invokes patternfly/react/webpack to "import" those SVG files (instead of simply copying them as static assets and referring to their paths in `src`/`srcset` attributes) that result in the UI failing to display them in the generated output.

When "Quipucords" (`title.svg`) is saved as "Plain SVG", patternfly/react/webpack produces the following DOM, which correctly displays the image in the web browser, as seen by Firefox's inspector:

    <picture class="pf-v5-c-brand pf-m-picture" style="--pf-v5-c-brand--Height: 36px;"><source srcset="/images/4ca682d556b7bf59f5c6.svg"><img src="" alt="Quipucords logo"></picture>

However, when that same SVG is "optimized", patternfly/react/webpack produces a `srcset` attribute containing the full contents of the file. This is very bad and wrong, and the web browser does not display the image. Here is an example of the DOM produced in that case, with the much longer `srcset` shortened for sake of display here:

    <picture class="pf-v5-c-brand pf-m-picture" style="--pf-v5-c-brand--Height: 36px;"><source srcset="data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e %3c ... aria-label='Quipucords'/%3e%3c/g%3e%3c/svg%3e"><img src="" alt="Quipucords logo"></picture>

When saving the files, why must we "Break apart" the path? This is to work around a similar issue in how the patternfly/react/webpack wrongly interprets or packs the file data. Some shapes cause patternfly/react/webpack parsing to fail and produce a `srcset` containing the full file just like it does when the SVG file is "optimized". For example, when the word "Discovery" (`titleBrand.svg`) starts with the capital letter `D` set in the `Red Hat Display` font and is a saved as a single shape object, patternfly/react/webpack fails to process that file. However, if you change that `D` to a different font *or* force the single path object (containing all letters' shapes) into separate path objects, patternfly/react/webpack seems to be okay with that, and it generates a working `srcset` attribute.

**I would implore quipucords-ui maintainers to coerce patternfly/react/webpack code to *STOP* trying to interpret SVG file data, and instead simply treat the files as static assets and pass their paths to the `srcset` or `src` attributes.** I don't know exactly what layer of the patternfly/react/webpack JavaScript stack is responsible for this bad behavior or if it's the fault of some other package they depend on; that's why I just keep saying "patternfly/react/webpack" collectively here. If our UI could simply treat static assets like SVGs as *static assets* instead of allowing JavaScript code mangle them, future edits should be much easier.
  • Loading branch information
infinitewarp committed Sep 30, 2024
1 parent 15b998f commit fc30122
Show file tree
Hide file tree
Showing 2 changed files with 102 additions and 94 deletions.
67 changes: 29 additions & 38 deletions src/images/title.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit fc30122

Please sign in to comment.