Menu
I want to use svg icons in my page. The designers I work with use Sketch to design the image and export the result in svg.
Sketch adds various id tags to the exported code (note the id="Page-1", id="My-Star" and id="Star-1" attributes):
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="My-Star" stroke="#979797" fill="#D8D8D8">
<polygon id="Star-1" points="11.9860934 18.5835921 5.4876995 22 6.7287823 14.763932 1.47147118 9.63932023 8.73689646 8.58359214 11.9860934 2 15.2352904 8.58359214 22.5007157 9.63932023 17.2434045 14.763932 18.4844873 22 "></polygon>
</g>
</g>
</svg>I include the svg directly in the html. By doing this, I introduce the same id multiple times. Besides the invalid html that is a result of this way of working, I need to style the svg elements based on ids. This is a bad practice.
I use css to style the svgs, take a look at an example
The question:
Is there a way to replace the ids with classes when exporting svgs from Sketch? Is there some plugin or setting I can give to the designers?
If not, what is the optimal workflow in receiving svg assets from designers and using it in the page?
792
Select the elements you want to export as an SVG and go to “Make Exportable” in the bottom right corner of Sketch interface and select SVG format then click on “Export selected” button. Select the name of the file and the destination on your device, then save.
Open your Sketch file, select a layer, multiple layers or an artboard and click Make Exportable in the bottom right corner. Make sure that format is set as SVG in the Format dropdown. Adjust the resolution size and hit Export (either Export layers or Export [name of the artboard]).
Option 1— Export code directly from Sketch On your Anima plugin in Sketch, click “Preview in browser”. Click Export Code in the top right corner. Select where the Code Package will be saved on your computer and click Save.
Exporting symbols works exactly the same as exporting artboards. Simply select a symbol or multiple symbols (which are usually located on the Symbols page in Sketch) and press Control + Command + E to begin the export process.
But, there is only one correct way to export clean .svg code. Let’s investigate some possible solutions: ) Select multiple icons on one large artboard, click and export in .svg format *note: You could go to Layers > Path > Flatten and try this route, but Sketch never highlighted the option after I selected the icon. Boo. 1.) Create an artboard
This challenge is due to major bug issues in Sketch. They export sloppy and messy code embedded into the .svg files. This was mostly solved by trial & error but in the end we found the correct solution to export a clean file for the team using Sketch. Sketch makes my life easier in many ways, but exporting .svg files is a disaster.
Feel free to use either the Export button in the Inspector or the Copy SVG Code function in the Edit menu—but, again, use them on your Artboard.
This was mostly solved by trial & error but in the end we found the correct solution to export a clean file for the team using Sketch. Sketch makes my life easier in many ways, but exporting .svg files is a disaster. A bug that needs some fixin’
I highly recommend adding svgo to your workflow if you're dealing with SVGs exported via Sketch. Not only will the tool eliminate unused IDs (you're still on the hook for manually resolving IDs that are used by the SVG), it will also optimize the SVG better than the default SVG export.
If you're doing this often, adding SVGO to your dev/build process (see examples); if you just want to take it for a test run, however, there's also a web-based GUI: https://jakearchibald.github.io/svgomg/
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
