Improved SVG Exports for Web Design

[Alces]

Currently I still need to use Adobe Illustrator to get decent svg code export to use in my web projects, but it would be awesome if Affinity Designer could do that well too. 

An option to export clean svg files with xml code designed to be easy to put in inline html text (making it so I have a lot of flexibility to animate it) would be awesome! Currently Affinity SVG exports are messy and difficult to work with, so I end up using Adobe Illustrator exports which produce much simpler xml code that is much easier to work with on web design animation projects. 

 

[muzKore]

Hey.

While not a complete solution, have you looked at https://jakearchibald.github.io/svgomg/ ?

It enables you to copy SVG code that will optimise it for web.

Cheers.

[Jonathan L Clark]

I have found that regardless of whether or not the icons I export need it or not Affinity Designer is adding the following styles "fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;". I have to use a code editor to manually remove the unnecessary styles before I use it on the web. This isn't terrible but it is an extra step. It would be great to see the export feature improved for web use.

[Andez]

I feel the same. I'd like classes to be added so you can dynamically change styles in browser using Css. IDs are not great for this. 

[Guest]

18 hours ago, Andez said:

I feel the same. I'd like classes to be added so you can dynamically change styles in browser using Css. IDs are not great for this. 

Ideally, I'd like to be able to specify both #IDs and .classes. Classes for items that repeat and share the same styles (ie: .button, .active, .highlight, .disabled, .etc) and IDs for single, unique objects or groups that I want to reference by name (ie: #logo, #continue, #exit, etc). Perhaps these naming conventions could be declared in the layer name (using either a '#' for IDs and a '.' for classes) or through some other convention?

Also, being able to have styles written to a style tag within the document rather than inline would be most welcome. I'm doing more and more with SVG these days and having to repeatedly rip apart SVG docs by hand to enable better styling, interactivity, etc is becoming rather old. Bonus points for round-tripping SVGs AND NOT re-writing the entire structure of the document.

[mwheys]

This would be a big plus for me too.

I made a burger icon (basically two lines) and was looking for the output to be something like:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
  <g fill="none" stroke="#000">
    <line y1="12.5" x2="36" y2="12.5"/>
    <line y1="23.5" x2="36" y2="23.5"/>
  </g>
</svg>

Here's the output from Affinity (minus the extra tags/properties I would strip out anyway):

<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
    <rect id="Burger" x="0" y="0" width="36" height="36" style="fill:none;"/>
    <clipPath id="_clip1">
        <rect id="Burger1" serif:id="Burger" x="0" y="0" width="36" height="36"/>
    </clipPath>
    <g clip-path="url(#_clip1)">
        <g transform="matrix(1,0,0,1,3,12.5)">
            <path d="M0,0L30,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
        </g>
        <g transform="matrix(1,0,0,1,3,23.5)">
            <path d="M0,0L30,0" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2px;"/>
        </g>
    </g>
</svg>

Just way more complex than it needs to be. Would love to see an improvement on this.

[gafvert]

Came here to add to this. Just tried to generate some simple SVG shapes I'd then use inline in a web project, to keep it clean I set up a file as simple as possible, with just a 100x100 artboard and a simple star in it with no grouping. I expected this to generate SVG code where the artboard size would be the SVG size with just the path of the star in it. Instead I got this:

<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g id="Artboard1" transform="matrix(0.125,0,0,0.166667,0,0)">
        <rect x="0" y="0" width="800" height="600" style="fill:none;"/>
        <g transform="matrix(9.30233,0,0,6.97674,-65.1163,-48.8372)">
            <path d="M50,7L57.329,42.671L93,50L57.329,57.329L50,93L42.671,57.329L7,50L42.671,42.671L50,7Z"/>
        </g>
    </g>
</svg>

As you can see for some reason Designer has added two levels of pointless transformations, first adding a group for the artboard, with a transfrom matrix that makes the raw SVG code inside hard to use. Then a pointless 800x600 rect that I guess is a rest of the fact that the document once started life as a 800x600 template (though there is nothing in the document with that size), finally adding another pointless group around the path with another level of transformation. What I would have liked and expected was something like:

<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
    <polygon id="Star" fill="#000000" points="50 0 58.5223 41.4777 100 50 58.5223 58.5223 50 100 41.4777 58.5223 0 50 41.4777 41.4777"></polygon>   
</svg>

 

[VIPStephan]

Guys, make sure to check the SVG export presets, especially the “reduce transformations” checkbox. As to your 800×600 rect element, @gafvert, this is because apparently you exported the whole artboard. Try to select just the objects you want to export, then do File → Export and there is a select field towards the bottom of the export dialog where you should select “selection without background” as export area.

Alternatively, create a slice from your objects in the export persona and export only this slice, not the whole artboard.

[Jowday]

3 hours ago, VIPStephan said:

Guys, make sure to check the SVG export presets, especially the “reduce transformations” checkbox. As to your 800×600 rect element, @gafvert, this is because apparently you exported the whole artboard. Try to select just the objects you want to export, then do File → Export and there is a select field towards the bottom of the export dialog where you should select “selection without background” as export area.

Alternatively, create a slice from your objects in the export persona and export only this slice, not the whole artboard.

The export dialog is - due to lack of user experience designers - made by engineers. It should be designed by user experience designers and be scenario based as a starting point. Informative. Logic. Minimize points of pain.

Instead Serif customers have to go through trial and error, googling, asking on forums and then saving the best preset they can. Welcome to 1998.

A preview of the export is of course not available in all export tabs.

[mwheys]

