Introduction to SVGs

When working with images on the web, it's important to use the correct type of file for your intended purpose. While formats such as JPG, PNG, and GIF are most familiar to web users, they may not always be the appropriate choice.

This article will introduce you to the basics of another kind of image format: the SVG, or Scalable Vector Graphics format.

Vector vs Raster Image Formats

In the world of image files, there are two basic types of format: raster and vector. Raster based formats are based on pixels. These formats include such file types as JPG, PNG, and GIF.

Sometimes, raster images are referred to as bitmap images, due to their pixel-based nature. Pixels, of course, are the tiny square building blocks of most of the digital images you see on the web.

You can tell whether an image is a raster based (or bitmap) image simply by looking at it up close and (usually) in magnified zoom. If you see millions of tiny squares at a high enough resolution (particularly in places where one color changes to another), you're looking at pixels, and thus it's a raster image.

Vector based graphics, on the other hand, are based on lines and curves, stored in text-based XML. They're heavily based in mathematical theory, and as a result require special computer programs to create, open, and edit.

Because vector based images are illustrations, they're not suitable for photographs. However, an image that's created by an artist based on a photograph can be built in SVG. Logos are probably the primary use of SVGs on the web, along with other brand-specific illustrations.

Fonts and typefaces are also created in vector formats, so that the edges of characters are crisp and clean. If you've ever tried adding text on top of a raster image in Photoshop or some other image editing app — for example, to create a website header — then tried to resize it even a little bit, you may have noted that the text can sometimes look ragged at the edges.

That's because of differences between vector and raster formats; an SVG format is the way to go here.

Advantages of SVGs

SVGs are, as you'd expect from the name, a vector-based graphic. They're resolution-independent. Compare this to raster graphics, which depend on the resolution of the monitor or screen on which they're being displayed.

So when you zoom in on a raster graphic — a JPG or PNG file, for example — you'll see the image increasingly blur and distort.

In SVG format, you won't. You can magnify and zoom in without a distortion of the image itself.

This is made possible because of the nature of the SVG format. Because it's text-based and not pixel-based, you can resize the image without loss of integrity or crispness of detail.

This feature alone makes SVGs incredibly useful files to have around, especially for brand-dependent images such as complex logos and other website graphics. SVGs can be freely resized for future projects, making the SVG a highly flexible format for website work.

Another benefit of using SVG files is that they're more efficient to store and transmit. SVGs are really precise mathematical descriptions instead of a massive collection of individual pixels. The resulting SVG files are smaller than the same image would be if rendered in a raster-based format.

SVGs support animation for every element and aspect of the image. Because they're text-based they're also searchable and indexable, as well as compressible.

Disadvantages of SVGs

There's one primary disadvantage of using image files in the SVG format, and that's compatibility. You need software that can handle working with SVGs.

Some of those programs, such as Adobe Illustrator, aren't immediately accessible to everyone who might need to work with those images, unlike the plethora of editors (many of them free) available for working with raster based images.

However, Inkscape is a free, open-source editor that can handle SVG files.

Other Vector Format Extensions

In addition to the SVG (scalable vector graphic), basic vector file extensions include:

  • .drw (vector file)
  • .eps (Encapsulated PostScript)
  • .pct (Macintosh bitmap graphics format)
  • .pif (vector image GDF format)
  • .ps (Adobe PostScript)
  • .svf (simple vector format)

SVG Elements in HTML5

Using HTML elements, you can create some basic shapes with SVG in the browser. Each of these elements need to be nested within the <svg> tag.

Line

The <line> element can be used to create one straight line, consisting of two points — a start and an end. Each point, of course, will have two coordinates, an "x" and a "y."

The code will look like this:

<svg>
<line x1="0" y1="0" x2="300" y2="300" stroke-width="2" stroke="#FF0000" />
</svg>

You can also pair other attributes with the < line > element: stroke defines color and stroke-width controls the thickness of the line.

Rect

Create a rectangle using the <rect> element and specifying the dimensions with the width and height attributes. You can also provide a color with fill and for the outline of the rectangle with stroke, as demonstrated in the code excerpt below:

<svg>
<rect width="200" height="200" fill="#0000FF" stroke-width="2" stroke="#000000"/>
</svg>

Circle

As you'd expect, the <circle> element creates a circle. To create a circle with a radius of 40 (set with the r attribute), centered 40 pixels down and 40 across from the top left corner, a green fill and a black outline, use the code below:

<svg>
<circle cx="40" cy="40" r="40" fill="#00FF00" stroke-width="1" stroke="#000000"/>
</svg>

If you don't specify the cx and cy attributes, the browser will interpret a default value of "0."

Other <svg> elements you can play around with include <polyline>, <polygon>, and <ellipse>.

Browser Support

SVG is well supported in all the major available browsers, excluding IE8 and earlier versions.

Further Resources

Making use of SVGs in your graphic creations and web design might not be something you're used to straight out the gate, but it's undoubtedly a worthwhile endeavor to familiarize yourself with them. Hopefully, the above will help guide your learning.