Svgo: Making svgo compatible with webpack web bundling.

[trozler]

I'm currently creating a pure client side website which tries to use svgo.
When bundling my project using webpack, I kept receiving the following error:
"Module not found: Error: Can't resolve 'fs'".

After some googling and learning, I realised bundling node.js code and web code, requires 2 different bundles. However, that didn't help me much as my website is entirely client side.

So I inspected svgo's source and I realised only very minor changes (a re-shifting of 'fs' dependencies) have to be made.
How/
The only uses of 'fs' that we care about occur in config.js and tools.js.
As coa.js will never be called.

• In tools.js the use of 'fs' can be removed, as the only use for the function checkIsDir is in coa.js. We also remove the function checkIsDir and add it to coa.js.
• In config.js, we can remove the use of 'fs', by .svg.yml, by creating a new file list-config.js.
  This file exports an object storing the plugins.

Now svgo remains a fully working node.js application, whilst also being friendly for web bundling.

This fork contains my minimal changes, which have been tested and work. (I do realise a lot of code could be pruned).
https://github.com/trozler/svgo

Disclaimer, this is the first time I'm contributing to some open source. So I apologies if I'm going about this the wrong way somehow. I do realise this may not even be classed as an issue as svgo is a node.js application after all.
Nevertheless, maybe someone will find this code useful at some point.

Best,
Tony

[strarsis]

@trozler: Also, how could SVGO process a SVG file in webpack, emit the resources inside, like inlined images for optimization by e.g. imagemin, and then assemble everything back? Can webpack do such things?

[trozler]

@strarsis You can inline svg files in your bundle quite easily using webpack. For example, using loaders such as "svg-url-loader" or if you want to use svgo to optimise the image and then inline you can use the svgo-loader.

Check out this link for how to inline images using webpack. Personally I don't use these loaders, as I prefer to optimise the image myself using the svgo CLI or svgomg.

So yes, loaders in webapck can be used to optimise your static SVG files and inline them in your bundle. However, these loaders are no help when you have to dynamically optimise svgs. For example, when you are dealing with user generated content.

In that case you would have to use the svgo library yourself, which is the issue at hand.

[strarsis]

@trozler: Right, what I mean is that webpack can extract resources inside the SVG file for further processing (like optimization).
Embedded/inline images in the SVG can be extracted and made external images, or optimized and re-embedded.

[trozler]

"webpack can extract resources inside the SVG file for further processing (like optimization)."

As mentioned before this is done using webpack loaders. For example, the svgo loader which looks for .svg files in your project and performs svgo optimisations. These files are then embedded in your bundle (.js) and the images can be inlined using simple javascript.

"Embedded/inline images in the SVG can be extracted and made external images, or optimized and re-embedded."

Inline images in the SVG? Do you mean we have a .svg file, and it has two or more <svg> images within it? By inlining I usually think of putting an image between some <svg> tags in a html document, either directly referencing the image in my workspace or referencing a base64/utf-8 encoded string.

If this is the case, then you could use the aforementioned svgo-loader to optimise the image. I'm not sure about "extracting and making external images", if by that you mean dividing a single .svg file into many .svg files. In theory this could be done through a loader, but I'm not sure it makes much sense as it seems unnecessary. Could just write a short script, to filter out the <svg> tags yourself, before adding the images to your project.

[strarsis]

@trozler: SVGs can contain raster images (like PNGs), this often happens when exporting a SVG from a vector format/program (like Illustrator) that supports more features than the currently supported SVG standard or what the exporter can manage.
In that case it can be really useful to extract all those raster images and make them external images of the SVG file,
so they can be reused and further optimized.

[trozler]

@strarsis Ohh I understand now. Yeh don't think there currently is a loader for that use case, would have to write your own.
But yes you could use thesvgo-loader to optimise these images, and it should behave the same way the svgo CLI does.