#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:
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:
- Filter Effects Module Level 1
- CSS Masking Module Level 1
- CSS Transforms Module Level 1
- DOMMatrix interface
- Geometry Interfaces Module Level 1
- Compositing and Blending Level 1
##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:
- SVG Tutorial on Mozilla Developer Network
- Splash Vector Graphics on your Responsive Site
- Rethinking Responsive SVG
Also, check out Mike Sierra’s smarter SVG tutorials on WebPlatform.org: