Jump to content
April

Unusually large SVG export

Recommended Posts

Hello!  I have two very similar files with little figurine people in them.  Neither one of them has a lot of complicated curves, they both have a few radial gradients, etc.

 

Alice exports to a 4.5KB SVG file, but Bob exports to a 360KB SVG file, and I cannot figure out why.  The Bob SVG file just has a zillion points in it, for no particular reason.  If anybody can help me figure out why the Bob file is exporting to something so huge, it would be a great relief.

 

Thanks so much!

alice.afdesign

bob.afdesign

alice.svg

bob.svg

Share this post


Link to post
Share on other sites

Hi April,

 

The reason that Bob produces such a big file is actually an odd one - and one that you shouldn't need to care about, so we'll fix in the future...

 

The short answer is: Make sure that all the lines are set to have 'round' or 'bevel' join styles. Do this by hitting Cmd+A then clicking round/bevel in the stroke panel.

 

The longer answer is less obvious... Basically, because we do everything live on the document, when you have a line and you have a thick stroke set on it and you move the nodes around you see how the corners change in realtime and this is the start of a problem that you won't find anywhere else... If you make a fat line and choose a Miter join type then as you move the nodes around and introduce corners you'll start to see the corner producing a point until you reach the miter limit, then it adds a bevel to the tip to stop it extending further: This isn't the default behaviour for a miter join in another program (or in the SVG standard), it is our own miter join logic. If we didn't do this you'd move the nodes around, start introducing a point then when you go past the miter limit it would suddenly spring back to a bevel join and it just looks a bit jarring visually. In other programs you only see the result when you finish the drag and let go, so you don't notice this springing around behaviour during the drag. As a result, we couldn't guarantee that your lines would look the same when exported to SVG if you had a miter join style set, so we expand the line into a polygon and output that instead so that your design looks as you expect. This is the cause of your large file size.

 

Alice doesn't contain miter joins on lines, Bob does - hence the problem :)

 

As I said, we'll look to fix this in the future and I'm sorry that you've experienced this inconvenience in the meantime...

 

Thanks,

Matt

Share this post


Link to post
Share on other sites

It's no problem, I'm just glad that you could figure out the problem.  Once I changed everything to using a 'round' join, it dropped down to a 5KB SVG and it looks visually the same.

 

Thanks for taking the time to fix the problem, and thanks for getting back to me so quickly.  I really appreciate it!

Share this post


Link to post
Share on other sites

Hi Matt,

I too have been struggling with large SVG files on export. I've seen where you provided similar advice elsewhere. However, I believe the problem has another facet beyond just the "join". I've noticed that stroke alignment makes a huge difference, at least with round corners. Basically, if a shape, e.g., rectangle, has a stroke and rounded corners and has either inside or outside stroke alignment, the resulting SVG code is at least 20x more complex. it seems to be the combination of both the rounded corner and the alignment. Of course I understand it is a more complex shape, but when center aligned with the same rounded corner, the difference is minimal.

 

Attached is a simple example and the resulting export. Please take a look and let me know what you think.

 

Thanks so much,

Jeff

 

 

svg example.afdesign

svg example.svg

Share this post


Link to post
Share on other sites

Same problem here. I've tried changing all of my mitre joins to rounded. I've turned all text into curves. I've aligned all strokes to center. I've reduced all of my grouped objects into single objects using the add command under the geometry menu. I've even deleted all layers that had FX. My file still exports at over 700 kb. Please help.

logo-title-curves-david-oliver-art.svg

Share this post


Link to post
Share on other sites

Hi! Unfortunately I had the same problem here. I did everything as recommended, but the difference in size between Affinity Designer and Illustrator is great! In low complexity images, it has little gain, approximately 2kbites (imagine a site with 30 SVG! It makes a lot of difference). In images with higher complexity, it reached a difference of 7/8 kbites.

What am I doing? I just open SVG in Illustrator and give a simple "save" and the size already reduces. But ... The Ideal would not have to open Illustrator.

