Jump to content

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.

 

Link to comment
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" 2019 Sequoia 15.0 (24A335), iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
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.

 

Link to comment
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. 

Link to comment
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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.