Visual editing

At the moment I do most of my design work in Figma, even though its svg export 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:

Try to keep your transforms to 0

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 in Sketch. An arrow consisting of a rectangle and a triangle should f.ex. be combined into one shape for smallest file-size.

Combine shapes

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 settings. 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

Svgo also exist as a webtool (called svgomg), 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

• Required when you used standalone svg (previews or import it via <img /> or CSS.

• Optional for inlined <svg>

xmlns:xlink

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

• Required for image/svg+xml files with xlink: attributes. (like masks and similar.)

• Optional for inlined <svg> with xlink: attributes

version

The version="1.1" attribute is:

• Recommended to comply with image/svg+xml files standards

• Ignored by every user agent.

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)
  
  

Useful links:

• svgomg to minify the svgs

• Convert svg to data URI

• SVGO Compressor

• My export settings for SVGO Compressor for Sketch