SVG Tutorial

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.

Demo

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author