SVG Cleanup with Sketch App - Sketch Plugin Available

[Beblebroks (Nicolas)]

In case any one is using the Sketch App . With the svgo plugin for sketch and the following settings, Elements just works with the resulst out of the box. No more tweaking necessary. All the plugins below are based on the default once, but since adding a new one removeDimensions would overwrite the default settings those others have to be re-added.

I tested it and it worked for me in general. If you want to use a SVG without that compression you need to disable the plugin again.

If you export a single symbol it works if the color is #000000 if you have multiple symbols or like a color specified it keeps the specified once.

Settings

module.exports = {
  js2svg: {
    indent: 2,
    pretty: true,
  },
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          inlineStyles: false,
          removeViewBox: false,
          cleanupEnableBackground: false,
          removeHiddenElems: false,
          convertShapeToPath: false,
          moveElemsAttrsToGroup: false,
          moveGroupAttrsToElems: false,
          convertPathData: false,
        },
      },
    },
    'convertStyleToAttrs',
    'cleanupListOfValues',
    'sortAttrs',
    'removeDimensions',
  ],
};

[Doobox (Doobox Software)]

@Beblebroks Ha! I literally just banged my head for an hour putting a config file together, and just logged in to share it.

Love Sketch App so had to be done. Works a treat!

Anyone that does not know, but uses Sketch App…

Install the plugin

Now create a file named : svgo.config.js
Put the config inside :

module.exports = {
	path: currentFile,
	multipass: true,
	plugins: [
		{
			name: 'preset-default',
			params: {
				overrides: {
					inlineStyles: {
						onlyMatchedOnce: false,
					},
					convertStyleToAttrs: true,
					cleanupListOfValues: true,
					removeViewBox: false,
					removeDimensions: true,
					cleanupEnableBackground: false,
					removeHiddenElems: false,
					convertShapeToPath: false,
					moveElemsAttrsToGroup: false,
					moveGroupAttrsToElems: false,
					convertPathData: false,
					sortAttrs: true,
					convertColors: {
						currentColor: true,
					},
					removeAttrs: {
						attrs: ['stroke-width', 'stroke-linejoin', 'stroke-miterlimit'],
					},
				}
			}
		},
		{
			name: 'removeDimensions',
		},
		{
			name: 'addAttributesToSVGElement',
			params: {
				attributes: [
					{ fill: 'currentColor' },
					{ stroke: 'currentColor' },
					{ 'style': 'fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' }
				]
			}
		}
	],
};

Now move that file inside the Sketch App Plugins directory which you can find a link to here in the plugins window :

That’s it, now just export SVG as normal and they will work inside Elements.
As mentioned, when you return to everyday work, you may want to disable the SVGO plugin in the plugins window, and re-enable when you need it again.

[handshaper (Robin Mair)]

@Doobox

That’s it, now just export SVG as normal and they will work inside Elements.

I could not get this to work for me. I end up with an SVG that I cannot change the colors for in Elements. I think one of the problems is because there is a “transform” in the SVG. I there a setting that will tell SVGO to flatten all transforms.

Sure owuld be nice to this to work as currently trying to get SVG files to work in Elements takes way to much messing around.

[Doobox (Doobox Software)]

Try this one with the addition of convert transforms did you inspect the svg in a code editor to check if it was processed. If there is no width and height attribute at the start of the avg tag, then it was processed.

EDIT: I can’t find an issue with the configuration above though. I tried with all kinds of transforms and all good.

module.exports = {
	path: currentFile,
	multipass: true,
	plugins: [
		{
			name: 'preset-default',
			params: {
				overrides: {
					inlineStyles: {
						onlyMatchedOnce: false,
					},
					convertStyleToAttrs: true,
					cleanupListOfValues: true,
					removeViewBox: false,
					removeDimensions: true,
					cleanupEnableBackground: false,
					removeHiddenElems: false,
					convertShapeToPath: false,
					moveElemsAttrsToGroup: false,
					moveGroupAttrsToElems: false,
					convertPathData: false,
					sortAttrs: true,
					convertColors: {
						currentColor: true,
					},
					removeAttrs: {
						attrs: ['stroke-width', 'stroke-linejoin', 'stroke-miterlimit'],
					},
				}
			}
		},
		{
			name: 'removeDimensions',
		},
		{
			name: 'addAttributesToSVGElement',
			params: {
				attributes: [
					{ fill: 'currentColor' },
					{ stroke: 'currentColor' },
					{ 'style': 'fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' }
				]
			}
		}
	],
};

[Beblebroks (Nicolas)]

Hi @Doobox

yeah it took me an hour or two as well till I figured it out. The missing feature in Sketch is to set the color to currentColor. Which is a feature people requested already for quite some time.

My settings might not be perfect it was a start which took me to where I wanted. I will try your settings as well to see if that improves the output.

The documentation was very limited on the plugin site and I had to go through the source code to get it up and running.

The reason why I am not using currentColor is because that will convert all colors to currentColor which might not be what you want.

Thanks for the add ons.

[Beblebroks (Nicolas)]

As long as the exported color is black. The color gets removed and then it will work with the Elements Color selector.

What I am trying to do right now is to move the design color into a mask so my exported icons will always stay black not there yet but that might be a solution.

[Doobox (Doobox Software)]

I like currentColor as it gives the option to turn of the fill selector in Elements and just inherit the current text colour :

