PlayingWithSVG - Controlling various sections of Image using SVG format and JavaScript

What is SVG?

SVG stands for Scalable Vector Graphics. It is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999. SVG images and their behaviors are defined in XML text files.

Advantages of using SVG over other image formats (like JPEG 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

We can control various sections of SVG image, defined by attributes for svg tag, namely paths and its definitions.

I tried a mini project to identify from map of India which states are they on which user clicks on. I used a SVG image for map of India, and controlled various sections of svg image using the separate path that it contained.

Flow Diagram

Find the link to this project here at my GitHub repo: