What is it?
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: