Animating SVG maps 101

 Let take a look at how to animate web maps in SVG format. SVG stands for 'Scalable Vector Graphics' and it is a web-friendly vector file format. It defines vector-based graphics in XML format.

Advantages of using SVG over other image formats (like JPEG, PNG and GIF) are:

• SVG images can be created and edited with any text editor
• SVG images can be searched, indexed, scripted, and compressed
• SVG images are scalable
• SVG images can be printed with high quality at any resolution
• SVG images are zoomable
• SVG graphics do NOT lose any quality if they are zoomed or resized
• SVG is an open standard
• SVG files are pure XML

SVG images with a drawing program, like Inkscape, Adobe Illustrator etc. Since we will be SVG maps, we can use GIS software like QGIS, ArcGIS etc to create the map then export it to SVG. We can also use online tool like mapshaper to convert GIS map to SVG format.

Whatever method you used in creating you SVG maps is of less importance since all we care in this post is to animate it using CSS.

I will apply the CSS styles right inside the SVG file, so I will surround it with 'Character Data' tag <![CDATA[ ... ]]> to prevent some characters been parsed as part of the SVG XML tags.

1. Change map color on hover and rotate

<style type="text/css" media="screen">
  <![CDATA[

  path {
    cursor: pointer;
    fill: #fff;
    }


  path:hover {
    fill: #ff68ff;

    transition-property: rotate;
    transition-duration: 30s;
    rotate: -90deg;
    }


  ]]>
</style>

2. On hover change map stroke color and stroke width

<style type="text/css" media="screen">
  <![CDATA[

  path {
    cursor: pointer;
    fill: #fff;
    opacity: 1;

    }


  path:hover {
    transition: stroke-width 1s, stroke 1s;

    stroke-width: 8;
    stroke: #000fff;
    }

  ]]>
</style>