Change Details

== Goal Provide best-in-class SVGO configuration for raw icon files and transformed SVGs == Background We provide [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG | Wikimedia SVG coding guidelines ]] that are partly enforced by help of SVGO == Questions Reciting @Catrope from internal conversation leading up to this > The current icon system stores icons as .svg files that are relatively minimal, but still have a <title> tag (first image), but in the build output that gets minified to basically just one or more <path> tags (second image). The <title> tag is removed, as is the wrapping <svg> tag and the <?xml> tag. When the <cdx-icon> component uses this icon data, it adds its own <svg> and (optionally) <title> tags based on the props passed to it. > This minification step currently uses SVGO in its default configuration, plus a setting that prefixes IDs for uniqueness, plus a plugin I wrote that removes the <svg> tag. The main function of this step is to unwrap the SVG to just the <path> (or other shape) tags and deconflict the IDs, but since it uses SVGO it can do other optimizations too. And that could free us up to have the .svg files in the repo be slightly less minimal. For example: > IDs wouldn't need to be a, b, etc, they could be meaningful things like bracket, and that would still be transformed to cdx-icon-code-a in the output > We could have unused IDs to explain what different shapes are; they would be removed in the output > We could have  in our SVGs > or anything else, if it would make our SVGs easier to read/edit > I'm not saying anything needs to change here, but I wanted to point out the opportunity and ask if it's something we want to do (now or in the future) == Criteria for done [] Decide how much extra code additions (ids for readability, comments, etc.) we want to include in the raw SVG files [] Add SVGO tailored config for raw SVG files [] Add SVGO tailored config for transformed (JSON/ES/CommonJS) ones [] Document in library

== Goal Provide best-in-class SVGO configuration for raw icon files and transformed SVGs == Background We provide [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG | Wikimedia SVG coding guidelines ]] that are partly enforced by help of SVGO == Questions Reciting @Catrope from internal conversation leading up to this > The current icon system stores icons as .svg files that are relatively minimal, but still have a <title> tag (first image), but in the build output that gets minified to basically just one or more <path> tags (second image). The <title> tag is removed, as is the wrapping <svg> tag and the <?xml> tag. When the <cdx-icon> component uses this icon data, it adds its own <svg> and (optionally) <title> tags based on the props passed to it. > This minification step currently uses SVGO in its default configuration, plus a setting that prefixes IDs for uniqueness, plus a plugin I wrote that removes the <svg> tag. The main function of this step is to unwrap the SVG to just the <path> (or other shape) tags and deconflict the IDs, but since it uses SVGO it can do other optimizations too. And that could free us up to have the .svg files in the repo be slightly less minimal. For example: > IDs wouldn't need to be a, b, etc, they could be meaningful things like bracket, and that would still be transformed to cdx-icon-code-a in the output > We could have unused IDs to explain what different shapes are; they would be removed in the output > We could have  in our SVGs > or anything else, if it would make our SVGs easier to read/edit > I'm not saying anything needs to change here, but I wanted to point out the opportunity and ask if it's something we want to do (now or in the future) == Criteria for done [] Decide how much extra code additions (ids for readability, comments, etc.) we want to include in the raw SVG files [] Add SVGO tailored config for raw SVG files, orienting on [[ https://www.mediawiki.org/wiki/Manual:Coding_conventions/SVG | Wikimedia SVG coding conventions ]] [] Add SVGO tailored config for transformed (JSON/ES/CommonJS) ones [] Document in library