But I would like to emphasize that PNG also needs to improve too. The difference between an exported PNG from Affinity and one another from Illustrator / Photoshop is great! For those who work with Web, it is crucial to have a website with the smallest images possible! This makes a difference in performance, charging time, bandwidth usage (smartphones / mobile) and fast charging. It is decisive in the customer experience, whether it stays on the site or leaves. It is very important that the software is efficient.

If I may give a suggestion ... What else increases the file size are the borders. You should have an option to convert the edges to curves. When I create the art, I use borders normally, but at the time of export, I have to remove and create curves with the same thickness and color.

No more... Congratulations! I love using Affinity and I only open Adobe programs to reduce the size of my files and nothing else!

Share this post


Link to post
Share on other sites
On 3/7/2018 at 8:19 PM, Traveler said:

Same problem here. I've tried changing all of my mitre joins to rounded. I've turned all text into curves. I've aligned all strokes to center. I've reduced all of my grouped objects into single objects using the add command under the geometry menu. I've even deleted all layers that had FX. My file still exports at over 700 kb. Please help.

logo-title-curves-david-oliver-art.svg

Hi Traveler! I just opened your logo on Affinity ... And it has 2 basic problems ...
The first, that has an image inside. The second is that has "millions" of points! The amount of points, the higher the number of points, increase the file size. I suggest you rewrite "David Oliver Art" and then turn into curves. Use the "Smooth Curves" tool that helps you decrease the amount of points.

Share this post


Link to post
Share on other sites

Hi! One more thing about SVGs. I bothered to open in my HTML editor to compare the differences between an SVG generated by Affinity and Illustrator. The reason the Illsutrator file is smaller is very clear. In Affinity, with each object created, all properties are rewritten. Example: style = "fill: # 231f20

