Alternative tools for complex svg exports

[craig.dunwoody]

Hi everyone,

so I’ve been using Sketch as the core tool for my current project for about 7-8 years now, and have designed numerous screens and applications with no real issues (that I couldn’t work around)…until now.

Recently, the project has grown to include an android application that now requires assets (developer is stipulating .svg’s for Android).

My problem is that many of the designs I have rely heavily on masks and inner shadows (to fake bevelling and other skeuomorphic “style” effects)…and it appears that .svg files really do not like those (learned that after a search through the forum posts!). After exporting a few assets as svg’s, and seeing how badly the exports are rendered (missing textures, gradients, shadows etc), I wanted to ask if anyone has found a workaround for this issue?

I’ve included a couple of images to show what I’m observing.

I’m hoping that there may be another tool/program I could import my sketch file into, then export a better quality svg from that tool/program? Or maybe a 3rd party plugin? At this point, I’d accept a magical spell or incantation as long as it allows me to end up with a working asset!

Thanks for taking the time to read

[dfmedrano (Jorge)]

Hi @craig.dunwoody,

Thanks for sharing this use case! I first thought the issue was exporting SVGs with some custom format for Android, but it seems the issue is how the output is rendered, correct?

One question: is rendering inaccurate on all instances? Browser, preview, a native Android app, etc?

One thing that can help is flattening layers. Since you mention there are a lot of masks and shadows, sometimes flattening can help, but to validate this, could you share a sample of layers that you have exported incorrectly as SVG?

Thanks in advance

[craig.dunwoody]

Hi @dfmedrano Jorge,

Thanks for your reply!

Yeah, the issue does appear to be how the output is rendered in the svg.

I can confirm that the rendering is inaccurate in both browser (tried multiple browsers just in case), preview and also when attempting to bring the svg back into Sketch. I’ve not yet tried it in a native Android app.

I’ve spent a few hours today delving into the problem, trying to figure out exactly what is/is not supported in an svg export, then trying to go through the Sketch file layer by layer to rectify those issues. As an example, replacing any gradient border styles with fills (convert to outlines) - I think this is precisely what you mean by “flattening layers” (if not, please correct me!)

I’ve found some issues with having multiple “noise” layers (a “noise” image texture which uses the Multiply blend mode and a motion gradient to simulate brushed metal) - one noise layer is displayed in the svg, whilst another is not replicated at all (both noise layers are masked and within separate groups just to add that extra layer of complexity!).

I can also observe some inner/outer shadows being replicated correctly in some parts of the svg, whilst others are either missing or appear quite different (in some cases, they can appear solid like a border stroke). Some gradients seem incorrect or missing, and generally colours also seem quite muted/washed out in the svg.

I also think that there are occasions where a correctly rendered layer is located above an incorrectly rendered layer (in the svg), resulting in some additional “mistakes” (for example, the white highlights in the svg appear to be much more pronounced than intended, potentially a result of the layer/s beneath not being rendered correctly).

I’m methodically going through my file, so it may take some more time, but I’ll certainly post my findings once I have them.

I’ve attempted to provide an exported svg for you to take a look at, but this forum prevents svg’s from being posted (I also tried to be sneaky and place the svg into a .zip file, but that didn’t work either!). I did think about including the notification that tells me I can’t upload my svg, but that just seemed mean and unnecessary!

Thanks for your time Jorge!

[dfmedrano (Jorge)]

Hey Craig,

Thanks for the update. So we’re in for a challenge here definitely! For file sharing you can drop us a line in productsupport@sketch.com and we’ll take a look at it and see what the options are. If the file is too big to attach to an email you can use a file sharing service of your choice, like Google Drive or similar.

About the flattening, it’s a dedicated option. You can find it in Layer → Combine → Flatten. This option can help with layers that have combined or rotated shapes. Most likely it won’t do for all cases but I think it can help.

Another option I was thinking as I read your reply is exporting to a bitmap format, most likely PNG. From the sample image you posted, a PNG asset would render perfectly, keep transparency and shouldn’t be too large in size. I was wondering if the developer mentioned why is SVG required.

Looking forward to finding the best option

[craig.dunwoody]

Hi Jorge,

such a swift response!

Thanks for the recommendation to pass the file along to your support department, that was going to be my last port of call once I’d tried to figure it out by myself (I don’t like walking away from a fight with a computer, plus I feel like I’ve frequently hassled one of your support team recently over a couple of other unrelated issues and wanted to give them a break… Hi Cristiana if you’re reading this, sorry, I’ve broken something again! ).

Thank you for clarifying the Flatten function too Jorge, I had interpreted that incorrectly. That is certainly something I can keep an eye on as I travel through the document (ensuring as many layers as possible are flattened and as “uncomplicated” as possible).

The requirement by my client for svg assets was solely due to Android’s ability to handle them easily… I think they may prefer that solution for scaling the application they’re developing (on multiple device sizes). To add insult to injury, I’m already passing them png assets (in 3 resolutions) to handle the iOS variant of their application. I wholeheartedly agree that they should use png’s, it would make life so much easier for everyone!

My plan is to push along with investigating this specific file, just to narrow down specifics (and attempt solutions that you and others have mentioned in other posts) before eventually admitting defeat and passing the file and relevant information onto your product support.

Thank you again for your assistance with this Jorge, it’s greatly appreciated. I’ll also ensure that if/when this issue is resolved, I’ll comment with the solution on this post for the benefit of other community members.