What is SVG?

Scalable Vector Graphics (SVG) is an XML based two-dimensional vector image format developed as an open standard by the World Wide Web Consortium (W3C).

All the images or figures made using SVG are nothing but plain text. Here is an example of how to draw a smiley face using SVG.

We only used two shapes in the code above (circle and line/path), but all you need to do when drawing illustrations using SVG is specify the shapes and their dimensions. You can also fill them in with colors of your choice. Since SVG is text-based, it is more flexible than JPEG and PNG.

Vector vs. Rafter

JPEG and PNG rely on the bitmap configuration data referential for each pixel. These image files are known as rafter. SVG, on the other hand, relies on building an image with a collection of shapes and lines instead of each pixel. These image files are known as vectors. Vectors, when scaled up, do not make your image pixelated like rafters. This property makes SVGs incredibly scalable. Observe the difference in quality of the Netflix logo below when it is zoomed in.

Interactive

Besides being scalable, SVG is also interactive in the sense that it works well alongside HTML, CSS, and JavaScript. You can add colors, text, and animations using JavaScript and CSS to your SVG.

Click here to see how a JavaScript library can be used to add animation to the plain SVG.

Moreover, since these SVG files are purely text-based, they are quite small. This small size comes handy when developing web-applications and web-pages as it reduces the load time and makes your program faster.