SVG isn’t just a syntax to draw stuff. It’s more than that. Let’s take a look at a few more things SVG can do, which might be a bit eye-opening for some of you:
- You can set type in SVG
- You can set raster graphics in SVG;
- And you can have interactions and animations in SVG.
Strictly speaking, SVG isn’t CSS. But SVG is a great tool to add to your website toolkit. And it’s most likely to be used by the same person who uses CSS.
Chris Coyier posted a quick introduction to using SVG to do a variety of things — even some things you can do in HTML and CSS. But there’s one great reason to use SVG even though you have an HTML / CSS solution: Scalability. Because everything in SVG is vector, it scales perfectly to any screen size or pixel dimension. The steps in his introductory tutorial are:
- Starting with vector graphics;
- Adding raster graphics;
- Clipping raster with vector;
- Setting type in svg;
- Gradients; and
- Light animation.
Click here to view Chris’ full article at mediatemple.net