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

SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.

Use classes on svg inner elements and animate them

Pick a pack and scroll to search an icon

Draw vectorial images

and the project: https://github.com/methodofaction/Method-Draw