One SVG to rule them all 
       =========================
       
       
       
       
 (TXT) SVG element (.svg) 
       
       Table of Contents 
       ------------------
       
 (DIR) Introduction
 (DIR) XSLT?
 (DIR) Source image
 (DIR) The transform script
 (DIR) Development pro-tip
 (DIR) Exercise
 (DIR) Next up
       
       Introduction 
       -------------
       
       
       When I wanted to reuse my SVG s for different colour themes 1 , I didn’t want to manually create and maintain each variant. Tedious and error prone. 
       
 (DIR) 1
       
       In this article series, I describe how a single source of truth can be used to generate production-ready images, in various colours and file formats. 
       
       
       That’s where XSLT comes in. 
       
       
       XSLT? 
       ------
       
       
       XSLT is a language to transform XML . The output format can be XML, HTML or text. 
       
       
       Since SVG images are XML, XSLT can be used to transform them. 
       
       
       Source image 
       -------------
       
       
       This image will be used in the examples. A simple grey disc on a transparent background. 
       
       
       It looks like this: 
       
       
       The transform script 
       ---------------------
       
       
       As mentioned, XSLT can be used to transform XML. This can be done not only with simple attributes, but also with elements. Creating, modifying, and (re)moving, it’s all possible. 
       
       
       The following script sets a value to the fill attributes of all elements in a SVG. For more fine-grained control, you can modify the so-called selectors (think CSS selectors, but for XML). But this is a good starting point. 
       
       
       And a little shell script to call it with a certain colour: 
       
       
       The transformed output: 
       
       
       And the rendered image: 
       
       
       Development pro-tip 
       --------------------
       
       
       To prevent the base version from accidentally being deployed, I like to make it cyan and magenta . To save your eyes, it’s behind a spoiler. 
       
       
       These colours also make good selectors, because no one ever uses them (right?). 
       
       
       I also add a large “Development mode” text over it. Then, using XSLT, I remove the ugly colours, comments and said text. 
       
       
       Exercise 
       ---------
       
       
       See if you can remove the comments from the SVG. 
       
       
       Next up 
       --------
       
       
       This is the first part in a series. Other output formats and more cleaning will be covered in future parts. 
       
       ----------------------------------
       -  think also branding, dimensions, file formats, dark mode etc. ↩︎  
       
       think also branding, dimensions, file formats, dark mode etc. ↩︎ 
       
 (DIR) ↩︎
 (DIR) previous JavaScript port of 40 C=64 graphics
       
 (DIR) next Creating SVG from JavaScript
       
       
       Related 
       --------
       
 (DIR) [Talk] <svg> - made by thee
 (TXT) SVG element (.svg) 
 (DIR) My .sqliterc
 (TXT) /img/fallback.svg (.svg) 
 (DIR) Fast! Fast. Fast?
 (TXT) /img/fallback.svg (.svg) 
 (DIR) Elmtris
 (TXT) Tetris logo inspired by the Elm logo (.svg) 
 (DIR) TIL executing commands in Windows explorer
 (IMG) Step 1 - open file explorer (.png) 
 (DIR) My SVG knowledge
 (TXT) SVG element (.svg) 
 (DIR) Minimalistic SVG library
 (TXT) SVG Logo (.svg) 
 (DIR) Creating SVG from JavaScript
 (TXT) W3 SVG Logo (.svg)