SVG (Scalable Vector Graphics) is an XML-based vector image format for creating 2d graphics. As well as this, it supports interactivity and animation and can be used to develop anything from simple animations to 2d based games.

SVG was first developed back in 1998, but it has begun to rise in popularity with responsive design as developers look for lightweight solutions that are capable of scaling across a wide range of devices.

svg-1 SVG - What Is It and How Can You Use It?

pbs1 SVG - What Is It and How Can You Use It?Many developers use SVG for icons and to replace standard images, but they are now looking at new and innovative ways to implement SVG into their creations.

A good example of SVG being used extensively is on http://pbskids.org/. Their website uses the Snap SVG JavaScript framework to create their animated characters and parts of their UI

Another example of SVG is on Polygon. This article’s featured image is developed using SVG and a Javascript library.

The design is made first, either drawn in illustrator or developed using SVG code. Then using something similar to Lazy Line Painter, the image can be animated to look like it is being drawn right there on the page.

Lynx #MassDebates also make use of SVG too, by creating polls and adding resizable graphics to represent different options. The following example is from the happiness debate – both the faces use SVG files to create resizable versions of the faces based on the width of the section.

Snap SVG is an open source JavaScript library that enables developers to easily work with SVG graphics and animations. The library targets modern browsers (IE9, Safari, Chrome, Firefox, Opera) and provides support for making, clipping, gradients, animation, and more. Even cooler, it does so in a jQuery-ish familiar format.

snapsvg SVG - What Is It and How Can You Use It?

You can start learning the basics of the library on snapsvg.io. Their introduction shows you how you can start using the library to create scalable graphics. It starts off by simply showing you how to draw circles and apply simple effects, but users can take a look into their extensive documentation to create their own cool creations.

A websites ability to respond to screen size has become a major part of web development over the past few years.  With this, developers have tried to create scalable graphics using SVG. A good example of this is shown on this CodePen creation.

The house icon has 9 different versions which autocratically change when you resize the screen:

See the Pen uxIKB by Ilya Pukhalski (@pukhalski) on CodePen.