Fix SVG Export

[Macoun]

The SVG Export is very overloaded, overcrowded, ...extremly suboptimal. 

 

I'll give you an easy sample:

Take the Union Jack from the Wikipedia. It has 522 Bytes.

 

That's the code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600">
<clipPath id="t">
	<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
</clipPath>
<path d="M0,0 v30 h60 v-30 z" fill="#00247d"/>
<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#cf142b" stroke-width="4"/>
<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
<path d="M30,0 v30 M0,15 h60" stroke="#cf142b" stroke-width="6"/>
</svg>

Open it with Affinity Designer. Export it as SVG. It becomes 1528 Bytes. That nearly 3 times more. And the SVG code is just messy.

 

 

Another sample:

Take the Stars and Stripes from the Wikipedia. It has 899 Bytes

 

This is the code

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650" viewBox="0 0 7410 3900">
<rect width="7410" height="3900" fill="#b22234"/>
<path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="#fff" stroke-width="300"/>
<rect width="2964" height="2100" fill="#3c3b6e"/>
<g fill="#fff">
<g id="s18">
<g id="s9">
<g id="s5">
<g id="s4">
<path id="s" d="M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z"/>
<use xlink:href="#s" y="420"/>
<use xlink:href="#s" y="840"/>
<use xlink:href="#s" y="1260"/>
</g>
<use xlink:href="#s" y="1680"/>
</g>
<use xlink:href="#s4" x="247" y="210"/>
</g>
<use xlink:href="#s9" x="494"/>
</g>
<use xlink:href="#s18" x="988"/>
<use xlink:href="#s9" x="1976"/>
<use xlink:href="#s5" x="2470"/>
</g>
</svg>

Open the SVG with Affinity Designer and export it as SVG. It becomes 13.925 Bytes! 

That 15 times more!! That caught my breath. 

 

Let's try something more complex: the flag of Portugal. (13.160 Bytes)

And export it... Result: 53.139 Bytes !!!

 

The files get fat and unreadable. That's totally unacceptable. 

And that were just simple samples. 

[MattP]

The export code could definitely do with a refresh to make more optimal output... but that's not to say I completely see the comments above as a fair test... Our export is designed to be able to represent any structure correctly - without focusing on file size as the most important aspect. If we knew the desire was to create a minimal file, we'd rename objects to single characters (as per the example) attempt to reuse paths more heavily, condense colours (even specifying a default and omitting colours completely from descriptions). There are definitely more optimal ways to represent files, I completely agree. When we omit elements from the SVG or rename/rearrange them people get upset because they were using them in scripting, when we include all the elements with correct structure and tags we get pulled up for creating bloat... We haven't set out to make the smallest SVG files ever as our first stab, we've tried to produce files which are usable for general purposes. If you need to condense an SVG to its minimal representation there are many (free) online tools that do a fantastic job of this already. We will definitely expand on this in the future though, so your comments are obviously appreciated and we will work to improve, but saying that these were just 'simple samples' is slightly unfair as these are actually really quite nicely structured optimal samples that a general purpose exporter designed for outputting illustrations to share between applications might not know how to easily optimise away :)

 

Edited to add: To put this in some context, I just tried the test files in Sketch and it generated a Union Jack file at 1497 bytes (vs. 1391 bytes in my development version) and the US Flag became 17,078 bytes (vs. our 8,526 bytes in my development version - and it should be noted that the Union Jack looks wrong from Sketch too)  Things were much worse in the current version of Illustrator which failed to successfully open either SVG file without visual errors - and exporting both of them resulted in files of similar sizes to Affinity. Graphic performed better as it was actually able to open the files successfully but it still produced output of similar size to Affinity. I also tried the Portugal flag - all applications opened and exported it successfully, this time Illustrator was the winner at 21,987 bytes, then us at 48,213 bytes, then Sketch at 53,634 bytes then Graphic at 83,442 bytes - and it's worth noting that all of them have similarly unreadable export in this case. It's not like we're terribly broken or anything, but I do acknowledge that we can and should do better to cater for people who desire minimal file sizes

 

Thanks,

Matt

[saivan]

I also think this is a good point, optimality isn't a huge issue I'd say; i'd much rather be able to read the resulting svg code than to produce single character names than shave a few bytes off of my file size.

[Macoun]

Hello Matt.

 

I took flags as test objects, because the most of them use a low number of plain, simple and basic geometric structures. No floats, just integers. Without filters! No bells and whistles! It's a simple test condition. The Union Jack was a salute to you guys.

 

Keeping the names is good and important. Because if you have to work/manipulate a SVG via Javascript, a good structure and readability is essential. But... the exported result is that kind of bloated, that it is unusable. - I've append the result at the end of that post. To show you what you really get.

 

And when you say, you didn't focus on the file size, i have to remind you: SVG is a vector graphics format for the Web. To be loaded and displayed in a browser. Maybe over a 3G or just GPRS connection. - So file size is a very very important point.

 

At last: I don't use Illustrator. I never did. But if you want to compare SVG results maybe try WebCode for example. The result is not so bad. Smaller, readable and well structured. 

 

 

• Flag of the U.K. (Original SVG)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 30" width="1200" height="600">
<clipPath id="t">
	<path d="M30,15 h30 v15 z v15 h-30 z h-30 v-15 z v-15 h30 z"/>
</clipPath>
<path d="M0,0 v30 h60 v-30 z" fill="#00247d"/>
<path d="M0,0 L60,30 M60,0 L0,30" stroke="#fff" stroke-width="6"/>
<path d="M0,0 L60,30 M60,0 L0,30" clip-path="url(#t)" stroke="#cf142b" stroke-width="4"/>
<path d="M30,0 v30 M0,15 h60" stroke="#fff" stroke-width="10"/>
<path d="M30,0 v30 M0,15 h60" stroke="#cf142b" stroke-width="6"/>
</svg>

• Flag of the U.K. (Exported SVG by Affinity Designer)

<svg width="100%" height="100%" viewBox="0 0 60 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect x="0" y="0" width="60" height="30" style="fill:#00247d;fill-rule:nonzero;"/><g><path d="M0,0l60,30M60,0l-60,30" style="fill:#000;fill-rule:nonzero;"/><path d="M61.342,2.683l-24.634,12.317l24.634,12.317l-2.684,5.366l-28.658,-14.329l-28.658,14.329l-2.684,-5.366l24.634,-12.317l-24.634,-12.317l2.684,-5.366l28.658,14.329l28.658,-14.329l2.684,5.366Z" style="fill:#fff;"/></g><clipPath id="_clip1"><path d="M30,15l30,0l0,15l-30,-15Z"/></clipPath><g clip-path="url(#_clip1)"><path d="M0,0l60,30M60,0l-60,30" style="fill:#000;fill-rule:nonzero;"/><path d="M60.894,1.789l-26.422,13.211l26.422,13.211l-1.788,3.578l-29.106,-14.553l-29.106,14.553l-1.788,-3.578l26.422,-13.211l-26.422,-13.211l1.788,-3.578l29.106,14.553l29.106,-14.553l1.788,3.578Z" style="fill:#cf142b;"/></g><g><path d="M30,0l0,30M0,15l60,0" style="fill:#000;fill-rule:nonzero;"/><path d="M35,10l25,0l0,10l-25,0l0,10l-10,0l0,-10l-25,0l0,-10l25,0l0,-10l10,0l0,10Z" style="fill:#fff;"/></g><g><path d="M30,0l0,30M0,15l60,0" style="fill:#000;fill-rule:nonzero;"/><path d="M33,12l27,0l0,6l-27,0l0,12l-6,0l0,-12l-27,0l0,-6l27,0l0,-12l6,0l0,12Z" style="fill:#cf142b;"/></g></svg>

[MattP]

 

[...]

Keeping the names is good and important. Because if you have work/manipulate a SVG via Javascript, a good structure and readability is essential. But... the exported result is that kind of bloated that it is unusable. - I've append the result at the end of that post.

[...]

 

As I said, I do agree and we will try to do better. But as I also said, the output we generate is extremely similar to that generated by our competitors and is in most cases actually smaller than theirs, so I was just trying to point out that we aren't terribly broken or anything :)

[Macoun]

Ah, Okay. :) 

 

Yes, that's one of the reasons, why the results from those competitors are sometimes useless for coders. And many designers don't understand that. 

 

As you said it's a kind of "unfair" I wanted to show you, a simpler example (with a real live reference) is hard to find. Just drawing a rect, is not a benchmark and nobody would need a vector drawing tool for that. :D

 

 

P.S.: It would be fine, to have an optional checkbox matrix for final optimizations (like reducing floating point precision, remove whitespace and line feeds, convert rgb colors to hex, etc.). - When you are working on it, readability is king. But when you release it, every byte counts.

[Dave Harris]

P.S.: It would be fine, to have an optional checkbox matrix for final optimizations (like reducing floating point precision, remove whitespace and line feeds, convert rgb colors to hex, etc.). - When you are working on it, readability is king. But when you release it, every byte counts.

Ah, Okay.

 

We have two of those three already. File > Export > SVG > More > Add line breaks and Use hex colours. The option to control decimal places has been mentioned before, and will be easy to add when one of us gets time. The harder optimisations are noticing when different objects have similar formats or paths, and coalescing them. The Stars and Stripes, for example, draws a star once and then duplicates it many times. That makes it very compact. I think the best way to support that will involve using Symbols to preserve the original structure, rather than trying to recreate it.

[Macoun]

Hello Dave.

 

Imagine i'm speaking with the voice of HAL 9000. ;-)

 

