Better Fallback for
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
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
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,
- with an internal link to an SVG already used in the same document, or
- with an external link to an SVG used elsewhere.
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
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.
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.
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.