SVG Tutorial

Last Updated:

SVG History

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two dimensional based vector graphics was development within the World Wide Web Consortium (W3C) in the year 1999, and was later adopted by all major modern web browsers - including Google Chrome, Firefox, Opera and Edge.

How to use SVG?

SVG images can be produced by the use of a vector graphics editor, such as Inkscape (free and open-source), Adobe Illustrator, Adobe Flash Professional, or CorelDRAW, and rendered to common raster image formats such as PNG using the same software.

Once the SVG images are produced, you can use it with HTML <img> tag (or similar) or you can directly inline in your HTML code using <svg> tag.

Purpose of SVG

SVG is resolution-independent and infinitely scalable. So, no blur at any zoom-in ratio.

SVG is an XML-based markup language so they can be searched and indexed by all major search engine.

SVG files can be compressed to a smaller file sizes compared to their raster graphics brethren. So, it will render much faster.

SVG is fully editable and scriptable.

SVG supports all kinds of animation and interactions can be added to a drawing via CSS and JavaScript.


Share this Page

Meet the Author