SVG Symbols

24 Jun 2021

I wanted to learn how SVG <symbol> works. Test of fill, outline, and gradient fill:

Implementation:

Download all the svg icons from https://game-icons.net/^[1]
Combine the individual files from using <svg … viewBox=…>…</svg> to <symbol viewBox=…>…</symbol>, making them reusable icons. (icon-to-svg-symbols.py)
Reference the symbols by using <use href="#centaur" x=… y=… width=… height=… />, and then apply styling using fill=…, stroke=…, etc.

This means I can use any icon from game-icons with a single SVG <use>.

Minor glitch: I was planning to use the icon filename as the id= but occasionally multiple icons use the same filename, like lorc/hand^[2] and sbed/hand^[3]. I’ll deal with this later.

Minor issue: the stroke width seems to be in viewbox coordinates, not in the output size coordinates, so that I have to look beyond this abstraction to be able to apply strokes. However … all of game-icons seems to be 512x512 so it’s not so bad in this particular case.

./icon-to-svg-symbols.py centaur baby-face moebius-triangle \
  justice-star moebius-star maze-saw maze-cornea orbital \
  pentagram-rose triorb triple-corn triple-beak zigzag-cage \
  ubisoft-sun triple-yin triple-plier divided-spiral \
  concentric-crescents barbed-sun yin-yang trinacria anarchy \
>_icons.svg

Related: C header-only library https://github.com/memononen/nanosvg^[4] can render these icons to a raster image. However I’m using these on the web so I will use the browser’s SVG renderer for now.

Related: the icons are available as a TTF font https://github.com/seiyria/gameicons-font^[5]

Endnotes