SVG optimization

[nunodotferreira]

Hi again, :)

is there a way of not optimize SVG files? I'm having some problems with that, and want not to have that optimized when in production!

thanks again

[flovan]

hmm, I guess you can put them in (for example) assets/svg and just have them moved over. Everything from assets/images will get optimized otherwise.

[flovan]

@nunodotferreira Did my suggestion help you out?

[nunodotferreira]

that's what i'm been doing, but it's a manual thing!!!

[flovan]

What kind of problems are you having exactly, if I may ask? It might be related to a module bug, so then I can go over and ask for a fix. And otherwise I'll see if I can fit in another optional setting.

[nunodotferreira]

Well, because i'm styling SVG and using CSS to change color of the SVG objects, when i'm in --serve mode all works fine, because the SVG are not optimized, but when i create a production 'code' the optimization removes some SVG parameters that i'm using, and the CSS doesn't work… :( that's why I'm having problems...

[flovan]

Yeah that definitely shouldn't happen. Any specific things that get stripped? Like class names, or maybe your paths get merged? The more I know, the easier for me to find a solution for this!

[nunodotferreira]

Hi Flovan, well the optimization changes the name of the objects.

Hi have this object code before optimization:

<clipPath clipPathUnits="userSpaceOnUse" id="clipPath5093"> </clipPath>

but after optimization:

<clipPath></clipPath>

this alter's my css style.

[flovan]

There is a solution for this, but a bit of work is required to find out the specific configurations that are causing this. If you feel like helping out that would be much appreciated, otherwise I'll do it sometime in the future.

Note: Required changes below include the updates that the next Headstart update will bring

First off, open up gulpfile.js at the imagemin procedure, and expand the the options object as following:

gulp.task('images', function (cb) {

    /**/

    return gulp.src([
            'assets/images/**/*',
            '!_*'
        ])
        /**/
        .pipe(plugins.if(isProduction, plugins.imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true,
            svgoPlugins: [ /* READ ON */ ]
        })))
        /**/
    ;
});

Next, try to find out which SVGO plugin(s) needs to be disabled by using the svgoPlugins Array:

svgoPlugins: [
    { nameOfThePluginWithoutExtenstion: false },
    ...
]

A list of plugins can be found in the SVGO repository.

---

I can expose the plugins through the config file, but some research is needed first to make sure that this actually works. Otherwise, SVGO will have to be disabled and replaced by a different optimiser, or SVG optimisations will need a setting to be entirely disabled.

[nunodotferreira]

Hi,

i do this test and i'll see if i can find the plugin that breaks my style… :)

good work

[flovan]

:+1:

[flovan]

@nunodotferreira I will add in the followng config option to disable SVG optimisation entirely for V2 (exact name might change):

Either don't optimize anything at all:

{
    [...]
    disableSVGOptimization: true
    [...]
}

or for specific files:

{
    [...]
    disableSVGOptimization: [
       "aFileName.svg",
       "anotherCustomSVG.svg",
       [...]
    ]
    [...]
}

[nunodotferreira]

that's fine, i'm using this in some cases, but if .svg files are complex the optimization fails and then i used the original file. So both options are fine. Thanks