Last Updated on August 17, 2021 by Hammad Rauf

Introduction

Scalable Vector Graphics (SVG) is a way of describing a drawing that is easy to read for humans as well as computers. It is a kind of Vector drawing that is made up of instructions about how to re-draw it on a page. In contrast is a Bitmap Image (also called a Raster Image) that is made up of data about each dot of the Image. A very good comparision of Vector versus Raster Images can be found here.

SVG is defined by World Wide Web Consortium (W3C) as an open standard. It can be used freely by anyone. For a complex SVG drawing a tool is needed for actually drawing it. Perhaps the best Vector Drawing software is Adobe Illustrator, but it is expensive. The author often uses Inkscape (a free Vector Drawing software) for creating SVG format files for use in HTML pages. The SVG sample mentioned in this article on JSFiddle site was drawn in InkScape.

The HTML tag  for SVG (<svg>) is a full featured HTML tag with support in almost all modern browsers.

SVG Thumbnail Icons With Optional Help Text

The following combination of HTML, CSS and Javascript provides a way to use SVG as a thumbnail for the purpose of creating iconic hyperlinks. It may be used in a Graphical Menu. Optionally each icon can have some descriptive help text message that will appear once the mouse is brought over the icon. Feel free to experiment with it on JSFiddle site.

https://jsfiddle.net/hammadrauf/4twdk08j/

References and Further Reading

1. Vector Vs Raster, https://designshack.net/articles/layouts/vector-vs-raster-what-do-i-use/, Date Accessed: September 25, 2018
2. W3C SVG site, https://www.w3.org/Graphics/SVG/Overview, Date Accessed: September 25, 2018
3. Inkscape site, https://inkscape.org/, Date Accessed: September 25, 2018
4. HTML5 and SVG, https://www.w3schools.com/html/html5_svg.asp, Date Accessed: September 25, 2018
5. JSFiddle sample, https://jsfiddle.net/hammadrauf/4twdk08j/, Date Accessed: September 25, 2018