on December 27, 2022

Show differenet SVG icons on one layer at runtime

Geographic Information Systems

How to inline SVG icons?

Our Process to add new SVG icons

  1. Use vector graphic tool to create your icon. Export the outcome as an SVG file. We use Inkscape and Affinity Designer for iPad.
  2. Configure svg-sprite.js to create an SVG sprite file for you.
  3. Inline SVG icons into your HTML file.
  4. Configure colors and sizes with CSS.


How to use SVG icons?

SVG images can be written directly into the HTML document using the tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the element in your HTML document. If you did everything correctly, your webpage should look exactly like the demo below.