Jump to content
You must now use your email address to sign in [click for more info] ×

Affinity created SVGs break at import in android studio


Recommended Posts

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

Import.png

Link to comment
Share on other sites

  • Staff

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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... 

Link to comment
Share on other sites

  • 2 years later...

@Gabein February 2019 you wrote:

Quote

 

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. 

Do you have any news on this topic? I'm using AP v1.9.3 for exporting SVGs and Android Studio is still complaining:

1168695533_Screenshot2021-06-14at16_59_59.png.6f42c11dfeff1b1c0b281393abceb6cb.png

Thanks for your help.

Link to comment
Share on other sites

  • 6 months later...
On 6/14/2021 at 11:06 AM, cazador said:

@Gabein February 2019 you wrote:

Do you have any news on this topic? I'm using AP v1.9.3 for exporting SVGs and Android Studio is still complaining:

1168695533_Screenshot2021-06-14at16_59_59.png.6f42c11dfeff1b1c0b281393abceb6cb.png

Thanks for your help.

The <image> tag in SVG is used to embed images (which may be raster or other SVG vector images) inside an SVG image.

I seriously doubt the issue is with the attributes being in the <svg> tag instead of a <style> tag if Android Studio is giving that particular error.

As the <image> tag is perfectly valid in SVG, I would suggest that this particular error is 100% the fault of Android Studio, not of the Affinity products.

 

That said, you might still check to see if some part of your document is being rasterized on export, as that would require this tag to be used, and would at the same time prevent it from actually being a vector image.  If rasterization of the image is required for export, you might be better off simply exporting as a PNG or other raster image format rather than wrapping it with an SVG.

Link to comment
Share on other sites

  • 5 months later...

I've run into this also. When trying some tests with just basic shapes set to both solid and with strokes, they all seem to come in as a solid shape. I'll include some screengrabs to show what I am talking about. 
Here is the test file created in AD:
image.png.ed6a82e54b94b9e200d74904eab18be0.png

And just to verify that it was exported as just a regular svg:
image.png.ec0395c6b737ea7ee0076de67ac8e3f5.png

This is how it appears in Edge:
image.thumb.png.279d1d45b560badde411ce7faa85b1de.png

But when I try to import into Android Studio, I get an error:
image.png.c46fd41292bc2aa3e4126ac97acc8f8c.png

I've tried the flatten options and the two digital options and none of them work. But if I use Inkscape and save as svg I don't have any issues. Any insight on how to get around this? It's not that big a deal to use Inkscape as an exporter. It literally only takes a matter of seconds to do. But it would be nice if I could do everything natively in Affinity Designer. 

 

Link to comment
Share on other sites

Why don't you look at the generated SVG code inside an text editor at line 6 in order to see if maybe a raster based uuencoded binary "<image>" has been generated instead of plain vectors here?

error_line.png.85ae6efb75b33d1412675183352a4aa2.png

That shown error message suggerates that there is probably some problem with an image then!

Take a look at the by ADe and Inkscape generated SVG files inside an text editor and compare them!

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
 
<svg
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg5"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs2" />
  <g
     id="layer1">
    <circle
       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:4.99999;paint-order:markers stroke fill"
       id="path234"
       cx="50.666031"
       cy="55.732635"
       r="35.466225" />
    <path
       id="circle290"
       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:4.99999;paint-order:markers stroke fill"
       d="M 147.43803 33.946248 A 35.466225 35.466225 0 0 0 111.97198 69.412301 A 35.466225 35.466225 0 0 0 135.33179 102.72448 A 35.466225 35.466225 0 0 1 129.70526 83.599032 A 35.466225 35.466225 0 0 1 165.17131 48.132979 A 35.466225 35.466225 0 0 1 177.2946 50.271867 A 35.466225 35.466225 0 0 0 147.43803 33.946248 z " />
    <circle
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:4.99999;paint-order:markers stroke fill"
       id="circle349"
       cx="67.892479"
       cy="168.7179"
       r="35.466225" />
    <path
       id="circle906"
       style="fill:#000000;fill-rule:evenodd;stroke:#000000;stroke-width:4.99999;paint-order:markers stroke fill"
       d="M 157.06483 155.03808 A 35.466225 35.466225 0 0 0 121.59826 190.50413 A 35.466225 35.466225 0 0 0 157.06483 225.9707 A 35.466225 35.466225 0 0 0 192.53088 190.50413 A 35.466225 35.466225 0 0 0 157.06483 155.03808 z M 157.06483 174.4431 A 16.061014 16.061014 0 0 1 173.12587 190.50413 A 16.061014 16.061014 0 0 1 157.06483 206.56517 A 16.061014 16.061014 0 0 1 141.0038 190.50413 A 16.061014 16.061014 0 0 1 157.06483 174.4431 z " />
  </g>
</svg>
Link to comment
Share on other sites

  • 1 year later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.