We have two of those three already. File > Export > SVG > More > Add line breaks and Use hex colours.

 

Thank you, Dave.

 

The option to control decimal places has been mentioned before, and will be easy to add when one of us gets time.

 

This would be helpful.

 

The harder optimisations are noticing when different objects have similar formats or paths, and coalescing them. The Stars and Stripes, for example, draws a star once and then duplicates it many times. That makes it very compact. I think the best way to support that will involve using Symbols to preserve the original structure, rather than trying to recreate it.

 

This would be really great.

 

 

But if have to go back one step to the "drawing a rect is not a benchmark" comment. There seems to be a more fundamental problem.

 

So looking just at the drawing code.

When you have a simple rounded rect with a border, like this SVG Object (sample file {hopefully} appended):

<rect id="Rect2" stroke="#004488" stroke-width="4" fill="#00AAFF" x="2" y="2" width="120" height="40" rx="8" />

When you import it into AfDesigner (v. 1.4.1) everything looks fine. All Parameter are correct.

But change the fill color to whatever you want. When you export this single basic object, it will be transformed into a incredible complex paths construction.

 

Result:

<path d="M123.464,11.464c0,-4.415 -3.585,-8 -8,-8l-104,0c-4.415,0 -8,3.585 -8,8l0,24c0,4.415 3.585,8 8,8l104,0c4.415,0 8,-3.585 8,-8l0,-24Z" style="fill:#0af;"/><path d="M115.593,1.465l0.128,0.002l0.128,0.004l0.128,0.006l0.127,0.007l0.127,0.009l0.127,0.011l0.126,0.012l0.126,0.013l0.125,0.015l0.125,0.017l0.124,0.018l0.124,0.02l0.124,0.021l0.122,0.023l0.123,0.024l0.122,0.026l0.121,0.027l0.121,0.029l0.12,0.03l0.12,0.032l0.119,0.033l0.119,0.034l0.117,0.036l0.118,0.038l0.116,0.038l0.116,0.04l0.116,0.042l0.114,0.043l0.114,0.044l0.114,0.045l0.112,0.047l0.112,0.049l0.112,0.049l0.11,0.051l0.11,0.052l0.109,0.053l0.108,0.055l0.107,0.056l0.107,0.057l0.106,0.058l0.105,0.06l0.105,0.061l0.103,0.062l0.103,0.063l0.101,0.065l0.101,0.065l0.101,0.067l0.099,0.068l0.098,0.069l0.098,0.07l0.096,0.072l0.096,0.072l0.095,0.074l0.094,0.075l0.093,0.075l0.092,0.077l0.091,0.078l0.09,0.079l0.089,0.08l0.088,0.081l0.088,0.083l0.086,0.083l0.085,0.084l0.084,0.085l0.083,0.087l0.083,0.087l0.081,0.088l0.08,0.089l0.079,0.09l0.078,0.091l0.077,0.092l0.076,0.093l0.074,0.094l0.074,0.095l0.072,0.096l0.072,0.096l0.07,0.098l0.069,0.098l0.068,0.1l0.067,0.1l0.066,0.101l0.064,0.102l0.063,0.102l0.062,0.104l0.061,0.104l0.06,0.105l0.058,0.106l0.057,0.107l0.056,0.107l0.055,0.108l0.053,0.109l0.052,0.11l0.051,0.111l0.05,0.111l0.048,0.112l0.047,0.112l0.045,0.114l0.044,0.114l0.043,0.114l0.042,0.116l0.04,0.116l0.039,0.116l0.037,0.118l0.036,0.118l0.034,0.118l0.033,0.119l0.032,0.12l0.03,0.12l0.029,0.121l0.027,0.121l0.026,0.122l0.024,0.123l0.023,0.123l0.021,0.123l0.02,0.124l0.018,0.124l0.017,0.125l0.015,0.126l0.014,0.125l0.012,0.126l0.01,0.127l0.009,0.127l0.007,0.127l0.006,0.128l0.004,0.128l0.002,0.128l0.001,0.123l0,24.012l-0.001,0.123l-0.002,0.128l-0.004,0.128l-0.006,0.128l-0.007,0.127l-0.009,0.127l-0.01,0.127l-0.012,0.126l-0.014,0.126l-0.015,0.125l-0.017,0.125l-0.018,0.124l-0.02,0.124l-0.021,0.124l-0.023,0.122l-0.024,0.123l-0.026,0.122l-0.027,0.121l-0.029,0.121l-0.03,0.12l-0.032,0.12l-0.033,0.119l-0.034,0.119l-0.036,0.117l-0.037,0.118l-0.039,0.116l-0.04,0.116l-0.042,0.116l-0.043,0.114l-0.044,0.114l-0.045,0.114l-0.047,0.112l-0.048,0.112l-0.05,0.112l-0.051,0.11l-0.052,0.11l-0.053,0.109l-0.055,0.108l-0.056,0.107l-0.057,0.107l-0.058,0.106l-0.06,0.105l-0.061,0.104l-0.062,0.104l-0.063,0.103l-0.064,0.101l-0.066,0.101l-0.067,0.101l-0.068,0.099l-0.069,0.098l-0.07,0.098l-0.072,0.096l-0.072,0.096l-0.074,0.095l-0.074,0.094l-0.076,0.093l-0.077,0.092l-0.078,0.091l-0.079,0.09l-0.08,0.089l-0.081,0.088l-0.083,0.088l-0.083,0.086l-0.084,0.085l-0.085,0.084l-0.086,0.084l-0.088,0.082l-0.088,0.081l-0.089,0.08l-0.09,0.079l-0.091,0.078l-0.092,0.077l-0.093,0.076l-0.094,0.074l-0.095,0.074l-0.096,0.072l-0.096,0.072l-0.098,0.07l-0.098,0.069l-0.099,0.068l-0.101,0.067l-0.101,0.066l-0.101,0.064l-0.103,0.063l-0.103,0.062l-0.105,0.061l-0.105,0.06l-0.106,0.058l-0.107,0.057l-0.107,0.056l-0.108,0.055l-0.109,0.053l-0.11,0.052l-0.11,0.051l-0.112,0.05l-0.112,0.048l-0.112,0.047l-0.114,0.045l-0.114,0.044l-0.114,0.043l-0.116,0.042l-0.116,0.04l-0.116,0.039l-0.118,0.037l-0.117,0.036l-0.119,0.034l-0.119,0.033l-0.12,0.032l-0.12,0.03l-0.121,0.029l-0.121,0.027l-0.122,0.026l-0.123,0.024l-0.122,0.023l-0.124,0.021l-0.124,0.02l-0.124,0.018l-0.125,0.017l-0.125,0.015l-0.126,0.014l-0.126,0.012l-0.127,0.01l-0.127,0.009l-0.127,0.007l-0.128,0.006l-0.128,0.004l-0.128,0.002l-0.123,0.001l-104.012,0l-0.123,-0.001l-0.128,-0.002l-0.128,-0.004l-0.128,-0.006l-0.127,-0.007l-0.127,-0.009l-0.127,-0.01l-0.126,-0.012l-0.125,-0.014l-0.126,-0.015l-0.125,-0.017l-0.124,-0.018l-0.124,-0.02l-0.123,-0.021l-0.123,-0.023l-0.123,-0.024l-0.122,-0.026l-0.121,-0.027l-0.121,-0.029l-0.12,-0.03l-0.12,-0.032l-0.119,-0.033l-0.118,-0.034l-0.118,-0.036l-0.118,-0.037l-0.116,-0.039l-0.116,-0.04l-0.116,-0.042l-0.114,-0.043l-0.114,-0.044l-0.114,-0.045l-0.112,-0.047l-0.112,-0.048l-0.111,-0.05l-0.111,-0.051l-0.11,-0.052l-0.109,-0.053l-0.108,-0.055l-0.107,-0.056l-0.107,-0.057l-0.106,-0.058l-0.105,-0.06l-0.104,-0.061l-0.104,-0.062l-0.102,-0.063l-0.102,-0.064l-0.101,-0.066l-0.1,-0.067l-0.1,-0.068l-0.098,-0.069l-0.098,-0.07l-0.096,-0.072l-0.096,-0.072l-0.095,-0.074l-0.094,-0.074l-0.093,-0.076l-0.092,-0.077l-0.091,-0.078l-0.09,-0.079l-0.089,-0.08l-0.088,-0.081l-0.087,-0.082l-0.087,-0.084l-0.085,-0.084l-0.084,-0.085l-0.083,-0.086l-0.082,-0.088l-0.082,-0.088l-0.08,-0.089l-0.079,-0.09l-0.078,-0.091l-0.077,-0.092l-0.075,-0.093l-0.075,-0.094l-0.074,-0.095l-0.072,-0.096l-0.072,-0.096l-0.07,-0.098l-0.069,-0.098l-0.068,-0.099l-0.067,-0.101l-0.065,-0.101l-0.065,-0.101l-0.063,-0.103l-0.062,-0.104l-0.061,-0.104l-0.06,-0.105l-0.058,-0.106l-0.057,-0.107l-0.056,-0.107l-0.055,-0.108l-0.053,-0.109l-0.052,-0.11l-0.051,-0.11l-0.049,-0.112l-0.049,-0.112l-0.047,-0.112l-0.045,-0.114l-0.044,-0.114l-0.043,-0.114l-0.042,-0.116l-0.04,-0.116l-0.038,-0.116l-0.038,-0.118l-0.036,-0.117l-0.034,-0.119l-0.033,-0.119l-0.032,-0.12l-0.03,-0.12l-0.029,-0.121l-0.027,-0.121l-0.026,-0.122l-0.024,-0.123l-0.023,-0.122l-0.021,-0.124l-0.02,-0.124l-0.018,-0.124l-0.017,-0.125l-0.015,-0.125l-0.013,-0.126l-0.012,-0.126l-0.011,-0.127l-0.009,-0.127l-0.007,-0.127l-0.006,-0.128l-0.004,-0.128l-0.002,-0.128l-0.001,-0.123l0,-24.012l0.001,-0.123l0.002,-0.128l0.004,-0.128l0.006,-0.128l0.007,-0.127l0.009,-0.127l0.011,-0.127l0.012,-0.126l0.013,-0.125l0.015,-0.126l0.017,-0.125l0.018,-0.124l0.02,-0.124l0.021,-0.123l0.023,-0.123l0.024,-0.123l0.026,-0.122l0.027,-0.121l0.029,-0.121l0.03,-0.12l0.032,-0.12l0.033,-0.119l0.034,-0.118l0.036,-0.118l0.038,-0.118l0.038,-0.116l0.04,-0.116l0.042,-0.116l0.043,-0.114l0.044,-0.114l0.045,-0.114l0.047,-0.112l0.049,-0.112l0.049,-0.111l0.051,-0.111l0.052,-0.11l0.053,-0.109l0.055,-0.108l0.056,-0.107l0.057,-0.107l0.058,-0.106l0.06,-0.105l0.061,-0.104l0.062,-0.104l0.063,-0.102l0.065,-0.102l0.065,-0.101l0.067,-0.1l0.068,-0.1l0.069,-0.098l0.07,-0.098l0.072,-0.096l0.072,-0.096l0.074,-0.095l0.075,-0.094l0.075,-0.093l0.077,-0.092l0.078,-0.091l0.079,-0.09l0.08,-0.089l0.082,-0.088l0.082,-0.087l0.083,-0.087l0.084,-0.085l0.085,-0.084l0.087,-0.083l0.087,-0.082l0.088,-0.082l0.089,-0.08l0.09,-0.079l0.091,-0.078l0.092,-0.077l0.093,-0.075l0.094,-0.075l0.095,-0.074l0.096,-0.072l0.096,-0.072l0.098,-0.07l0.098,-0.069l0.1,-0.068l0.1,-0.067l0.101,-0.065l0.102,-0.065l0.102,-0.063l0.104,-0.062l0.104,-0.061l0.105,-0.06l0.106,-0.058l0.107,-0.057l0.107,-0.056l0.108,-0.055l0.109,-0.053l0.11,-0.052l0.111,-0.051l0.111,-0.049l0.112,-0.049l0.112,-0.047l0.114,-0.045l0.114,-0.044l0.114,-0.043l0.116,-0.042l0.116,-0.04l0.116,-0.038l0.118,-0.038l0.118,-0.036l0.118,-0.034l0.119,-0.033l0.12,-0.032l0.12,-0.03l0.121,-0.029l0.121,-0.027l0.122,-0.026l0.123,-0.024l0.123,-0.023l0.123,-0.021l0.124,-0.02l0.124,-0.018l0.125,-0.017l0.126,-0.015l0.125,-0.013l0.126,-0.012l0.127,-0.011l0.127,-0.009l0.127,-0.007l0.128,-0.006l0.128,-0.004l0.128,-0.002l0.123,-0.001l104.012,0l0.123,0.001ZM11.47,5.464l-0.084,0.001l-0.078,0.001l-0.077,0.003l-0.077,0.003l-0.077,0.004l-0.076,0.006l-0.076,0.006l-0.076,0.007l-0.076,0.008l-0.075,0.009l-0.075,0.01l-0.074,0.011l-0.074,0.012l-0.074,0.013l-0.074,0.014l-0.073,0.014l-0.073,0.016l-0.072,0.016l-0.073,0.017l-0.071,0.018l-0.072,0.019l-0.071,0.02l-0.071,0.02l-0.07,0.022l-0.07,0.022l-0.07,0.023l-0.069,0.024l-0.069,0.025l-0.069,0.025l-0.068,0.027l-0.068,0.027l-0.067,0.028l-0.067,0.029l-0.067,0.029l-0.066,0.031l-0.065,0.031l-0.066,0.032l-0.064,0.033l-0.065,0.033l-0.064,0.035l-0.063,0.035l-0.063,0.035l-0.063,0.037l-0.062,0.037l-0.062,0.038l-0.061,0.039l-0.06,0.039l-0.061,0.04l-0.059,0.041l-0.059,0.042l-0.059,0.042l-0.058,0.043l-0.058,0.043l-0.057,0.045l-0.056,0.045l-0.056,0.045l-0.056,0.047l-0.054,0.047l-0.055,0.047l-0.053,0.048l-0.054,0.049l-0.052,0.05l-0.052,0.05l-0.051,0.051l-0.051,0.051l-0.05,0.052l-0.05,0.052l-0.049,0.054l-0.048,0.053l-0.047,0.055l-0.047,0.054l-0.047,0.056l-0.045,0.056l-0.045,0.056l-0.045,0.057l-0.043,0.058l-0.043,0.058l-0.042,0.059l-0.042,0.059l-0.041,0.059l-0.04,0.061l-0.039,0.06l-0.039,0.061l-0.038,0.062l-0.037,0.062l-0.037,0.063l-0.035,0.063l-0.035,0.063l-0.035,0.064l-0.033,0.065l-0.033,0.064l-0.032,0.066l-0.031,0.065l-0.031,0.066l-0.029,0.067l-0.029,0.067l-0.028,0.067l-0.027,0.068l-0.027,0.068l-0.025,0.069l-0.025,0.069l-0.024,0.069l-0.023,0.07l-0.022,0.07l-0.022,0.07l-0.02,0.071l-0.02,0.071l-0.019,0.072l-0.018,0.071l-0.017,0.073l-0.016,0.072l-0.016,0.073l-0.014,0.073l-0.014,0.074l-0.013,0.074l-0.012,0.074l-0.011,0.074l-0.01,0.075l-0.009,0.075l-0.008,0.076l-0.007,0.076l-0.006,0.076l-0.006,0.076l-0.004,0.077l-0.003,0.077l-0.003,0.077l-0.001,0.078l-0.001,0.084l0,23.988l0.001,0.084l0.001,0.078l0.003,0.077l0.003,0.077l0.004,0.077l0.006,0.076l0.006,0.076l0.007,0.076l0.008,0.076l0.009,0.075l0.01,0.075l0.011,0.074l0.012,0.075l0.013,0.073l0.014,0.074l0.014,0.073l0.016,0.073l0.016,0.073l0.017,0.072l0.018,0.072l0.019,0.071l0.02,0.071l0.02,0.071l0.022,0.07l0.022,0.071l0.023,0.069l0.024,0.07l0.025,0.068l0.025,0.069l0.027,0.068l0.027,0.068l0.028,0.067l0.029,0.067l0.029,0.067l0.031,0.066l0.031,0.066l0.032,0.065l0.033,0.065l0.033,0.064l0.035,0.064l0.035,0.063l0.035,0.064l0.037,0.062l0.037,0.062l0.038,0.062l0.039,0.061l0.039,0.061l0.04,0.06l0.041,0.059l0.042,0.06l0.042,0.058l0.043,0.058l0.043,0.058l0.045,0.057l0.045,0.056l0.045,0.056l0.047,0.056l0.047,0.055l0.047,0.054l0.048,0.054l0.049,0.053l0.05,0.052l0.05,0.052l0.051,0.052l0.051,0.05l0.052,0.05l0.052,0.05l0.054,0.049l0.053,0.048l0.054,0.048l0.055,0.047l0.056,0.046l0.056,0.046l0.056,0.044l0.057,0.045l0.058,0.043l0.058,0.043l0.059,0.043l0.059,0.041l0.059,0.041l0.061,0.04l0.06,0.04l0.061,0.038l0.062,0.038l0.062,0.037l0.063,0.037l0.063,0.036l0.063,0.035l0.064,0.034l0.065,0.033l0.064,0.033l0.066,0.032l0.065,0.031l0.066,0.031l0.067,0.029l0.067,0.029l0.067,0.028l0.068,0.027l0.068,0.027l0.069,0.025l0.069,0.025l0.069,0.024l0.07,0.023l0.07,0.023l0.07,0.021l0.071,0.021l0.071,0.019l0.072,0.019l0.071,0.018l0.073,0.017l0.072,0.017l0.073,0.015l0.073,0.015l0.074,0.013l0.074,0.013l0.074,0.012l0.074,0.011l0.075,0.01l0.075,0.009l0.076,0.008l0.076,0.007l0.076,0.006l0.076,0.006l0.077,0.004l0.077,0.004l0.077,0.002l0.078,0.002l0.084,0l103.988,0l0.084,0l0.078,-0.002l0.077,-0.002l0.077,-0.004l0.077,-0.004l0.076,-0.006l0.076,-0.006l0.076,-0.007l0.076,-0.008l0.075,-0.009l0.075,-0.01l0.074,-0.011l0.075,-0.012l0.073,-0.013l0.074,-0.013l0.073,-0.015l0.073,-0.015l0.073,-0.017l0.072,-0.017l0.072,-0.018l0.071,-0.019l0.071,-0.019l0.071,-0.021l0.07,-0.021l0.071,-0.023l0.069,-0.023l0.07,-0.024l0.068,-0.025l0.069,-0.025l0.068,-0.027l0.068,-0.027l0.067,-0.028l0.067,-0.029l0.067,-0.029l0.066,-0.031l0.065,-0.031l0.066,-0.032l0.065,-0.033l0.064,-0.033l0.064,-0.034l0.063,-0.035l0.063,-0.036l0.063,-0.037l0.062,-0.037l0.062,-0.038l0.061,-0.038l0.061,-0.04l0.06,-0.04l0.059,-0.041l0.06,-0.041l0.058,-0.043l0.058,-0.043l0.058,-0.043l0.057,-0.045l0.056,-0.044l0.056,-0.046l0.056,-0.046l0.055,-0.047l0.054,-0.048l0.054,-0.048l0.053,-0.049l0.052,-0.05l0.052,-0.05l0.052,-0.05l0.05,-0.052l0.05,-0.052l0.05,-0.052l0.049,-0.053l0.048,-0.054l0.048,-0.054l0.047,-0.055l0.046,-0.056l0.045,-0.055l0.045,-0.057l0.045,-0.057l0.043,-0.058l0.043,-0.058l0.043,-0.058l0.041,-0.06l0.041,-0.059l0.04,-0.06l0.04,-0.061l0.038,-0.061l0.038,-0.062l0.037,-0.062l0.037,-0.062l0.036,-0.064l0.035,-0.063l0.034,-0.064l0.033,-0.064l0.033,-0.065l0.032,-0.065l0.031,-0.066l0.031,-0.066l0.029,-0.067l0.029,-0.067l0.028,-0.067l0.027,-0.068l0.027,-0.068l0.025,-0.069l0.025,-0.069l0.024,-0.069l0.023,-0.07l0.023,-0.07l0.021,-0.07l0.021,-0.071l0.019,-0.071l0.019,-0.071l0.018,-0.072l0.017,-0.072l0.017,-0.073l0.015,-0.073l0.015,-0.073l0.013,-0.074l0.013,-0.074l0.012,-0.074l0.011,-0.074l0.01,-0.075l0.009,-0.075l0.008,-0.076l0.007,-0.076l0.006,-0.076l0.006,-0.076l0.004,-0.077l0.004,-0.077l0.002,-0.077l0.002,-0.078l0,-0.084l0,-23.988l0,-0.084l-0.002,-0.078l-0.002,-0.077l-0.004,-0.077l-0.004,-0.077l-0.006,-0.076l-0.006,-0.076l-0.007,-0.076l-0.008,-0.076l-0.009,-0.075l-0.01,-0.075l-0.011,-0.074l-0.012,-0.074l-0.013,-0.074l-0.013,-0.074l-0.015,-0.073l-0.015,-0.073l-0.017,-0.072l-0.017,-0.073l-0.018,-0.071l-0.019,-0.072l-0.019,-0.071l-0.021,-0.071l-0.021,-0.07l-0.023,-0.07l-0.023,-0.07l-0.024,-0.069l-0.025,-0.069l-0.025,-0.069l-0.027,-0.068l-0.027,-0.068l-0.028,-0.067l-0.029,-0.067l-0.029,-0.067l-0.031,-0.066l-0.031,-0.065l-0.032,-0.066l-0.033,-0.064l-0.033,-0.065l-0.034,-0.064l-0.035,-0.063l-0.036,-0.063l-0.037,-0.063l-0.037,-0.062l-0.038,-0.062l-0.038,-0.061l-0.04,-0.06l-0.04,-0.061l-0.041,-0.059l-0.041,-0.059l-0.043,-0.059l-0.043,-0.058l-0.043,-0.058l-0.045,-0.057l-0.045,-0.056l-0.045,-0.056l-0.046,-0.056l-0.047,-0.055l-0.048,-0.054l-0.048,-0.053l-0.049,-0.054l-0.05,-0.052l-0.05,-0.052l-0.05,-0.051l-0.052,-0.051l-0.052,-0.05l-0.052,-0.05l-0.053,-0.049l-0.054,-0.048l-0.054,-0.047l-0.055,-0.047l-0.056,-0.047l-0.056,-0.045l-0.056,-0.045l-0.057,-0.045l-0.058,-0.043l-0.058,-0.043l-0.058,-0.042l-0.06,-0.042l-0.059,-0.041l-0.06,-0.04l-0.061,-0.039l-0.061,-0.039l-0.062,-0.038l-0.062,-0.037l-0.063,-0.037l-0.063,-0.035l-0.063,-0.035l-0.064,-0.035l-0.064,-0.033l-0.065,-0.033l-0.066,-0.032l-0.065,-0.031l-0.066,-0.031l-0.067,-0.029l-0.067,-0.029l-0.067,-0.028l-0.068,-0.027l-0.068,-0.027l-0.069,-0.025l-0.068,-0.025l-0.07,-0.024l-0.069,-0.023l-0.071,-0.022l-0.07,-0.022l-0.071,-0.02l-0.071,-0.02l-0.071,-0.019l-0.072,-0.018l-0.072,-0.017l-0.073,-0.016l-0.073,-0.016l-0.073,-0.014l-0.074,-0.014l-0.073,-0.013l-0.075,-0.012l-0.074,-0.011l-0.075,-0.01l-0.075,-0.009l-0.076,-0.008l-0.076,-0.007l-0.076,-0.006l-0.076,-0.006l-0.077,-0.004l-0.077,-0.003l-0.077,-0.003l-0.078,-0.001l-0.084,-0.001l-103.988,0Z" style="fill:#048;"/>

