April

Unusually large SVG export

4 posts in this topic

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

April likes this

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!

MattP likes this

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

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