Add a class to generate element backgrounds from embedded SVG
Add a class to generate element backgrounds from embedded SVG

A recent job required using numerous high-quality, detailed vectors that
changed colour with smooth transitions. Because stroke-effects were used
for achieving their details, an icon font would've been impractical, and
sprite-maps wouldn't have made it easy to transition between states.

Deciding that embedded SVG images were the safest approach, I thought of
ways to avoid copy+pasting each instance to keep the document's filesize
as optimum as possible. Mobile-friendliness and UX were of top priority,
so squashing the site's code into the fewest bytes possible would result
in the smallest footprint and fastest load time.

In the end, I hid each SVG on the page in a "palette" element and copied
them inside HTML elements that needed them as backgrounds. I termed them
"sigils" because they were too complex to be considered "glyphs" (as in,
components of an icon font). These "sigils" were read from a "tome" (the
palette-element described above) and "written" onto the page. The script
to execute this process is what you see before you.

Alhadis/Snippets,Alhadis/Snippets,Alhadis/Snippets,Alhadis/Snippets,Alhadis/Snippets