Try it by yourself.

Box flat.svg

[Dave Harris]

Yes, currently we export rounded rectangles as curves rather than as their native SVG shape, so they will get bigger.

[Herbert123]

For comparison, this is what Photoline produces after importing that rectangle and saving it:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with PhotoLine 19.90B1 (www.pl32.com) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1024" height="1024" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Rect2">
    <path stroke-width="4" fill="#4ba6fc" stroke="#203b87" 
          d="M10 2 L114 2 C118 2 122 6 122 10 L122 34 C122 38 
             118 42 114 42 L10 42 C6 42 2 38 2 34 L2 10 C2 6 6 2 10 2 Z"/>
  </g>
</svg>

And after re-positioning:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with PhotoLine 19.90B1 (www.pl32.com) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="1024" height="1024" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="Rect2" transform="matrix(1 0 0 1 155 113)">
     <path transform="matrix(1 0 0 1 -155 -113)" stroke-width="4"
	 fill="#4ba6fc" stroke="#203b87" d="M165 115 L269 115 C273 115 277
	 119 277 123 L277 147 C277 151 273 155 269 155 L165 155 C161 155
	 157 151 157 147 L157 123 C157 119 161 115 165 115 Z"/>
  </g>
</svg>

Not that bad.

 

Obviously, Inkscape does it best: it keeps the rounded borders 'live", and applies the ry and rx attributes properly.

 

