porsager/rollup-plugin-svgo

✂️ A rollup plugin to import svg files processed with svgo

✂️ rollup-plugin-svgo

A rollup plugin to import svg files processed with svgo

SVG files, especially those exported from various editors, usually contain a lot of redundant and useless information. This can include editor metadata, comments, hidden elements, default or non-optimal values and other stuff that can be safely removed or converted without affecting the SVG rendering result.

Usage

npm i -D rollup-plugin-svgo

import svgo from 'rollup-plugin-svgo'

export default {
  plugins: [
    svgo(/* options */)
  ]
}

Options

If you want to skip any svgo processing you can pass

{
  raw: true
}

in options. This will import the svg content as is.

Other options are passed directly to svgo to toggle various svgo plugins. You can find all plugins here: https://github.com/svg/svgo#what-it-can-do

Svgo options are a bit verbose to write, so see the defaults used below for how to do it:

Defaults

{
  plugins: [{
    removeViewBox: false
  }, {
    removeDimensions: true
  }]
}

rollup-plugin-svgo's Issues

Invalid exports for Svelte

When using the plugin in the Svelte (Rollup) config, this is what the generated code file will look like with default settings:

export default undefined

And when using raw:

export default "export default \"/src/icons/rj45.svg\""

Without this plugin, the emitted module is export default "/path/to/image", which is the fallback for any file.
My suspicion is that the plugin resolves the SVG image in the same way and therefore receives no valid SVG as input. It would also be great if the plugin would print a warning in this case.

Security Vuln update (old svgo has a High │ Code Injection warning)

Fixed in svgo 1.2.2, just needs package.json update

svg/svgo@db45845

rollup-plugin-svgo depends on version of nth-check with security flaw

Github's dependabot is reporting a security flaw with one of the dendencies of this project. I think the fix is just to upgrade the svgo dependency to 2.8.0.

Here is a screenshot of the dependabot report:

update to svgo 3?

How to use, how to import

Can I ask you how to import an svg in my html?

npm package update

npm package still uses an older version of svgo compared with the used in this repo (according to package.json)

suggestion: how about creating an up-to-date package here with npm package registery at GitHub?

Leaving the SVG as SVG instead of converting to string

Seems like this plugin is currently doing two things:

1. Optimizing the SVG with SVGO
2. Converting it to a JS module and exporting the SVG as a string

The second step makes the plugin un-interoperable with other Rollup plugins that take SVGs as an input.

For example, rollup-plugin-htmlvue takes in SVGs, converts them into a Vue SFC, and lets the Vue plugin then compile it to a JS.

Wondering if this plugin can become more modular by letting the SVG remain a SVG file, and recommending that users that want to import the SVG as a string chain their plugins with something like rollup-plugin-string:

import { rollup } from 'rollup';
import { string } from 'rollup-plugin-string';
import svgo from 'rollup-plugin-svgo'

rollup({
  entry: 'image.svg',
  plugins: [
	// optimize SVG
    svgo(),

	// transform SVG to JS string
    string({
      include: '**/*.svg',
    }),
  ]
});

Although my use-case is with Vue.js, I can imagine this being useful for optimizing SVGs that compile to React or Svetle components too.

config option datauri ist completely ignored by SVGO

This leads to, e.g., rollup-plugin-svgo to never be able to utilize a base64 encoded datauri. I issued a corresponding PR for SVGO, see svg/svgo#1679