When I export SVG in Sketch 98.3, the transparent background is trimmed (deleted) from images. for example, I have several icon symbols in size of 16x16 but exported SVGs are not 16x16 pixels.
The preview shows the correct image but the exported icon is trimmed!
Can you share a sample file to review this in detail? I just did some exports with 98.3 and the transparent space is kept. I exported a symbol source, a symbol instance and a svg layer with a background and all three kept the space.
I’ll check about the trimming of transparent space when you reimport an SVG exported from Sketch that has some transparent space.
About the bitmap layer that’s generated when you drag and drop from the Preview panel, this is the expected behavior; after all, the original layer is still on your file and is vector based (or is an SVG itself), so you can make all the edits and have the SVG format by completing the export process.
I’m aware this may not be the expected outcome and I wanted to ask if this is impacting your workflow.
The bitmap layer generated from the preview doesn’t impact my workflow so it is not very important but trimming a transparent background makes some workflow difficult.
I consider it more carefully and find that it happens for every svg with transparent not just svg generated by Sketch.
If I want to use several svg files created by other apps and designers, I should put them in a transparent rectangle to make them the same size which is very time-consuming.
for more consideration, I created an svg by the Curve (Vectornator) app and opened it in Chrome and Sketch.
Here I open it in Chrome. The size is correctly 24x24. Notice the “view box” highlighted in the right column.
Hi @Taha, I checked why space is trimmed and it’s because Sketch groups always wrap to its contents. When you import SVG content into Sketch it’s always imported in a group and thus, it wraps to its contents because the viewbox attribute is not mapped as a new layer that would keep the spacing.
Of course, I can clearly see your point and I’ve documented this as a feature request.
Hi @dfmedrano I’m also experiencing this problem when importing PNGs into Sketch. My PNGs need to have a specifically defined border size to them (which is, say, 10px of transparent space around the content), but Sketch is trimming that off, making it really hard to use. Is this the same issue you’re describing above?
Thanks for reporting this. I tested on version 98.3 and PNGs are imported as expected, with the transparent space from the original image. Here’s a video of the test I made. Please take a look and let me know if I’m missing anything.
@dfmedrano I’m having the same issue in the browser handoff. I have a transparent rectangle in a symbol to preserve the spacing.
When exporting from Sketch app the rectangle and spacing is kept.
But I have problems doing the same with the web version. When I highlight the symbol in an art board using ‘Inspect’ and click “Export as…” the export dialog tell that the symbol is the correct size (24x24px), but after I have exported it and try to import it back into Sketch, the spacing and transparent rectangle is not there.
The web version keeps the spacing for PNG etc., just not for SVG.
Is there anything I can do?
This is something that will be fixed in our next release! We know it’s been a longtime request: to export icons from an artboard but keep the spacing when you import them back into Sketch.
With our upcoming release, Artboards will evolve into Frames and this will be one of the many benefits they’ll have!
Currently, when you export from the Mac or Web apps and you open the SVG in a browser, spacing is kept, but if you import it back into Sketch, you’ll lose the spacing, because the viewbox attribute is not kept when you import it back.
We’re working hard to make this happen so stay tuned to the Forum!
Thank you for the quick reply Great to hear that this will be fixed in the upcoming release. Is there any estimate on when the release will be available?
Sorry about the late reply , but I have good news: we’re close to our next release. We still have a few weeks’ worth of work to make it happen, but we’re making steady progress!