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:

  1. You can set type in SVG
  2. You can set raster graphics in SVG;
  3. 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: 

  1. Starting with vector graphics;
  2. Adding raster graphics;
  3. Clipping raster with vector;
  4. Setting type in svg;
  5. Gradients; and
  6. Light animation.


Pin It on Pinterest