Integrating SVG into your site | Heart Internet Blog – Focusing on all aspects of the web

Support for Scalable Vector Graphics (SVG) is now excellent across all modern browsers, and the image format appears in sometimes surprising contexts on many different kinds of web pages. But despite existing as a standard for almost two decades, SVG remains somewhat new for some designers and developers, leaving them confused as to how it should used on their site.

First, some reasons as to why you should be using SVG:

Reasons why

Tiny file size

When well-designed and delivered (more on that below) a typical SVG is far smaller than an equivalent PNG, meaning that pages that use them load faster for users, with lower bandwidth costs for you.

Infinitely scalable, with no loss in quality

Because they are built from mathematical descriptions, rather than the fixed pixels of bitmap graphics, SVG drawings can be scaled up and down with no loss in quality, making them perfect for modern responsive sites.

Addressable drawing components in the DOM

SVG is sometimes referred to as “drawing with markup”: every single element in an SVG illustration is addressable via the DOM, meaning that CSS and JavaScript can manipulate parts of an SVG document live in the browser without influencing the whole. Unlike bitmap graphics, every separate shape in an SVG can have its own id or class.

Easy to modify and adapt

That same quality of addressable drawing components means that well-formed SVG documents can be modified very easily, in any text editor, without needing the specialised apps required for bitmaps. And because SVG is DOM-addressable, elements in the drawing can be modified with CSS.

Creations and constructions

The qualities of SVG make it ideal for many images on your site, including:

  • logos
  • icons
  • maps
  • line illustrations and drawings

Tools for the trade

While you can create an SVG document using any text editor, a vector illustration application like Adobe Illustrator or Inkscape is usually a better choice (although it should be noted that other apps — including 3D programs like Blender and server-side apps — can export SVG too).

Regardless of what you use, you should be aware that SVG creation from apps can still sometimes leave a bit to be desired: the resulting document is often over-coded, and occasionally poorly formatted. The .svg file can be made smaller, more compact and easier to alter by passing it through an optimizer like SVGOMG. Sometimes passing a malformed .svg document through the W3C validator can help you spot problems in the drawing.

Integrating SVG

There are three primary ways that SVG can be used directly on a web page:

Directly in the code

Because SVG is based on XML, it can be integrated directly in the code for your page. Inlining the SVG code reduces latency and the overall load time of your page (although this may not continue to have quite the same advantage as the adoption of HTTP2, and its associated advantages in loading, grow over time). It also has the advantage of being directly addressable with CSS and JavaScript.

Referenced as an <img>

Just like bitmap images, an SVG file can be referenced from an <img> tag, or via CSS as a background image. This is often the best course of action if the components of the SVG don’t need individual attention once the image is presented on the page, since interactive CSS and JavaScript will be nullified by the security restrictions of HTML images. (However, the SVG image as a whole can still be manipulated, using CSS or JS on the page itself.)

Inserted as an <object>

A slightly older-school approach, but one that allows full CSS and JavaScript interactivity to be retained inside the .svg file, while leaving the code of your page uncluttered. Has the same potential latency issues as the <img> approach.

Additions and complications

As mentioned, there are a few things vector illustration applications currently don’t do with SVG. While you’ll have to add these features via a code editor, they can make a great addition to your site:

Adaptive SVG

As I mentioned, individual components of SVG can be labeled with an id or class, meaning that they can be manipulated within media queries:

@media screen and (max-width: 900px) { path#right { display: none; } }

Example of how an SVG can adjust with the Coca-Cola logo

This means that you can turn off and on different features of an SVG illustration at different viewport sizes, creating opportunities for adaptive logos (as shown above) or illustrations that show greater or less detail as the viewport shrinks and expands… which is entirely suited for responsive design, which is about showing visitors relevant content at an appropriate level of detail for where they are, and what device and screen size they are using, rather than “squishing” the same content down into smaller and smaller spaces.

Check out this adaptive branding module:

See the Pen Adaptive Branding Module: Coca-Cola by Dudley Storey (@dudleystorey) on CodePen.

And this prototype:

See the Pen Adaptive SVG Branding Module Prototype by Dudley Storey (@dudleystorey) on CodePen.

SVG Interactive Imagemaps

Individual shapes in SVG can also be linked; unlike linked HTML elements, which always create rectangular “hotspots”, linked SVG shapes are always pixel-perfect to the actual shape, meaning that they are perfect for interactive maps and other applications:

See the Pen Interactive Geographical Map w/ SVG & JavaScript by Dudley Storey (@dudleystorey) on CodePen.

Patterns

There are two particularly under-appreciated aspects of SVG: <pattern> and <filter>. Patterns take a “swatch” of an SVG illustration and tessellate them across the viewport, making them a perfect method of creating easily-adjustable, scalable, and fast-loading background image patterns.

See the Pen SVG Scales by Dudley Storey (@dudleystorey) on CodePen.

Conclusion

Browsers have matured to the point at which using SVG as a first-class image format in your sites is now a foregone conclusion, taking full advantage of vector graphics. With this brief guide, I hope that you are inspired to use SVG more in your own sites and web experiments.

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

Got a question? Explore our Support Database. Start a live chat*.
Or log in to raise a ticket for support.
*Please note: you will need to accept cookies to see and use our live chat service