Assuming the artwork is in Sketch, the first step is to export the SVG from Sketch.
Export from app
Right click on your icon and select Copy SVG code or Export via the sidebar.
Optimise strokes, paths and artboards
Two main things that can go wrong with SVG icons that haven’t been considered carefully enough:
- Artboard (or viewBox) are all different for the SVGs on the site design; so when we try to line them up we get problems
- Strokes have been used instead of paths
I don’t know why but strokes don’t come out well sometimes so it’s better that paths are used instead.
1 Fix artboard size
Open the SVG in Illustrator.
If the artboard is too big/small. Then you can edit this. Ideally, you want either all your icons to have the same artboard dimensions because this will help you line them up with CSS later and this will mean a little white-space OR you want your artboard to really hug the edges of your icon.
Tightly fitting artboard
Select your icon then choose Object > Artboards > Fit to Artwork Bounds
On a square uniform artboard
In the Properties tab, make sure none of your layers/shapes are selected and you will be able to see an Edit Artboard button. Click this and you’ll see an option to edit the width and height of the artboard. If you have an icon system you’ll want them all on the same size artboard otherwise you’ll have lots of little spacing issues in your build.
2 Change strokes to paths
If the designer has used strokes instead of paths then you can convert these by selecting Paths > Outline Stroke from the Object menu.
Optimise the SVG… again
Illustrator and Sketch add loads of extra attributes and comments and tags we probably don’t need in our SVG, so thanks to the SVGOMG tool we can get rid of them all.
Unoptimised SVG
<svg id="aebd208e-ecc3-4337-b0d0-4073e2533ece" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 24">
<title>file-pdf</title>
<g id="ee94badd-b5d6-4580-9207-ec3775f5335b" data-name="Page-1">
<path fill="#ff0000" id="ac7ad2f4-5888-496f-b9a5-d424c18284a4" data-name="file-pdf" d="M18,2V8h6ZM9,15.75H7.75v2.5H9A.25.25,0,0,0,9.25,18V16A.25.25,0,0,0,9,15.75Zm4.75,0v4.5H15a.25.25,0,0,0,.25-.25V16a.25.25,0,0,0-.25-.25ZM16,2H6A2,2,0,0,0,4,4V24a2,2,0,0,0,2,2H22a2,2,0,0,0,2-2V10H16ZM10.75,18A1.75,1.75,0,0,1,9,19.75H7.75V21a.75.75,0,0,1-1.5,0V14.25H9A1.75,1.75,0,0,1,10.75,16Zm7.5-3.75H21a.75.75,0,0,1,0,1.5H19.75V17.3a.7.7,0,0,1,.25-.05h1a.75.75,0,0,1,0,1.5H20a.7.7,0,0,1-.25-.05V21a.75.75,0,0,1-1.5,0ZM16.75,16v4A1.75,1.75,0,0,1,15,21.75H12.25v-7.5H15A1.75,1.75,0,0,1,16.75,16Z" transform="translate(-4 -2)"/>
</g>
</svg>
Optimised SVG - 70% smaller
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 24">
<path fill="#ff0000" d="M14 0v6h6zM5 13.75H3.75v2.5H5a.25.25 0 00.25-.25v-2a.25.25 0 00-.25-.25zm4.75 0v4.5H11a.25.25 0 00.25-.25v-4a.25.25 0 00-.25-.25zM12 0H2a2 2 0 00-2 2v20a2 2 0 002 2h16a2 2 0 002-2V8h-8zM6.75 16A1.75 1.75 0 015 17.75H3.75V19a.75.75 0 01-1.5 0v-6.75H5A1.75 1.75 0 016.75 14zm7.5-3.75H17a.75.75 0 010 1.5h-1.25v1.55a.7.7 0 01.25-.05h1a.75.75 0 010 1.5h-1a.7.7 0 01-.25-.05V19a.75.75 0 01-1.5 0zM12.75 14v4A1.75 1.75 0 0111 19.75H8.25v-7.5H11A1.75 1.75 0 0112.75 14z" data-name="file-pdf"/>
</svg>
Inline it in HTML or use in img tag
The advantage of inlining the SVG in the HTML is that it allows us to make it interactive.
To do this, the final step is to convert uses of color to use currentColor instead of a hexadecimal code - this allows us to add hover effects and other cool stuff with CSS e.g.
a {
color: red;
}
a:hover {
color: blue;
}
a svg {
fill: currentColor; /* SVG will be blue when its parent link is hovered */
}
Bonus points: Create an SVG sprite
If you’re going to use the icon more than once on the page you’re going to want to make an SVG sprite instead of simply copying and pasting the full icon in multiple times.