Website Logo. Upload to /source/logo.png ; disable in /source/_includes/logo.html

Up and Running with SVG

An SVG primer for everyone. Created by Mijingo.

SVG and Performance

Better Fallback for object

Earlier we used the object method of including SVG in our document. Our fallback technique–for browsers that didn’t support the SVG image we call–was to use the img element and simply call the bitmap version of the image. When the browsers that don’t support SVG encounter the object element and see an SVG image, they’ll just go to the img that is included in between the tag pair.

However, when the document is viewed in a supported browser, the fallback image may be downloaded anyway. This is less than ideal because our page is forcing the download of assets that aren’t required. It’s just one image in our simple example but on a complex page this could be a dozen extra downloads. It’s completely unnecessary!

To remedy this, I suggest you use a background image for an element in the object element. This could be a div or something semantically meaningful, like an h1.

This idea comes from A Primer to Font-end SVG Hacking by David Bushell. He calls out a real-world use of this technique by the folks at Clear Left. Inspect the logo on their page and review the markup and CSS. Their fallback is an h1 wrapped in a span and the background image is on the span.

The use Element

The use element in SVG can help you not repeat yourself when calling the same SVG image in multiple places in a document or website. A common example of this is a spritemap with website iconography or user interface images.

There are two ways to use, ahem, use:

  • with an internal link to an SVG already used in the same document, or
  • with an external link to an SVG used elsewhere.

SVG use with external links is limited in browser support (much more limited than SVG itself), however, so you’ll want to use a polyfill that handles Internet Explorer support.

Here’s an example using a link to an internal SVG element:

<svg height="400" width="400" viewBox="0 0 400 400">
  <defs>
    <rect id="sourceRec" x="0" y="0" height="400" width="400"/>
  </defs>
  <use xlink:href="#sourceRec" fill="#56A0D3" x="0" y="0" />
</svg>

In this simple example, we define a rectangle shape inside the defs element. Anything inside this element is not rendered to the screen. It’s just tucked away and used to generate new shapes. To do that, we’re using the use element to reference the shape inside of defs and use it to draw a square.

Because we didn’t set a fill color for our original shape (inside of defs), we can define that when we use use to generate it. We also set the x and y coordinates of where the shape should start drawing.

Use CSS Sprites

You can combine multiple SVG images into one SVG file and then use that as sprite image. This is a common technique used with CSS and bitmap images that you can easily apply to SVG.

Only Include Vector Points that Appear in Image

This is a good, and probably overlooked, tip from Ben Frain:

Remove any vector points that aren’t visually relevant. For example if only the tip of a star is showing behind something else, remove all the vector points that’s aren’t visible on the star. Less vector points == less file size. This kind of thing can really save KB across multiple SVGs.

Use SVGO to Optimize SVG

SVGO is a Nodejs-based SVG optimization tool. It performs over 30 different optimizations on SVG files to make them as lean as possible.

SVGO is available as a stand-alone command line utility or packaged up as a Grunt plugin and Gulp plugin.

Additionally, SVGO can be used as an OSX Folder Action. Folder Actions are mini scripts attached to folders that process any files added to the folder. After installing the Folder Action, you just have to drop the files you want to process in the folder and the script will run, optimizing your SVG files.

Using Grunticon

Grunticon is a “mystical CSS icon solution” by the Filament Group. It is, in fact, a Grunt plugin that processes a folder of SVG or PNG files and outputs them in three different formats: SVG data URLs, PNG data URLs, and plain ol’ PNG files. Grunticon also handles checking for supporting browsers and delivering the proper asset.

Ready to learn more?

Get the Full Video Course