[Beblebroks (Nicolas)]

Its not that easy to keep design aligned and exports possible. Made a short video, I just think its too complicated. But when adding slices or preset exports on a symbol in sketch it does not transfer it to the document where its beeing used. So I added an artboard template that holds the structure just to copy it out. But yeah hope the video is self explanatory.

[Beblebroks (Nicolas)]

.. I mean if I use a mask for the color, then I can also just use currentColor as you did and remove all other colors. Thought was just to find a way not to have to turn the plugin in on and off the whole time.

Which means now I spend more time to restructure and name the stuff then just turning it on or off. But since the slices need to be added anyway. Oh well … not there yet to know how I will use it.

And just realized. That would not work then with the inherit of the curren textcolor. So yeah will definitely add that.

[Doobox (Doobox Software)]

@Beblebroks

Thought was just to find a way not to have to turn the plugin in on and off the whole time.

If I forget in a month, try and export a red svg, and it comes out black, I’ll have a “Huh?” moment, followed by a “Ahhhh!”.

[handshaper (Robin Mair)]

@Doobox

EDIT: I can’t find an issue with the configuration above though. I tried with all kinds of transforms and all good.

I did inspect the result and it clearly had done the processing with the settings. The addition of the option to remove transforms did not however appear to work as there is still a transform that is doing a tranlation of the origin of the SVG. If I then take the output and run it through OSVG I can end up with a nice compact SVG that works with Elements. The presence of the transform causes the SVG to not work in Elements.

Probably something I’m doing wrong. I have being testing Sketch to see if it would provide a better workflow for creating SVG icons. But I think I’ll got back to Affinity Designer, even though it generates bloated SVG files. OSVG cleans those up though.

Here is the SVG code that was generated with your latest settings for SVGO.

<svg viewBox="0 0 32 27" xmlns="http://www.w3.org/2000/svg" fill="currentColor" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M6.5025,1.68267402 C4.0215,-0.080536998 0,-1.44522409 0,2.89736317 C0,3.76499828 0.525,10.1810864 0.834,11.2222485 C1.9035,14.8442575 5.529,15.2663105 9,14.7060241 C2.9325,15.6839518 1.6665,19.4236062 4.9995,22.6617969 C6.5445,24.1588351 7.869,25 9,25 C12,25 13.701,20.9279972 14.25,19.853012 C14.7495,18.8721432 15,18.1368592 15,17.6471601 C15,18.1368592 15.2505,18.8721432 15.75,19.853012 C16.299,20.9279972 18,25 21,25 C22.131,25 23.4555,24.1603057 25.0005,22.6617969 C28.3335,19.4221356 27.0675,15.6824812 21,14.7060241 C24.471,15.2648399 28.095,14.8442575 29.166,11.2222485 C29.475,10.1810864 30,3.76352772 30,2.89736317 C30,-1.44522409 25.98,-0.080536998 23.4975,1.68267402 C20.058,4.12675801 16.3575,9.10610121 15,11.7648881 C13.6425,9.10610121 9.942,4.12675801 6.5025,1.68267402 Z" stroke="currentColor" transform="translate(1 1)" fill="none" stroke-linecap="round"/></svg>

[Doobox (Doobox Software)]

The SVG code you provided works fine in Elements.

What I think you’r overlooking is that your SVG code creates a path and only a path, there is no fill. So in Elements you need to set the stroke to 1

I’d normally do this step in Sketch app, before export:

[dan (Dan C.)]

Wow, I’ve used Sketch for years, but never installed the SVGO plugin @Doobox, @Beblebroks, Thanks for the tip (and the config files), it’s super helpful.

I’ve included a link to this thread on the SVG Component page in the manual!

[Beblebroks (Nicolas)]

Hi @doobox, @dan

I am preparing a Sketch plugin that is based on the one provided by Sketch, Its more or less a copy paste of theirs, but adding an option over shortcuts to set the settings to export normal, currentColor, minified.

Not yet done and not sure how to publish it yet

@dan .. can I use the elements logo on it?

Name:
SVGO for Elements

Icon:

[dan (Dan C.)]

Of course you can! It’ll be awesome to have a recommend and easy way to wrangle SVG’s to play nicer with Elements

Looking forward to using it!

[Beblebroks (Nicolas)]

After looking a while into a lot of plugins, I realized the newest once are still 5 years old and most of the libraries and stuff has evolved ever since.

So not sure when I will have that ready. Even the old svg can not be compiled since it requires node 14. Which is deprecated now.

Nvm… If you comment out your own code .. forget about it and then wondering why it does not work … then thats all I have to say … ok back on track

[Beblebroks (Nicolas)]

Hi @Doobox,

why would you use those. I am just curious getting the plugin done right now.

@Doobox

name: 'addAttributesToSVGElement',
			params: {
				attributes: [
					{ fill: 'currentColor' },
					{ stroke: 'currentColor' },
					{ 'style': 'fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;' }
				]
			}

[Doobox (Doobox Software)]

In case the SVG lacks fill or stroke attributes. Unlikely, so could probably be omitted.

[Beblebroks (Nicolas)]

Disabled = Normal out as if plugin is disabled
Default = Settings as original from svgo + Toggle values
Custom = The file added to the Plugin folder merged with original once (no toggle values)

[Doobox (Doobox Software)]

Looks good, well done!