In Illustrator, it creates a style inline where you create classes and only reuse this class in the elements. Example:
.st27 {
            clip-path: url (# SVGID_2_);
            fill: # 231F20;
        }

The Affinty path looks like this:

<path d = "M86.883,87.755c0.374,0,076 0.72,0.226 1,077,0351l0.044,0164c-0.418,0.219 -0.93, -0.115 -1.195, -0.405l0.074, -0.11" style = "fill: # 231f20; fill-rule: nonzero;" />

While in Illustrator:

<path class = "st27" d = "M116,117c0.5,0.1,1,0,3,1,4,0.5l0.1,0.2c-0.6,0.3-1.2-0.2-1.6-0.5L116,117" />

I think if it were possible to have an algorithm to "round" numbers would also be useful. Type ... Transform d = "M86.883,87 into d =" M87

I think that makes a difference. Hope this helps.

Share this post


Link to post
Share on other sites

Another day of weird behaviour, I exported a circle around a euro symbol. With a quick optimisation I ended up with the following code:
 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" stroke-linejoin="round">

<path d="M6.077 0l0.077 0.002 0.077 0.002 0.077 0.004 0.076 0.004 0.076 0.005 0.076 0.007 0.076 0.007 0.075 0.008 0.076 0.009 0.075 0.01 0.074 0.011 0.075 0.012 0.074 0.013 0.073 0.013 0.074 0.015 0.073 0.015 0.073 0.017 0.072 0.017 0.072 0.018 0.072 0.019 0.072 0.02 0.071 0.021 0.07 0.021 0.071 0.023 0.07 0.023 0.069 0.024 0.07 0.025 0.068 0.025 0.072 0.028 0.132 0.054 0.134 0.059 0.132 0.062 0.131 0.064 0.128 0.068 0.127 0.071 0.124 0.074 0.123 0.076 0.121 0.08 0.118 0.082 0.117 0.085 0.114 0.088 0.112 0.09 0.11 0.093 0.108 0.095 0.105 0.098 0.103 0.101 0.101 0.103 0.098 0.105 0.095 0.108 0.093 0.11 0.09 0.112 0.088 0.114 0.085 0.117 0.082 0.118 0.08 0.121 0.076 0.123 0.074 0.124 0.071 0.127 0.068 0.128 0.064 0.131 0.062 0.132 0.059 0.134 0.054 0.132 0.028 0.072 0.025 0.068 0.025 0.07 0.024 0.069 0.023 0.07 0.023 0.071 0.021 0.07 0.021 0.071 0.02 0.072 0.019 0.072 0.018 0.072 0.017 0.072 0.017 0.073 0.015 0.073 0.015 0.074 0.013 0.073 0.013 0.074 0.012 0.075 0.011 0.074 0.01 0.075 0.009 0.076 0.008 0.075 0.007 0.076 0.007 0.076 0.005 0.076 0.004 0.076 0.004 0.077 0.002 0.077 0.002 0.077 0 0.077 0 0.077 -0.002 0.077 -0.002 0.077 -0.004 0.077 -0.004 0.076 -0.005 0.076 -0.007 0.076 -0.007 0.076 -0.008 0.075 -0.009 0.076 -0.01 0.075 -0.011 0.074 -0.012 0.075 -0.013 0.074 -0.013 0.073 -0.015 0.074 -0.015 0.073 -0.017 0.073 -0.017 0.072 -0.018 0.072 -0.019 0.072 -0.02 0.072 -0.021 0.071 -0.021 0.07 -0.023 0.071 -0.023 0.07 -0.024 0.069 -0.025 0.07 -0.025 0.068 -0.028 0.072 -0.054 0.132 -0.059 0.134 -0.062 0.132 -0.064 0.131 -0.068 0.128 -0.071 0.127 -0.074 0.124 -0.076 0.123 -0.08 0.121 -0.082 0.118 -0.085 0.117 -0.088 0.114 -0.09 0.112 -0.093 0.11 -0.095 0.108 -0.098 0.105 -0.101 0.103 -0.103 0.101 -0.105 0.098 -0.108 0.095 -0.11 0.093 -0.112 0.09 -0.114 0.088 -0.117 0.085 -0.118 0.082 -0.121 0.08 -0.123 0.076 -0.124 0.074 -0.127 0.071 -0.128 0.068 -0.131 0.064 -0.132 0.062 -0.134 0.059 -0.132 0.054 -0.072 0.028 -0.068 0.025 -0.07 0.025 -0.069 0.024 -0.07 0.023 -0.071 0.023 -0.07 0.021 -0.071 0.021 -0.072 0.02 -0.072 0.019 -0.072 0.018 -0.072 0.017 -0.073 0.017 -0.073 0.015 -0.074 0.015 -0.073 0.013 -0.074 0.013 -0.075 0.012 -0.074 0.011 -0.075 0.01 -0.076 0.009 -0.075 0.008 -0.076 0.007 -0.076 0.007 -0.076 0.005 -0.076 0.004 -0.077 0.004 -0.077 0.002 -0.077 0.002 -0.077 0 -0.077 0 -0.077-0.002 -0.077-0.002 -0.077-0.004 -0.076-0.004 -0.076-0.005 -0.076-0.007 -0.076-0.007 -0.075-0.008 -0.076-0.009 -0.075-0.01 -0.074-0.011 -0.075-0.012 -0.074-0.013 -0.073-0.013 -0.074-0.015 -0.073-0.015 -0.073-0.017 -0.072-0.017 -0.072-0.018 -0.072-0.019 -0.072-0.02 -0.071-0.021 -0.07-0.021 -0.071-0.023 -0.07-0.023 -0.069-0.024 -0.07-0.025 -0.068-0.025 -0.072-0.028 -0.132-0.054 -0.134-0.059 -0.132-0.062 -0.131-0.064 -0.128-0.068 -0.127-0.071 -0.124-0.074 -0.123-0.076 -0.121-0.08 -0.118-0.082 -0.117-0.085 -0.114-0.088 -0.112-0.09 -0.11-0.093 -0.108-0.095 -0.105-0.098 -0.103-0.101 -0.101-0.103 -0.098-0.105 -0.095-0.108 -0.093-0.11 -0.09-0.112 -0.088-0.114 -0.085-0.117 -0.082-0.118 -0.08-0.121 -0.076-0.123 -0.074-0.124 -0.071-0.127 -0.068-0.128 -0.064-0.131 -0.062-0.132 -0.059-0.134 -0.054-0.132 -0.028-0.072 -0.025-0.068 -0.025-0.07 -0.024-0.069 -0.023-0.07 -0.023-0.071 -0.021-0.07 -0.021-0.071 -0.02-0.072 -0.019-0.072 -0.018-0.072 -0.017-0.072 -0.017-0.073 -0.015-0.073 -0.015-0.074 -0.013-0.073 -0.013-0.074 -0.012-0.075 -0.011-0.074 -0.01-0.075 -0.009-0.076 -0.008-0.075 -0.007-0.076 -0.007-0.076 -0.005-0.076 -0.004-0.076 -0.004-0.077 -0.002-0.077 -0.002-0.077 0-0.077 0-0.077 0.002-0.077 0.002-0.077 0.004-0.077 0.004-0.076 0.005-0.076 0.007-0.076 0.007-0.076 0.008-0.075 0.009-0.076 0.01-0.075 0.011-0.074 0.012-0.075 0.013-0.074 0.013-0.073 0.015-0.074 0.015-0.073 0.017-0.073 0.017-0.072 0.018-0.072 0.019-0.072 0.02-0.072 0.021-0.071 0.021-0.07 0.023-0.071 0.023-0.07 0.024-0.069 0.025-0.07 0.025-0.068 0.028-0.072 0.054-0.132 0.059-0.134 0.062-0.132 0.064-0.131 0.068-0.128 0.071-0.127 0.074-0.124 0.076-0.123 0.08-0.121 0.082-0.118 0.085-0.117 0.088-0.114 0.09-0.112 0.093-0.11 0.095-0.108 0.098-0.105 0.101-0.103 0.103-0.101 0.105-0.098 0.108-0.095 0.11-0.093 0.112-0.09 0.114-0.088 0.117-0.085 0.118-0.082 0.121-0.08 0.123-0.076 0.124-0.074 0.127-0.071 0.128-0.068 0.131-0.064 0.132-0.062 0.134-0.059 0.132-0.054 0.072-0.028 0.068-0.025 0.07-0.025 0.069-0.024 0.07-0.023 0.071-0.023 0.07-0.021 0.071-0.021 0.072-0.02 0.072-0.019 0.072-0.018 0.072-0.017 0.073-0.017 0.073-0.015 0.074-0.015 0.073-0.013 0.074-0.013 0.075-0.012 0.074-0.011 0.075-0.01 0.076-0.009 0.075-0.008 0.076-0.007 0.076-0.007 0.076-0.005 0.076-0.004 0.077-0.004 0.077-0.002 0.077-0.002 0.077 0 0.077 0Zm-0.142 1l-0.064 0.002 -0.064 0.002 -0.064 0.003 -0.064 0.003 -0.063 0.005 -0.064 0.005 -0.063 0.006 -0.063 0.007 -0.062 0.007 -0.063 0.009 -0.062 0.009 -0.062 0.01 -0.062 0.01 -0.061 0.012 -0.061 0.012 -0.061 0.013 -0.061 0.013 -0.06 0.014 -0.06 0.016 -0.06 0.015 -0.059 0.017 -0.059 0.017 -0.059 0.018 -0.059 0.019 -0.058 0.019 -0.058 0.02 -0.057 0.021 -0.058 0.021 -0.057 0.022 -0.112 0.046 -0.112 0.049 -0.11 0.051 -0.108 0.054 -0.107 0.057 -0.106 0.059 -0.104 0.061 -0.102 0.064 -0.101 0.066 -0.099 0.069 -0.097 0.071 -0.095 0.073 -0.094 0.075 -0.091 0.078 -0.09 0.08 -0.088 0.081 -0.086 0.084 -0.084 0.086 -0.081 0.088 -0.08 0.09 -0.078 0.091 -0.075 0.094 -0.073 0.095 -0.071 0.097 -0.069 0.099 -0.066 0.101 -0.064 0.102 -0.061 0.104 -0.059 0.106 -0.057 0.107 -0.054 0.108 -0.051 0.11 -0.049 0.112 -0.046 0.112 -0.022 0.057 -0.021 0.058 -0.021 0.057 -0.02 0.058 -0.019 0.058 -0.019 0.059 -0.018 0.059 -0.017 0.059 -0.017 0.059 -0.015 0.06 -0.016 0.06 -0.014 0.06 -0.013 0.061 -0.013 0.061 -0.012 0.061 -0.012 0.061 -0.01 0.062 -0.01 0.062 -0.009 0.062 -0.009 0.063 -0.007 0.062 -0.007 0.063 -0.006 0.063 -0.005 0.064 -0.005 0.063 -0.003 0.064 -0.003 0.064 -0.002 0.064 -0.002 0.064 0 0.065 0 0.065 0.002 0.064 0.002 0.064 0.003 0.064 0.003 0.064 0.005 0.063 0.005 0.064 0.006 0.063 0.007 0.063 0.007 0.062 0.009 0.063 0.009 0.062 0.01 0.062 0.01 0.062 0.012 0.061 0.012 0.061 0.013 0.061 0.013 0.061 0.014 0.06 0.016 0.06 0.015 0.06 0.017 0.059 0.017 0.059 0.018 0.059 0.019 0.059 0.019 0.058 0.02 0.058 0.021 0.057 0.021 0.058 0.022 0.057 0.046 0.112 0.049 0.112 0.051 0.11 0.054 0.108 0.057 0.107 0.059 0.106 0.061 0.104 0.064 0.102 0.066 0.101 0.069 0.099 0.071 0.097 0.073 0.095 0.075 0.094 0.078 0.091 0.08 0.09 0.081 0.088 0.084 0.086 0.086 0.084 0.088 0.081 0.09 0.08 0.091 0.078 0.094 0.075 0.095 0.073 0.097 0.071 0.099 0.069 0.101 0.066 0.102 0.064 0.104 0.061 0.106 0.059 0.107 0.057 0.108 0.054 0.11 0.051 0.112 0.049 0.112 0.046 0.057 0.022 0.058 0.021 0.057 0.021 0.058 0.02 0.058 0.019 0.059 0.019 0.059 0.018 0.059 0.017 0.059 0.017 0.06 0.015 0.06 0.016 0.06 0.014 0.061 0.013 0.061 0.013 0.061 0.012 0.061 0.012 0.062 0.01 0.062 0.01 0.062 0.009 0.063 0.009 0.062 0.007 0.063 0.007 0.063 0.006 0.064 0.005 0.063 0.005 0.064 0.003 0.064 0.003 0.064 0.002 0.064 0.002 0.065 0 0.065 0 0.064-0.002 0.064-0.002 0.064-0.003 0.064-0.003 0.063-0.005 0.064-0.005 0.063-0.006 0.063-0.007 0.062-0.007 0.063-0.009 0.062-0.009 0.062-0.01 0.062-0.01 0.061-0.012 0.061-0.012 0.061-0.013 0.061-0.013 0.06-0.014 0.06-0.016 0.06-0.015 0.059-0.017 0.059-0.017 0.059-0.018 0.059-0.019 0.058-0.019 0.058-0.02 0.057-0.021 0.058-0.021 0.057-0.022 0.112-0.046 0.112-0.049 0.11-0.051 0.108-0.054 0.107-0.057 0.106-0.059 0.104-0.061 0.102-0.064 0.101-0.066 0.099-0.069 0.097-0.071 0.095-0.073 0.094-0.075 0.091-0.078 0.09-0.08 0.088-0.081 0.086-0.084 0.084-0.086 0.081-0.088 0.08-0.09 0.078-0.091 0.075-0.094 0.073-0.095 0.071-0.097 0.069-0.099 0.066-0.101 0.064-0.102 0.061-0.104 0.059-0.106 0.057-0.107 0.054-0.108 0.051-0.11 0.049-0.112 0.046-0.112 0.022-0.057 0.021-0.058 0.021-0.057 0.02-0.058 0.019-0.058 0.019-0.059 0.018-0.059 0.017-0.059 0.017-0.059 0.015-0.06 0.016-0.06 0.014-0.06 0.013-0.061 0.013-0.061 0.012-0.061 0.012-0.061 0.01-0.062 0.01-0.062 0.009-0.062 0.009-0.063 0.007-0.062 0.007-0.063 0.006-0.063 0.005-0.064 0.005-0.063 0.003-0.064 0.003-0.064 0.002-0.064 0.002-0.064 0-0.065 0-0.065 -0.002-0.064 -0.002-0.064 -0.003-0.064 -0.003-0.064 -0.005-0.063 -0.005-0.064 -0.006-0.063 -0.007-0.063 -0.007-0.062 -0.009-0.063 -0.009-0.062 -0.01-0.062 -0.01-0.062 -0.012-0.061 -0.012-0.061 -0.013-0.061 -0.013-0.061 -0.014-0.06 -0.016-0.06 -0.015-0.06 -0.017-0.059 -0.017-0.059 -0.018-0.059 -0.019-0.059 -0.019-0.058 -0.02-0.058 -0.021-0.057 -0.021-0.058 -0.022-0.057 -0.046-0.112 -0.049-0.112 -0.051-0.11 -0.054-0.108 -0.057-0.107 -0.059-0.106 -0.061-0.104 -0.064-0.102 -0.066-0.101 -0.069-0.099 -0.071-0.097 -0.073-0.095 -0.075-0.094 -0.078-0.091 -0.08-0.09 -0.081-0.088 -0.084-0.086 -0.086-0.084 -0.088-0.081 -0.09-0.08 -0.091-0.078 -0.094-0.075 -0.095-0.073 -0.097-0.071 -0.099-0.069 -0.101-0.066 -0.102-0.064 -0.104-0.061 -0.106-0.059 -0.107-0.057 -0.108-0.054 -0.11-0.051 -0.112-0.049 -0.112-0.046 -0.057-0.022 -0.058-0.021 -0.057-0.021 -0.058-0.02 -0.058-0.019 -0.059-0.019 -0.059-0.018 -0.059-0.017 -0.059-0.017 -0.06-0.015 -0.06-0.016 -0.06-0.014 -0.061-0.013 -0.061-0.013 -0.061-0.012 -0.061-0.012 -0.062-0.01 -0.062-0.01 -0.062-0.009 -0.063-0.009 -0.062-0.007 -0.063-0.007 -0.063-0.006 -0.064-0.005 -0.063-0.005 -0.064-0.003 -0.064-0.003 -0.064-0.002 -0.064-0.002 -0.065 0 -0.065 0Z"/>

<path d="M6.494 3.109c-0.547 0-1.006 0.132-1.377 0.396 -0.221 0.156-0.421 0.377-0.6 0.664 -0.183 0.296-0.29 0.578-0.323 0.845l3.33 0 -0.131 0.654 -3.277 0c-0.003 0.068-0.005 0.133-0.005 0.195 0 0.251 0.002 0.401 0.005 0.449l3.145 0 -0.137 0.655 -2.905 0c0.136 0.745 0.465 1.274 0.986 1.587 0.374 0.224 0.78 0.337 1.216 0.337 0.609 0 1.084-0.16 1.426-0.479l0 1.006c-0.407 0.189-0.856 0.283-1.348 0.283 -1.471 0-2.466-0.612-2.983-1.836 -0.105-0.247-0.194-0.547-0.269-0.898l-0.747 0 0.137-0.655 0.512 0c-0.009-0.136-0.014-0.284-0.014-0.444 0-0.065 0.001-0.132 0.005-0.2l-0.64 0 0.137-0.654 0.566 0c0.202-1.062 0.728-1.823 1.577-2.285 0.524-0.287 1.102-0.43 1.734-0.43 0.605 0 1.115 0.132 1.528 0.395l-0.195 0.909c-0.397-0.329-0.848-0.494-1.353-0.494Z"/>

</svg>

I thought this is silly, so much code for a simple circle so I coded it manually and replaced the last block:

<circle cx="6" cy="6" r="5.5" style="stroke-width:1; fill:none"/>

It turns out that the small block is the complete euro symbol whereas the huge one is the circle.

Since AD does know it is a circle, why not create a circle element with a stroke-width or a path with 8 points if for a reason you can't rely on the stroke-width ?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | 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.