Affinity Designer SVG Export

[m_bartholomew]

When exporting a vector image to SVG, Designer appears to add hundreds of points to a path that aren't there when editing, causing the exported file to balloon many times the size as one exported from illustrator.

 

For example, the Twitter logo contains 20 points on the path in Designer, but after exporting as a SVG it balloons to 1,554 points! Is there anyway to tell Designer to not add points, and to respect the original layout?

 

This is holding me back from dumping Adobe Illustrator completely, so any help would be greatly appreciated.

 

 

Thanks,

 

Mike

[Jay D]

What steps did you take up to exporting?

I used the twitter logo from Grade UI and export didn't add extra points.

 

edit:  ok now getting extra points when I increase the stroke width and set the stroke's align to inside or outside. It doesn't add extra points with center only on the other two options.

 

 

 

[m_bartholomew]

jdoli:

 

Thanks for the response. The steps I followed:

 

1. Open the file twitter_icon.afdesign
2. From the menu: File > Export...
3. Select SVG icon
4. Select preset SVG (for web)
5. Click export

 

Mike

[m_bartholomew]

What steps did you take up to exporting?

I used the twitter logo from Grade UI and export didn't add extra points.

 

edit:  ok now getting extra points when I increase the stroke width and set the stroke's align to inside or outside. It doesn't add extra points with center only on the other two options.

 

Capture.JPG

 

 

Interesting. In Illustrator, if the stroke align is center, then the stroke attribute is added to the <path> tag. If either of the two remaining stroke alignments are chosen, it outlines the stroke and uses a minimum of points for each path when exporting to SVG. I wonder if this behavior can be added to Designer. As of now, I will need to continue working in Adobe Illustrator for SVG pieces.  :(

[Jay D]

Looks like you found a new bug.

Before you export you can try Layers-> expand stroke. If not perfect and also adds extra points but not as bad as align inside/outside. Others have posted that expand stroke will be fixed soon.

[m_bartholomew]

That's great to hear! Thanks for your help!

[SSTC]

Was this ever fixed? I believe I'm having the same problem.

[GrinningShark]

Wondering about this also.  Cannot get clean SVG files for export to TinkerCAD (just imports the vector all chopped up) or Blender (imports better, but still has problems).  

[Friksel]

10 hours ago, GrinningShark said:

Wondering about this also.  Cannot get clean SVG files for export to TinkerCAD (just imports the vector all chopped up) or Blender (imports better, but still has problems).  

 

On 10/2/2018 at 11:13 PM, SSTC said:

Was this ever fixed? I believe I'm having the same problem.

No, this is still not fixed. The algorithm for converting to curves just isn't right in Designer and when exporting to svg with stroke set to inner or outer it automatically converts the strokes to curves. The latter is nececary, because software like browsers are not able to replicate inner and outer strokes, so Affinity needs to convert it to outlines.

So the cleanest way to output your graphic is to create the outlines yourself and fix the mistakes the Designer algorithm made, or set stroke to center.

[pieknyradek@gmail.com]

Same here. A bell logo created with just a few nodes was exported as 105KB!! file with thousands of nodes. I mean the app is great but I bought it only for small icon creation and now I cannot use it. Well for the time being I go back to coding nodes in html..:/

[Ptrpkr]

The reason this is not fixed might be that nobody reported it as a bug/feature request. The bug report forum can be found here: https://forum.affinity.serif.com/index.php?/forum/38-bugs-in-affinity-designer-affinity-photo/

[D’T4ils]

On 1/20/2017 at 1:15 PM, m_bartholomew said:

When exporting a vector image to SVG, Designer appears to add hundreds of points to a path that aren't there when editing, causing the exported file to balloon many times the size as one exported from illustrator.

 

For example, the Twitter logo contains 20 points on the path in Designer, but after exporting as a SVG it balloons to 1,554 points! Is there anyway to tell Designer to not add points, and to respect the original layout?

 

This is holding me back from dumping Adobe Illustrator completely, so any help would be greatly appreciated.

 

 

Thanks,

 

Mike

Have you reported this bug?

[Abinash Mohanty]

The SVG preset (for web) mentioned by @m_bartholomew  really worked. I've already tested this on chrome browser as well. 

[MichaelW]

I have recently dived into Affinity designer as a novice and have done some digging around this because an associate mentioned that they had looked and weren't happy with the SVG exports, thus staying with Illustrator.

I took a look and the file view shows that what seems to be happening is that the image is being rendered as base-64 and is then embedded in an SVG file.  That means that the package doesn't actually export SVG at this point for images originated in Designer... or at least that seems to the case?  It would be great if that feature could be added so I will add my comment to the bug report mentioned by @Ptrpkr.

Also, @Abinash Mohanty, I found that exporting using the Web preset did not render very well, so I fiddled around with the resolution, and although it makes a larger file, it delivered far better quality, which I suppose is obvious... :)

I understand that although the file size difference between SVG and PNG is not great, that SVG is preferred in a lot of web environments... anyway...

[Abinash Mohanty]

@MichaelW Yeah makes sense to me. :) 

[camball]

@MichaelW It took some digging, but I was able to recreate that exact condition you ran into (image being rendered as base 64 then embedded in an SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
  <use xlink:href="#_Image1" x="53.817" y="41.682" width="892.434px" height="916.667px" transform="matrix(0.999367,0,0,0.999636,0,0)"/>
  <defs>
    <image id="_Image1" width="893px" height="917px" xlink:href="data:image/png;base64,<...base64 data here...>"/>
  </defs>
</svg>

I was right about to give up and accept some sort of rasterised image when I noticed that the image didn't have a transparent background, which would've made it unusable for my use-case. I came across this answer in this thread in this forum, stating:

Quote

In Affinity the Erase blend mode causes rasterization. If you don't use it you get transparency, which is expected.

Sure enough, I was indeed using the erase blend mode, and removing it solved my issue entirely:

1. I could see my image was perfectly crystal clear when rendered at any size in my browser.
2. The SVG file used raw paths instead of embedding an image, which is what I needed:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:serif="http://www.serif.com/" width="100%" height="100%" viewBox="0 0 1000 1000" version="1.1" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
  <path d="M642.433,206.813l-284.866,-0c-0,..." style="fill:#00175a;"/>
  <!-- More path/ellipse/clippath/g tags... -->
</svg>