Preparing and implementing svgs on the web

•

Svgs are awesome. They are scalable, small, and you can actually edit the file both visually and in code. This is my current workflow for optimising svgs for webpages.

Visual editing

At the moment I do most of my design work in Figma, even though its svg exports is not the best. I know they are working on it, but at the moment I export the svg from figma and import it into Sketch where I usually remove some groupings and clipping masks and export it out again.

Preparation

How you prepare the svg in your editor is an important part of optimizing your svgs, but there are two quick-fixes you can do before you export that I would recommend:

  1. If your shape has any form of transform remove it by selecting the shape in Sketch and go to Layer > Combine > Flatten. Now the Transform should say 0.
  2. If you have multiple shapes that visually combines to one shape Combine them by selecting them and going to Layer > Combine > Union|Subtract|Intersect|Difference F.ex. an arrow consisting of a rectangle and a triangle should be combined into one shape for smallest file-size.

Export

How you export and compress your svg are important for the final file-size. The default export from Sketch has a lot of bloat (Hello, <desc>Created with Sketch.</desc>), and we don’t want that in our final files. In Sketch I therefore have the plugin SVGO Compressor installed. It just magically compressses your files when you export as usual.

I have changed the default settings to compress the files even more than the default-setting. To copy my settings you can select Plugins › SVGO Compressor › About SVGO Compressor and then click the Edit SVGO Settings… button. Your default editor will open the svgo.json file, where you’ll be able to tweak the settings. Remove the content in the file and paste this file instead. In my experience it at least halves the file-size from the default settigs. Your milage may vary if you use a lot of masks/gradient etc. but I would recommend testing out tweaking the different parameters. They are very descriptive like cleanupAttrs, mergePaths, removeTitle etc. You can see all the parameters here

Svgomg also exist as a webtool, and even though it works like magic on the svg filesize, it doesn’t change the structure of the svg. If you have unneccesary shapes, masks or shapes that could have been combined you should fix this before exporting. This is probably whats going to save most space.

Manual editing

You’d be surprised how much of a regular svg is not needed. SVGO helps a lot with this, but just to a certain point. Most tools add unnessecary class-names and divs or groups that you don’t need any-more. They are mostly not needed unless you are doing something more complex like controlling your svg via CSS or having gradients or masks. I always recommend opening up your svg-file in your favorite editor and just delete elements that doesn’t seem neccessary.

Attributes

When you export out an svg you usually get a lot of attributes added to the svg like <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >...</svg> but when do you actually need to use them?

xmlns

The xmlns="http://www.w3.org/2000/svg" attribute is

The xmlns:xlink="http://www.w3.org/1999/xlink" attribute is:

version

The version="1.1" attribute is:

viewBox

This says a lot of the size/placement of the elements in the svg so this is always needed.

height and width

You don’t need to specify this. If you don’t the svg will take as much space as it is allowed. Much like a regular <img /> without width specified.

grouping

Very often you don’t need the grouping (<g>) of elements if the file is simple, or you are not editing the file any more. If you f.ex. are exporting out an icon with just one shape, the grouping is unnecessary.

fill-rule=”evenodd”

This is often not needed. I recommend trying to remove it to se if it affects your svg. Here is an article outlining how the fill-rule property works.

Implementing on the web

Inline svg

To get the most control of the svgs just copy the code in the svg and paste it into you html/twig/php/react-file and your good to go. I usually change the fill-color to currentColor to control the color better via the color-property in CSS. Other times I just remove the fill-color completely and target it in the css via fill. Or, if I need multiple colors, i might add classnames to each path and shape so that I can target them directly with css.

svg in CSS

There are multiple ways to add an svg to your CSS. Lets take this link with an arrow behind is an example. We can add this multiple ways:

A couple of things to note:

  • If you link to the svg-file it’s going to be a new http-requests, and microscopically slower.
  • You can directly inline svgs like this:background-image: url('data:image/svg+xml;charset=UTF-8,<svg>{content here}</svg>'); (Link 2). This however doesn’t work very well with some versions of internet explorer. The fix for this is to URI-encode your svg. I use this tool to convert the svg to data URI.
  • Another solution is to Base64-encode the svg, but is usually create a larger file than uri-encoding the svg directly.
  • You can’t use currentColor or similar when you URI-encode the svg since the browser reads it like it’s a svg that you are linking to. If you want the hover-color of the icon to be the same as the rest of the link I have 3 solutions for you: _ Link to another colored URI-encoded-svg on hover (Link 4) _ Use mask-image and use currentColor on the background-color. The support for this is not the best, so use with causion. (Link 5) * You could also fake a mask in SVG (basically create a box in the same color as the background, and clip out the symbol from that shape). Again we use the background-image with currentColor. The support for this is much better, but a bit hacky. ¯_(ツ)_/¯ (Link 6)

Last Posts