SVG Symbols

from Red Blob Games
24 Jun 2021

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

Implementation:

  1. Download all the svg icons from https://game-icons.net/[1]
  2. Combine the individual files from using <svg … viewBox=…>…</svg> to <symbol viewBox=…>…</symbol>, making them reusable icons. (icon-to-svg-symbols.py)
  3. 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]

Email me , or tweet @redblobgames, or comment: