SVGs: Create HTML5 Graphics That Work In Any Browser

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 SVG 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 SVG

SVG is, 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 SVG 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. SVG is a 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.

SVG supports 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 SVG

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.

What About SWF?

Experienced designers and developers know SWF well — the format of Flash animations and graphics — and while SVG has been around for quite a while, it’s only in the last few years that support for it has gone mainstream.

With support for Flash dwindling in favor of HTML5, CSS, JavaScript, and SVG, it’s critical that web professionals understand the differences between SVG and SWF and learn to use modern technologies.

What is SWF?

SWF is an acronym that stands for Small Web Format. It’s an Adobe Flash file format that can be used for graphics, animations, and embedded applet widgets. The Flash plugin must be installed in a browser in order for SWF content to render.

SWF has been around for a long time, is supported by a large pool of qualified developers, and there are many pre-built SWF animations and tutorials readily available.

Similarities and Differences Between SVG and SWF

SWF and SVG are both vector graphic file formats, and they both can be scripted to create animations and interactivity. In this way they are similar. However, there are many ways in which SWF and SVG are different.

SVG is an Open Standard

The SVG standard was developed by the World Wide Web Consortium (W3C) and, as a result, is completely open and free to use and build upon. SWF, on the other hand, is a proprietary Flash format owned by Adobe. In 2008, Adobe removed many of the restrictions governing the use of SWFs, but SWF remains a proprietary format.

SVG Is Easier to Work With

SVG code is human-readable plain text XML. SVGs can be created using any plain text editor and creating simple SVGs is easy to do and can be learned quickly by anyone familiar with web languages like HTML, CSS, and JavaScript. SWFs must be created and edited with complex programs such as Adobe After Effects or open-source alternatives such as Motion-Twin ActionScript 2 Compiler.

In addition, scripting SVGs for animation and interactivity can be done with CSS and JavaScript — languages every web designer and developer works with on a daily basis. SWFs, on the other hand, are scripted with Adobe’s ActionScript which is similar to JavaScript but not identical, and most developers deal with it on a much less frequent basis.

Adding an SVG to a website is also as simple as dropping the code into an HTML document in line with other HTML elements. Alternatively, SVGs can be embedded into an HTML document. SWFs must be embedded into an HTML document.

SVG Is Better for SEO

Since SVGs are written in plain-text they can be read and indexed by search engines. SWFs, on the other hand, are binary files that are difficult for search engines to interpret. As a result, if you are using an SVG or SWF to deliver content, you’re better served to use SVG if search engine traffic is important to your website.

SVG Support is Growing

While support SWF files is available in most desktop web browsers, the same is not true of mobile browsers. Support for Flash content, including SWF files, has been largely phased out of mobile browsers. Support for SVG, on the other hand, is offered by every modern browser and support for new features is being added on an ongoing basis.

Both SVG and SWF Support Multiple Media Types

Sound and video content can be embedded directly into an SWF file. SVG does not include support for sound and video content. However, other HTML5 features do support audio and video content, and these features can be embedded directly into SVG. As a result, audio and video can be embedded in an SVG, but playback is handled by other players, not by the SVG standard itself.

SWF Summary

While Flash-based graphics ruled the web in the past, the future belongs to SVG animated with CSS and JavaScript. The following resources will help web designers and webmasters keep their skills up to date and begin to use SVG in their projects.

SVG Resources

There are many free articles, tutorials, and guides to help you get started with SVG. Here are some of the best.

Learn the Basics

If you’re just getting started with SVG, check out this tutorial from Creative Bloq for creating simple shapes and using fills and gradients. A second option that covers a lot of the same basic techniques is this guide to getting started with SVG from Envato Tuts+.

Use Graphics Software to Create SVGs

If you’re going to create anything more complex than simple shapes you will want to work with a vector graphics program such as Adobe Illustrator which can export files in SVG format. This quickguide from CSS-Tricks will show you how to use Illustrator to create an animated ad that uses just HTML and CSS. Another great resource for learning how to use illustrator to create SVGs comes from the Web Designer Depot.

If you don’t have access to Adobe Illustrator, you aren’t out of luck. Inkscape is a professional-quality vector graphics program that is free and open-source. There are also many great tutorials available from Inkscape that will help you get started with the program and show you how to export your creations in SVG format.

Learn Advanced SVG Techniques

If you want to really master SVG there are two resources you need to spend some time reviewing:

• The SVG Tutorial from the Mozilla Developer Network.
• An SVG Primer for Today’s Browsers, a free ebook from the W3C.

Both of these resources are extensive and cover the full breadth of current thinking and practice with regard to SVG programming. These resources are not for beginners, but if you’re comfortable with HTML and CSS, and want to become proficient at working with SVG, then you’re ready to take these on.

Create SVG Animations

SVG can be used to create truly impressive animations. Once you are comfortable working with SVG, if you want to learn how to create impressive SVG animations check out these resources:

• A tutorial from David Walsh for creating SVG animations using CSS and JavaScript.
• An extensive tutorial from Jenkov covering all aspects of working with SVG, including CSS animations and JavaScript scripting.
• Hongkiat’s list of eight leading JavaScript libraries for creating SVG animations.

Further Resources

• Mozilla Developers Network SVG Tutorial: an in-progress tutorial that discusses every aspect of the SVG format for use in Mozilla browsers.
• The Simple Intro to SVG Animation: a great tutorial written by David Walsh.
• ImageMagick Introduction and Resources: a collection of graphics tools, which include some for PostScript.

Conclusion

Making use of SVG 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.

Main text written by Brenda Barron with additional content by Jon Penland. Compiled and edited by Frank Moraes.