Ways to create and add SVG maps to a web page

SVG stands for 'Scalable Vector Graphics' which defines vector-based graphics in XML format. It is just another format for displaying images on the web and every element and every attribute of its can be animated. It have greater advantages over other image file types such as PNG, JPG, GIF, BMP, etc.

Some of its notable advantages are:-
~ It is scalable. That is it doesn't loss quality when stretched or compressed.
~ It has interactive ability with CSS and JS
~ It can be created and edited with any text editor
~ It can be searched, indexed and scripted
~ It can be printed with high quality at any resolution

Ways to create SVG image maps

SVG maps can be created with either of the two ways namely; text editor or drawing program. The examples of each is given below:-
1) Text editor (Code): any text editor such as notepad++, sublime, atom, etc can be used.
2) Drawing tools/program: Inkscape, Adobe Illustrator, etc. While most of these tools can save SVG files directly, it is worth noting that there are some such as ArcGIS and QGIS that edit maps in other formats such as shapefile then other online such as Mapshaper,  Mapstarter, Geoconverter, etc are used to convert the shapefile to SVG file.

Creating SVGs with Code allows you to understand the different svg elements and the attributes that make up the file. This is very import when you want to manipulate and interact with the SVG using CSS and JS scripting.

If your SVG is a complex one such as a state map administrative boundaries, you are better off creating the SVGs with drawing tools.

Ways to add SVG image maps into HTML web page

1) Using inline SVG tag (<svg>...</svg>)

2) Using image tag (<img src='filename.svg' >)

3) Using CSS background-image property
body{
background: url(filename.svg);
}

4) Using HTML object, iframe or embed tags

Using inline SVG tag to add SVG images are the most powerful and flexible, as it allows certain CSS and JS operations with SVG that other ways don't allow. This method also helps with very fast loading speed of the web page.

On the other hand, a major draw back for using the inline SVG tag is that it is very poor in "search engine indexing".

That is it, hope it was useful.

Thank you for reading.