By the way, is it possible to assign a custom id label to objects in Affinity when exporting to SVG? In Photoline a layer or layer group's name sets the id attribute. Must we group those objects in Affinity?

[Dave Harris]

The SVG id is derived from the name you assign the object in the Layers panel, so you can control it from there.

 

I had another look at the rounded rectangle. The issue here is that the stroke is being expanded to curves. That happens because of its Mitre Join type. Affinity draws mitres differently to everyone else, and that causes problems with export. In this case it's also clearly wrong, because the shape was imported. I see also the mitre limit is 1.414 and for SVG it should default to 4. Anyway, if you change the shape to use a bevel join, the result looks the same and exports to SVG in a similar way to Inkscape:

 

    <path id="Test" d="M122,10C122,5.585 118.415,2 114,2L10,2C5.585,2 2,5.585 2,10L2,34C2,38.415 5.585,42 10,42L114,42C118.415,42 122,38.415 122,34L122,10Z" style="fill:rgb(0,170,255);stroke-width:4px;stroke:rgb(0,68,136);"/>

 

(That was with a rounded rectangle renamed to "Test" in the Layers panel.)

[Macoun]

For comparison, this is what Photoline produces after importing that rectangle and saving it:

<path stroke-width="4" fill="#4ba6fc" stroke="#203b87" d="M10 2 L114 2 C118 2 122 6 122 10 L122 34 C122 38 118 42 114 42 L10 42 C6 42 2 38 2 34 L2 10 C2 6 6 2 10 2 Z"/>

And after re-positioning:

<path transform="matrix(1 0 0 1 -155 -113)" stroke-width="4" fill="#4ba6fc" stroke="#203b87" d="M165 115 L269 115 C273 115 277 119 277 123 L277 147 C277 151 273 155 269 155 L165 155 C161 155 157 151 157 147 L157 123 C157 119 161 115 165 115 Z"/>

Not that bad.

 

Obviously, Inkscape does it best: it keeps the rounded borders 'live", and applies the ry and rx attributes properly.

 

 

When importing this to Sketch. Changing position and colors. And exporting as SVG. 

 

You get this draw code: 

<rect id="Rectangle" stroke="#0852A1" stroke-width="4" fill="#3D94E1" sketch:type="MSShapeGroup" x="51" y="34" width="120" height="40" rx="8"></rect>

It's pretty nondestructive.

[andym]

Can I add my requests to this thread rather than start a new one?

 

It would be great if the export module left styles alone - as it is if I have a set of paths with a common set of styles in the head of the document AFD puts those styles against each individual path in the export version.

 

Similarly while AFD understands <defs> and <use ...> when it reads the document, but these don't seem to be supported on export.

 

It would be great to be able to work on a document in AFD, then restructure it with a text editor, and then if need be, be able to tweak it again in AFD without having to start over again.

 

Thanks. I appreciate that there are only a few of you and you have lots of users, all with different needs.