Jump to content
meefox

Improvements for SVG export (web)

Recommended Posts

Is it possible to add compatibility with SVGO https://jakearchibald.github.io/svgomg/

It is the most popular SVG optimizer for the web. Exported SVG files would be a way lighter.

And it would be good to have a checkbox for exporting inline styles as classes it is useful for colorizing SVG using JS or CSS.

 

Share this post


Link to post
Share on other sites
3 hours ago, meefox said:

It is the most popular SVG optimizer for the web

Never heard of it.


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta 1.7.0.140, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-12, - iPad2 iOS 9.35 B|  Instagram & Flickr - Affinity Designer (ADe) Tutorials - Affinity Photo (APh) Tutorials - Public Domain Images

Share this post


Link to post
Share on other sites
4 hours ago, meefox said:

Is it possible to add compatibility with SVGO https://jakearchibald.github.io/svgomg/

It is the most popular SVG optimizer for the web. Exported SVG files would be a way lighter.

And it would be good to have a checkbox for exporting inline styles as classes it is useful for colorizing SVG using JS or CSS.

 

You can use svgo yourself to optimize the outputs of Affinity; by commandline or by adding an svgo-loader to webpack. That's actually a lot better than if Affinity would include it in the software, because there are an enormous amount of settings and (everyday changing) plugins available for svgo and you would like to set all the settings the way you want it. There is no setting that fits all/everybody. So if Affinity would like to add it to the export, which I doubt, they should at least make it possible to use the svgo config file where you can make all settings yourself, otherwise they would have to change the exporter forever everytime svgo changes and a new plugin comes out.

I would advise you to use (or learn) webpack, search for the svgo-package and the svgo-loader. Webpack even has a watcher which allowes you to keep track of svg-changes yourself. So everytime your svg changes (got saved) webpack automatically compresses it via svgo.

And together with the 'continues' mode in Affinity Designer Export Persona everything is completely automated. Every change you make in your design will automatically 'rendered' to svg and webpack will automatically compress your svg directly. What else can you whish for! :)

But I'm afraid that's a bit technical and you need other tools, like npm too. So if you're not that into that maybe that's not the way to go for you.

Then the alternative is to use the link you provided. That's actually not SVGO, but a website that is using the svgo commandline-tool under the hood for you to give you some graphical interface. But svgo is a 'commandline'tool, running in npm and got a lot more settings.

About compatibility:

I don't know what you mean by 'compatibility' with svgo tool, but svg is svg. Most svg out there is version 1.1, so they are (or should be) all compatible. There's nothing more to it than that for compatibility. Affinity's svg is completely compatible with svg, so the tool youo refer to can open the Affinity svg's perfectly fine. If you don't get what you want or svgo is destorying your layout, then you have set the wrong compression settings in svgo. Not all settings are right for every job. Those compression settings are changing your svg and sometimes that brakes your layout. To use the settings you have to know a little more about the technical format of svg I'm afraid, or just try out all settings per file and see what works for you per layout.


 

Share this post


Link to post
Share on other sites
On 10/14/2018 at 5:19 PM, firstdefence said:

Never heard of it.

If you do assets for the web, I would suggest you look at SVGO. It can make SVG significantly smaller.

 

On 10/14/2018 at 5:57 PM, Friksel said:

You can use svgo yourself to optimize the outputs of Affinity; by commandline or by adding an svgo-loader to webpack. That's actually a lot better than if Affinity would include it in the software, because there are an enormous amount of settings and (everyday changing) plugins available for svgo and you would like to set all the settings the way you want it. There is no setting that fits all/everybody. So if Affinity would like to add it to the export, which I doubt, they should at least make it possible to use the svgo config file where you can make all settings yourself, otherwise they would have to change the exporter forever everytime svgo changes and a new plugin comes out.

I would advise you to use (or learn) webpack, search for the svgo-package and the svgo-loader. Webpack even has a watcher which allowes you to keep track of svg-changes yourself. So everytime your svg changes (got saved) webpack automatically compresses it via svgo.

And together with the 'continues' mode in Affinity Designer Export Persona everything is completely automated. Every change you make in your design will automatically 'rendered' to svg and webpack will automatically compress your svg directly. What else can you whish for! :)

But I'm afraid that's a bit technical and you need other tools, like npm too. So if you're not that into that maybe that's not the way to go for you.

Then the alternative is to use the link you provided. That's actually not SVGO, but a website that is using the svgo commandline-tool under the hood for you to give you some graphical interface. But svgo is a 'commandline'tool, running in npm and got a lot more settings.

About compatibility:

I don't know what you mean by 'compatibility' with svgo tool, but svg is svg. Most svg out there is version 1.1, so they are (or should be) all compatible. There's nothing more to it than that for compatibility. Affinity's svg is completely compatible with svg, so the tool youo refer to can open the Affinity svg's perfectly fine. If you don't get what you want or svgo is destorying your layout, then you have set the wrong compression settings in svgo. Not all settings are right for every job. Those compression settings are changing your svg and sometimes that brakes your layout. To use the settings you have to know a little more about the technical format of svg I'm afraid, or just try out all settings per file and see what works for you per layout.

44

True, you are absolutely right about fast-changing FE environment :) 

 

But what about an option to save inline styles as classes instead?

That would give a possibility to change styles using CSS. 

Share this post


Link to post
Share on other sites
4 minutes ago, meefox said:

But what about an option to save inline styles as classes instead? That would give a possibility to change styles using CSS.  

Yes, that would be my choice as well. As an option. Like this:


I don't know where I put it (can't find it on the forum at the moment), but it would be very welcome to be able to add css-classnames inside the layernames, just like illustrator can. Right now everytime in Javascript I have to write code to look for elements by ID and than add classes to them. It would be a much better workflow to add the classnames for every element directly inside Designer.

So if your layername is '#header' it translate to a svg-element with

id="header'

If your layername is '.toggle' it generates a svg-element with no ID, but a class:

class="toggle"

Or a mixture of multiple classes or id and class(es), so if you name your layer '#header.main-header.visible' you get a svg-layer with:

id="header" class="main-header visible"

I'd say layers without an ID starting with # or a class starting with . (dot) in the name doesn't get a classname nor an ID. That way we are also able to have layernames in our Affinity files without them being exported to svg. Only if we need a layername to be exported, we add a '#' in front of the layername and if we need to add classes we add classes to it in a chaining way.


 

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

×