But again there is tool online for it:

• SVGOMG
• ILoveIMG

It uses GSAP

JS code can be executed in svgs. Crazy as this can be a security issue!

Generate different svg. It seems to not work well with Firefox.

Use SVGs instead of icon fonts for the reasons explained in the articles.

The technique is to group all SVG images in one big SVG; and then reference them across the website with:

<svg class="icon">
  <use xlink:href="#svg-id"></use>
</svg>

Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands

It could be more performant than the traditional tools

Add a background mask to an SVG icon

An image map is a normal image on a website which has different clickable regions which take you to different pages. Image map functionality allowed polygons of an image to be defined as independent hyperlinks.

<!-- References an image map -->
<img src="image.png" usemap="#map1" />

<map id="map1" name="Map 1">
  <!-- An example of a rectangular area over an image -->
  <area shape="rect" coords="10,10,100,100"
        href="/foo"
        alt="Go to the Foo page"/>

  <!-- An example of a circular area over an image -->
  <area shape="circle" coords="50,50,200"
        href="/bar"
        alt="Go to the Bar page"/>

  <!-- An example of an arbitrary polygon over an image -->
  <area shape="poly" coords="10,10,100,10,100,100,10,100"
        href="/baz"
        alt="Go to the Baz page"/>

  <!-- Fallback if no other area matches -->
  <area shape="default"
        href="/default"
        alt="Go to the Default page"/>
</map>

Try to draw perfect vectors :D

Animated font