In Sketch you can select an artboard, click “Make Exportable” on the bottom right, and pick “SVG” for the format. (It might be better to use “Export as…” and pick SVG for an optimized result.) In Illustrator I just use “Save As” and pick “SVG” for the format. Also, remember to export the whole artboard, not the selected paths at the center, or you will lose that white space in the export. And if the browser doesn’t render the SVG perfectly, it can get worse.Īs a rule of thumb, in a 16px or 20px icon, leave 0.5px or 1px of empty space on each side. We didn’t leave any space around the icon, so there’s a risk that it will be rendered with squarish sides. Browsers use anti-aliasing when rendering SVG shapes, but sometimes the extra pixels from the anti-aliasing are rendered outside of the viewBox and they’re cut off. Leave a little bit of space near the edges, especially for round shapes. When I’m not sure, I like setting stuff on a 20×20 artboard. For example if all your icons can fit on a 15 by 15 pixel grid, and are mostly used with those exact dimensions, go ahead and work with 15×15 artboards or documents. Your icon doesn’t have to be square, but square icons are easier to work with (unless your icon or graphic is really wide or really tall).Įxact dimensions only matter if you want to micromanage pixel fitting (to get the sharpest possible results on low dpi screens). It’s a great way to make sure your icon is clean and doesn’t have a ton of hidden paths lying around. Simple icon on an artboard in Illustrator (left) and Sketch (right) Work with a new document or artboardĬreate a new document or new artboard in your favorite tool, and copy-paste your icon in the center. Yet I find that reworking it a little bit in your favorite tool to make sure it’s just right can save you some headaches and improve the result. When you get a SVG icon from a designer or from a design tool (Illustrator, Sketch, Figma, etc.), it’s tempting to just throw it into your project. Many thanks to the translators! Preparing your icons This article is available in French and in Chinese. Two-color icons and gradient fills are possible too, but require a bit more work. Icons which are often simple, single-color icons (each potentially used in several different colors depending on context and user interactions). Content and communication websites, often based on big CMSes, rather than full-JS web apps. It works well for our needs, which include: 
This is how we do it in our small front-end team at Kaliop.
There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all.
0 kommentar(er)
