Affinity created SVGs break at import in android studio

[Inspirimental 8]

Hi Affinity Team,

we are developing more and more apps in both iOS and Android. PDFs from Affinity Designer imported in XCODE work fine. SVGs from Affinity Designer imported in Android Studio break once in a while. Certain paths in the SVG won't be shown after import. There seems to be a problem with certain path directions. So if the first path is clockwise, all following paths that are drawn counter-clockwise won't be able to be imported into Android Studio. (Please see third attachment)

If I import the Affinity SVG (that doesn't work in Android Studio) into Adobe Illustrator and then export the file again as an SVG, the import in Android Studio works find. I don't know if Adobe is setting all paths to the same draw-direction when they export to SVG.

 

Please find attached
1) a SVG from Affinity Designer
2) the same exported from Illustrator and
3) the import result in Android Studio with die Affinity SVG.

If I can provide further information, please let me know.
Tim

icon_Affinity-Designer.svg

icon_Illustrator.svg

[GabrielM 712]

Hi @Inspirimental,

Can you please attach the .afdesign file so we can have a look?

Thanks,

Gabe. 

[Inspirimental 8]

Of course. Here we go.

icon.afdesign

[Inspirimental 8]

Hi Affinity-Team,
any news on this topic?

Tim

[GabrielM 712]

Hey there. Sorry for the delayed reply.

We looked into this and the issue seems to be half on our side, half on Android Studio's side. 

So. When we export as SVG, we declare all the attributes in the <svg.... > tag, and Android Studio seems to ignore them.

<svg width="100%" height="100%" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">

On the other side, Illustrator declares them in a <style> tag

<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
    <defs>
        <style>
        .cls-1 {
            fill: #004182;
            fill-rule: evenodd;
        }
        </style>
    </defs>

I have logged this with our developers to see if we can do something similar in the future. 

I have moved this to feature requests. 

[wigglepixel 77]

@GabrielM Some of the exported attributes in the <svg> aren't even nececary and redundant. Could your developers look into that too please as we like to keep our online svg's as small as possible?! Thanks!

[gabriel_komorov 18]

@wigglepixel @Inspirimental

https://jakearchibald.github.io/svgomg/

Use this for any svg you have problem with. It cleans, simplifies, minifies, prettifies and whatnotifies xml code

Never had any problem with importing to AS after running svg throuhg it

 

[wigglepixel 77]

1 hour ago, gabriel_komorov said:

@wigglepixel @Inspirimental

https://jakearchibald.github.io/svgomg/

Use this for any svg you have problem with. It cleans, simplifies, minifies, prettifies and whatnotifies xml code

Never had any problem with importing to AS after running svg throuhg it

 

Yes, SVGO, the underlying framework that does this, is great. But this goes with a warning: it can break your svg's if you don't know what you're doing. Minifying is not always without cost. It all depends on how you set your options. It changes your svg structure and can delete parts of your svg and round values causing your svg to visually change. Stating this 'cleans' and 'fixes' svgs is just not right and can even be the other way around too.

[gabriel_komorov 18]

1 hour ago, wigglepixel said:

Yes, SVGO, the underlying framework that does this, is great. But this goes with a warning: it can break your svg's if you don't know what you're doing. Minifying is not always without cost. It all depends on how you set your options. It changes your svg structure and can delete parts of your svg and round values causing your svg to visually change. Stating this 'cleans' and 'fixes' svgs is just not right and can even be the other way around too.

It's not like you do adjustments blindly  though - there's preview how SVG looks at any given moment. So I'm not sure what you trying to say here... 

[Inspirimental 8]

Thanks @GabrielM. Looking forward to the next AD updates.

And thanks @gabriel_komorov for the workaround.