SVG Copy/Export Converts Stoke to Path

[dwn]

I've just started using Designer and one thing I noticed is that strokes are being converted to separate paths during the SVG export.

 

First, this causes the exported file size to balloon dramatically. For instance, one of my 5K SVGs, when imported into Designer and exported as another SVG, expands to 280K to 350K, depending on the export settings.

 

Second, this means importing and exporting an SVG is a (very) lossy process, which makes it useless as an interchange format. This also affects copying objects as SVGs.

 

Third, since I need to manipulate the SVG shapes in my own program, the processing time also increases by several orders of magnitude.

 

[Lee D]

Hi dwn,

Welcome to the forums.

 

Some stroke styles aren't directly supported by SVG, so they have to be expanded to keep them looking correct. These include mitre joins, and inside/outside stroke alignment. You can try adjusting the strokes align and join options and then exporting.

[Jim Monson]

I have been doing a lot of work exporting SVGs from Affinity Designer (AD). As you have no doubt seen, AD has some nice features and shortcuts attached to them. E.g., one can create a separate AD doc from the FILE menu (New To Clipboard, with a fast shortcut) and then export that doc from the FILE menu (with another shortcut). An even faster method is selecting the item and going right to the export option, choosing the SVG option in the export box that allows one three choices: Whole Doc or with or without background. This speeds things up, although I wish AD would keep the "without background" as my default choice until I changed it.

 

If you click the "More" button in the SVG export you will see a variety of choices. There I chose "Nothing" in the Rasterize slot. You may want to try out the various options, saving each one as a separate Preset (top of the "More" window). This way you can know what worked best for you. I'm still looking into this "More" page and wish that AD would make each option clear as to what each does in terms of output size and quality.

 

My experience has been that I can do somethings better (and with much smaller SVG sizes) in Illustrator, but playing around with all of AD's export options sometimes helps to get a better result. I wish there were a clear and full article about how AD creates its SVGs. Keeping them at a minimum size is crucial when using them elsewhere, such as in creating an app. It remains a "hit and miss" for me, sometimes a small font size of the same work is a larger SVG size than the same word in a larger size font.

 

BTW, my problem with the SVG export in AD is that text (both frame and artistic) does not recognize AD tracking. It may put the tracking between the first and second character, then there is no tracking until the last letter, that appears at the very end, i.e., as if all of the other letters had been properly tracked. I'm still trying to figure out how kerning vs tracking works in AD. Thus you are not alone in finding that AD has some SVG export challenges. 

[dwn]

The shape was originally in SVG format so it shouldn't contain anything that isn't supported by SVG, however...

 

It was the mitre join causing the problem. SVG does support different join/cap styles via stroke-linecap, stroke-linejoin and stroke-miterlimit attributes (the default is a mitre join with limit 4), so there shouldn't have been any conflicts.

 

On a broader note, if a style isn't supported by the exporter it'd expect to see a warning about it during the export process, ideally with an option to ignore the warnings or generate paths for the unsupported stuff. As it was, I had to diff the exported XML to figure out why my file size increased 70x.

 

In my use case--which is, admittedly, unusual--a stroke that isn't perfectly aligned is far more preferable to the increased file size and complexity.