8 hours ago, VIPStephan said:

Guys, make sure to check the SVG export presets, especially the “reduce transformations” checkbox. As to your 800×600 rect element, @gafvert, this is because apparently you exported the whole artboard. Try to select just the objects you want to export, then do File → Export and there is a select field towards the bottom of the export dialog where you should select “selection without background” as export area.

Alternatively, create a slice from your objects in the export persona and export only this slice, not the whole artboard.

@VIPStephan thanks for the tip regarding the reduce transformations checkbox, but I'm having trouble finding it. The only option I can find in the export dialog is "flatten transforms" – is this the same thing?

[gafvert]

Thank you @VIPStephan for the tip regarding the "flatten transforms" option, that indeed seems to get rid of the extra transform steps. It was not very intuitive to me as I did not expect there to be any transformations to flatten, as I had made no groups of objects and transformed them. However, after a little experimentation, it seems that for Designer every transformation you make of an object results in a group of that object with the applied transformation (even if it's not shown in the application). So if you first draw a 50x50 circle then scale it to 100x100 size you get a different SVG export than if you drew the circle at  100x100 size from the start.

Regarding the empty fill rect it seems like it's a residue of when you create your document, I'm guessing it's the original artboard background or something. In the case I pasted in above you can see that I have changed the artboard to be 100x100px, and then selected this preset artboard slice in the export mode to export to svg. So it's extra weird that it's still 800x600. If I instead create a new document setting it to be 100x100 in the new document dialogue I still get the empty rect in the SVG export, but now it's 100x100.

Still, with the nice flatten transforms option I now get (with a simple circle instead):

<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <rect id="Artboard1" x="0" y="0" width="100" height="100" style="fill:none;"/>
    <g id="Artboard11" serif:id="Artboard1">
        <circle cx="50" cy="50" r="50"/>
    </g>
</svg>

But in my mind as you're exporting just a slice that is the one selected artboard this could/should be just:

<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/">
    <circle cx="50" cy="50" r="50"/>
</svg>

 

[VIPStephan]

6 hours ago, mwheys said:

The only option I can find in the export dialog is "flatten transforms" – is this the same thing?

Yes, could be. I have AD in German and couldn’t be bothered to change the language and restart it. 😛

[VisionsMind]

Any news/improvements in this regard? It's been almost a year since the last post in this thread.

I've found the exact same issues described here while working on a project.

Does anyone know is Serif is taking/thinking about taking any action in this regard?

Looking around a bit, it seems like Inkscape has options to export 'optimized SVG'.

Didn't try that one yet, but would be weird to have to use 2 different vector programs (one being FOSS) to get the job done, though...

[Nifel]

Feels like this issue is not a priority to Serif.

I just switched from Illustrator to Affinity Designer and really enjoy it. But the SVG export compared to Illustrators is a disaster and unfortunately a deal breaker.

One short term solution, in order to get a cleaner markup, is to use https://jakearchibald.github.io/svgomg/. But it's a lot of manual labor if you have multiple files.

[Zen22]

I came here just to post about SVG. Quite frankly, it's a disaster. Affinity Designer barely gets basic properties of SVG right. And the moment you do something Affinity doesn't like, your entire image will be rasterized. No vector output. HELLO? SVG is an incredible vector graphics standard. It has views, symbols, color definitions, gradient definitions, filter definitions, hyperlinking, filters, blending modes, masks, clips, classes, IDs, metadata, plus embedded images. It even supports embedded fonts and embedded web fonts. You can even animate it. Granted, most of the export functions in Affinity Designer are equally messed up. I've got a beautiful vector artwork with embedded pixel layers and it's actually impossible for me to ever view it in anything other than Affinity Designer during these current conditions. (Even though the SVG format could absolutely be compatible.) 100% compatibility with SVG should be an absolute priority because it's the most standardized and advanced way to store vector graphics. Without standardization, there's only lock in.

Plus, for all the web developers out there, make the markup clean and please give obvious classes and IDs!

[Zen22]

On 3/6/2022 at 5:47 PM, Zen22 said:

I came here just to post about SVG. Quite frankly, it's a disaster. Affinity Designer barely gets basic properties of SVG right. And the moment you do something Affinity doesn't like, your entire image will be rasterized. No vector output. HELLO? SVG is an incredible vector graphics standard. It has views, symbols, color definitions, gradient definitions, filter definitions, hyperlinking, filters, blending modes, masks, clips, classes, IDs, metadata, plus embedded images. It even supports embedded fonts and embedded web fonts. You can even animate it. Granted, most of the export functions in Affinity Designer are equally messed up. I've got a beautiful vector artwork with embedded pixel layers and it's actually impossible for me to ever view it in anything other than Affinity Designer during these current conditions. (Even though the SVG format could absolutely be compatible.) 100% compatibility with SVG should be an absolute priority because it's the most standardized and advanced way to store vector graphics. Without standardization, there's only lock in.

Plus, for all the web developers out there, make the markup clean and please give obvious classes and IDs!

I feel I should post a little update on this situation. This artwork, which made use of pixel layers masked by vector layers WAS actually able to be exported properly by Affinity Designer. However, the default parameters are bad, and possibly wrong. By default, Affinity Designer has the option of "Rasterize unsupported properties" which causes the entire artwork to be rasterized. I feel like it's untruthful. This suggests the entire document is an unsupported property. When I selected the option to "Rasterize nothing" it exported fine, with all of the previously mentioned properties in tact. (Vector paths, masks, pixel layers, etc.) I'm very satisfied with this result.