Last updated: December 30, 2018
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
<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.
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>
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.”
<svg> elements you can play around with include
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.
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
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.
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:
- 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.
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.