hero

SVG

SVG

What is it?

Scalable Vector Graphics, short SVG, is a resolution independent graphics format. It doesn’t matter if you view SVG images on a 10 years old CRT screen, a brand new HiDPI screen or if you zoom into the graphics by a factor of 1000: The graphics will always look sharp and crisp. SVG consists of markup that describes the content, just like HTML. This provides users the best possible and most accessible experience. The markup allows authors to create rich dynamic content with JavaScript, SVG Animations or CSS transitions and animations.

The following example is an SVG image animated with CSS:

Credit: Elizabet Oliveira

If you want to see the source, you can look at Elizabet’s CodePen here.

At one end of the platform, the Adobe Web Platform team works to improve the output from Adobe tools, such as Illustrator. At the other end, the team participates in the SVG Working Group and on SVG-related specification, such as:

When can I use it?

Now in all major browsers. For a view of current and upcoming browser support, check out caniuse.com.

Where can I learn more?

There are lots of tutorials for SVG. A small collection can be found here:

Also, check out Mike Sierra’s smarter SVG tutorials on WebPlatform.org: