What is SVG?
SVG, or Scalable Vector Graphics, is an XML-based language format supporting two-dimensional graphics. SVG images are comprised of vector-based shapes which are generated by mathematical equations.
SVG is nothing new. In fact, SVG was introduce all the way back in the year 2001 (13 years!). But only in the last few years has SVG been fully embraced by most modern browsers including:
- Internet Explorer 9+
- Firefox 3+
- Chrome 4+
- Safari 3.2+
- Opera 9.6+
- iOS 3.2+
- Android 3+
Fast load times – Do you have a text editor? Go ahead and download this .svg file and open it. What do you see? It’s just xml! This mean an SVG image that’s 3000px wide will load as fast as an image that’s 300px wide. This speed boost becomes very important when working with mobile phones and tablets.
You can resize them in seconds – Because SVG is vector based, you can simply change the dimensions in your HTML file and be on your way. No pixelation. No grainy or blurry degradation. No need for multiple image sets.
You can animate them – Visit this Firefox Developer Network demo page. Do you see how fluid everything is? How sharp it is? In SVG:201 we’ll look at how you can quickly add animation to your SVG graphics.
SVG images can be created directly in any text editor. However, an easier solution is to use a vector editor application. Here are some of the more popular programs available.
Additional SVG Examples
And by the way, all of the images you’ve seen in this post are .svg. How cool is that?!