SVG export templates

Suggest an idea
1

I’m currently working on a bunch of SVG icons, and the default SVG export is just too limited and verbose for this task.

For instance, here’s a simple three dots icon from Tabler icons:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-dots">
    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
    <path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
    <path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
    <path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
</svg>

But just importing this into Sketch and re-exporting gives me this:

<?xml version="1.0" encoding="UTF-8"?>
<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">
    <title>icons/dots</title>
    <g id="icons/dots" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="dots">
            <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
            <path d="M4,12 C4,12.5522847 4.44771525,13 5,13 C5.55228475,13 6,12.5522847 6,12 C6,11.4477153 5.55228475,11 5,11 C4.44771525,11 4,11.4477153 4,12" id="Path" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M11,12 C11,12.5522847 11.4477153,13 12,13 C12.5522847,13 13,12.5522847 13,12 C13,11.4477153 12.5522847,11 12,11 C11.4477153,11 11,11.4477153 11,12" id="Path" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M18,12 C18,12.5522847 18.4477153,13 19,13 C19.5522847,13 20,12.5522847 20,12 C20,11.4477153 19.5522847,11 19,11 C18.4477153,11 18,11.4477153 18,12" id="Path" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
        </g>
    </g>
</svg>

Not only does Sketch add a whole bunch of superfluous code, it complicates the path coordinates, and actually moves and duplicates the stroke and color data to every single path. Which also limits the ability to style the icon with CSS because the currentColor is gone.

It would be great if there was some way to mark up some kind of template, plus some settings to get the desired results…

2

Hi Lennart,

Thanks for sharing this. I’ve documented as a feature request to customize SVG output.

I also wanted to ask which settings would work for you. Customizing SVG output can cover a lot of ground and I’m curious as to which settings you’d like to add besides keeping an attribute name like stroke="currentColor"

Thanks in advance

2 Likes
3

I’m not an SVG expert, but in general I’d like the SVG to be as simple/short as possible. So:

  • Options to disable ID’s, groups, titles, …
  • Option to put fill & stroke data on the <svg>, not on every path.
  • Short path coordinates like in the example above.

Things like that?

2 Likes
4

Hi Lennart!

Yes, this will do, thank you so much for sharing! :raised_hands:

5

Related: Convert combine shapes into a single vector path

In my opinion there’s a lot of room to improve SVG creation, editing, import, and export in Sketch. Maybe I’ll document these in another issue one of these days…