Scalable Vector Graphics (SVG) is a language for describing two-dimensional graphics in XML. These graphics can consist of paths, shapes, and/or text that can be scaled and resized without losing image quality like a bitmap would.
While SVG has actually been around for many years it has only recently begun to receive the attention it deserves. The ability to resize a single image without worrying about it being pixelated is as important as ever with responsive design and performance concerns across the ever growing number of devices in use.
In this post we will briefly review some of the more notable benefits of using SVG and then dive into how to start adding it to your workflow.
While there are a couple disadvantages to using SVG, such as lengthy code and inconsistent browser support for advanced features, the benefits far outweigh any of these drawbacks and make understanding and using SVG an essential part of design and development today.
SVG offers a resolution independent technique for presenting graphics on the Web. Through the use of XML properties such paths, shapes, text, gradients, patterns, and filters are written and can then be reused at any scale and resolution.
Let’s take a look at what happens when we scale up a PNG and SVG of the Lincoln Loop logo; logos are the perfect example of a practical application of SVG!
SVG provides us with a much more flexible, scalable logo that looks great on different devices.
SVG lives in the DOM. The DOM interface promotes accessibility by providing an easy to navigate, inspect and edit script for these graphics.
SVG is searchable. This is especially beneficial when working with graphics that contain text, for example. Text written within a
<text> element in
<svg> is regarded as character data which makes it accessible to searches and indexing.
SVG provides many accessibility benefits to disabled users. Perhaps the more straightforward contribution here is its ability to be enlarged without losing image quality, assisting users with low vision better access these graphics.
Through the proper use of title and description elements, the SVG author can thoroughly describe an image for the user. These elements have no visual output and strictly aid in enhancing user understanding of the visual.
<svg> is rendered as plain text and accessible by screen readers in addition to being completely scalable, all unlike with bitmaps.
You can generate gradients, patterns, filters, and clipping paths within SVG. To single out one of these features specifically let's add a gradient to our logo. SVG allows us to generate gradients like we can with CSS, but have the advantage of living in the DOM and being part of the graphic itself and not part of an ever changing stylesheet.
The gradient details are contained within a
<defs> element in the
<svg> to be called on and used later. We can then reference this gradient through the
fill (background) and/or
stroke (border) attributes within the appropriate section of the logo.
The logo is being used inline, which we will discuss further in a following section, exposing the long code comprising the paths the graphic is taking. The defined gradient is then being referenced by the logo’s
SVG content can be made to respond to user-initiated events. For instance, animations or scripts can be triggered on click and pointing events and users can even be enabled to zoom in and pan around these images.
Using SVG inline can be especially handy as it provides us with access to all the individual parts of a graphic. These parts can be accessed individually for animation and interactivity purposes.
The demo below has an animation on the logo triggered by clicking it.
Plays Well With CSS
SVG and CSS work very well together. You can use CSS for seemingly simple manipulations, such as styling a stroke, or for more advanced manipulations like animations.
SVG, in a way, has its own animation method: SMIL animation. SMIL animation allows us to define animations within the SVG element itself. This way of animating, however, has no support in any version of IE.
@keyframes animations, on the other hand, have much stronger cross browser support and can work beautifully with SVG.
Here’s a look a at our logo being transitioned and animated through two
@keyframes, one to manipulate its scaling and one that appears to “draw in” the stroke that we added to the circle.
Maintain hover anywhere in the demo to see the logo animation and "rerun" to replay:
Browser support for basic SVG use is very strong across all modern desktop and mobile browsers, though you will find the support is not as consistent with more advanced features, such as SMIL animation mentioned earlier.
If IE 8 support is a must there are a number of fallback options you can utilize to get a backup PNG in place.
If you find yourself convinced that SVG is the way to go in most instances then you may be wondering how you can get started using it as soon as possible, which is exactly what we will be discussing now.
Let’s take a look at some of the more common ways you can start using SVG.
SVG as an image is done the same way you would add a PNG, for example:
<img src=“images/ll-logo.svg” alt=“Lincoln Loop logo”>.
The size of the image will be the size it was when you saved it in your vector graphic software, but can be changed by selecting it and changing its
width, as you would with a PNG or JPG.
This method allows you to link to an external SVG file while still being able to manipulate its individual parts with CSS.
<object type=“image/svg+xml” data=“images/ll-logo.svg”></object>
Calling on an SVG via
<object> will reference a separate text file that contains the SVG code for the image.
External stylesheets will not work when using SVG as an
<object>, so any CSS being used here must be included within a
<style> element within the
<svg> <style> /* CSS styling for SVG here */ </style> </svg>
Using SVG inline refers to writing these graphics by hand in our HTML or the direct embedding of the XML code. This method is very powerful in that it allows us to have complete control of the graphic design and details. Inline SVG provides for complete customization and manipulation of the graphic as a whole or individual paths and groups.
Here’s a closer look at the code for our logo:
<svg width="200px" height="200px" viewBox="0 0 200 200"> <path class="circle" fill="#75ccd5" stroke="#76CCD5" stroke-width="2" d="M99.837,4.885c-52.444,0-95.116,42.673-95.116,95.117 c0,52.444,42.673,95.114,95.116,95.114c52.77,0,95.443-42.669,95.443-95.114C195.28,47.557,152.607,4.885,99.837,4.885"/> <g> <path class="letter" fill="#FFFFFF" d="M95.431,69.03v31.638c0,0.159-0.007,0.317-0.012,0.475 c-0.084,2.557-0.842,4.942-2.105,6.984c-0.5,0.962-0.976,1.743-1.274,2.225c-0.516,0.833-17.533,25.039-17.533,25.039l-6.903,9.775 c-3.945,5.635-9.405,6.187-14.572,2.569c-5.164-3.617-6.513-8.936-2.567-14.571c0,0,12.605-18.043,18.146-25.976 c1.338-1.915,2.266-3.244,2.502-3.584c0.089-0.127,0.172-0.248,0.253-0.366c1.899-2.464,3.048-5.504,3.132-8.803 c0.014-0.339,0.01-0.544,0.01-0.544v-5.741V58.149c0-6.879,4.155-10.461,10.46-10.461c6.308,0,10.463,3.582,10.463,10.461V69.03z"/> <path class="letter" fill="#FFFFFF" d="M146.967,147.736c-5.167,3.618-10.627,3.066-14.572-2.569 l-6.903-9.775c0,0-17.017-24.206-17.532-25.039c-0.299-0.482-0.774-1.263-1.274-2.225c-1.263-2.042-2.021-4.428-2.105-6.984 c-0.005-0.158-0.012-0.316-0.012-0.475V69.03V58.149c0-6.879,4.155-10.461,10.463-10.461c6.305,0,10.46,3.582,10.46,10.461v30.003 v5.741c0,0-0.004,0.204,0.01,0.544c0.084,3.298,1.233,6.339,3.132,8.803c0.081,0.118,0.164,0.239,0.253,0.366 c0.236,0.34,1.164,1.669,2.502,3.584c5.54,7.933,18.146,25.976,18.146,25.976C153.48,138.8,152.132,144.119,146.967,147.736"/> </g> </svg>
The first path within the
<svg> element makes up the circle of the logo and the
<g> (group) contains the two “L”s.
The W3C has a great reference to get started writing basic SVG shapes “by hand”. There are six basic SVG shapes: rectangles, circles, ellipses, straight lines, polylines, and polygons.
Let’s take a look at the structure for a basic rectangle:
<svg> <rect width="200" height="100" fill="#75ccd5" /> </svg>
Each shape element requires a set of attributes before it renders, like coordinates and size details.
Vector Software Embeds
Once your graphic is complete you can grab the generated XML code and paste it directly into your HTML or run it through an optimizer first to clean up any unnecessary bits and minimize the code as much as possible.
The benefits are using SVG are vast and getting started can be quite painless once you become familiar with the basic behavior of this language. There are several different ways you can use it and which is best really depends on the circumstances of the project, but either way I can pretty much guarantee you will not miss the days of bitmaps!