How to use svgo - 10 common examples

_self.onmessage = ({ data: { id, payload } }: { data: Data }) => {
  delete payload.settings.optimizeSvg;

  const plugins = Object.keys(payload.settings).filter(
    key => payload.settings[key]
  );

  try {
    const svgo = new SVGO({
      full: true,
      // @ts-ignore
      plugins
    });

    svgo.optimize(payload.value).then(result => {
      _self.postMessage({
        id,
        payload: result.data
      });
    });
  } catch (e) {
    if (IS_DEV) {
      console.error(e);
    }
    _self.postMessage({

async function optimizeSvgs(srcSvgData: SvgData[]) {
  // https://github.com/svg/svgo
  const optimizePass = new Svgo({});
  const processPass = new Svgo({
    full: true,
    plugins: [
      {
        addFillNoneCss: {
          type: 'perItem',
          fn: (item, params) => {
            if (!Array.isArray(params.attrs)) {
              params.attrs = [params.attrs];
            }
            if (item.isElem()) {
              item.eachAttr(attr => {
                if (attr.name === 'fill') {
                  if (attr.value === 'none') {
                    item.class.add('ionicon-fill-none');
                  }
                  item.removeAttr('fill');

'use strict';
import fs from 'fs';
import SVGO from 'svgo';
import { getProjectUrl } from '../helpers';

const dirList = ['src', 'Icon'];
const dirPath = getProjectUrl(...dirList, 'svgs'),
    // https://github.com/svg/svgo
    svgo = new SVGO({
        plugins: [
            {
                removeStyleElement: true,
            },
            {
                removeXMLNS: true,
            },
            {
                cleanupAttrs: true,
            },
            {
                removeDoctype: true,
            },
            {
                removeXMLProcInst: true,
            },

async function optimizeSvg(svg) {
  // configure svgo
  const svgo = new Svgo({
    plugins: [
      { convertShapeToPath: false },
      { mergePaths: false },
      { moveGroupAttrsToElems: false },
      { removeAttrs: { attrs: '(fill|stroke.*)' } },
    ],
  });

  const optimizedSvg = await svgo.optimize(svg);

  return optimizedSvg.data;
}

// rebuild element as <svg>
	element.name = 'svg';

	delete element.attr.id;

	element.attr.viewBox = element.attr.viewBox || document.attr.viewBox;

	element.attr.xmlns = 'http://www.w3.org/2000/svg';

	const xml = element.toString({
		compressed: true
	});

	// promise data URI
	return (opts.svgo
		? new Svgo(opts.svgo).optimize(xml)
	: Promise.resolve({ data: xml }))
	.then(result =&gt; `data:image/svg+xml;${opts.utf8 ? `charset=utf-8,${encodeUTF8(result.data)}` : `base64,${Buffer.from(result.data).toString('base64')}`}`);
}
</svg>

// Better to allow 0 for everything else, but switch to 1 for this plugin.
        plugin.params.floatPrecision = 1;
      } else {
        plugin.params.floatPrecision = floatPrecision;
      }
    }
  }

  const svg = cloneParsedSvg(parsedSvg);
  let svgData;
  let previousDataLength;

  while (svgData === undefined || svgData.length != previousDataLength) {
    previousDataLength = svgData && svgData.length;
    plugins(svg, {input: 'string'}, optimisedPluginsData);
    svgData = js2svg(svg, {
      indent: '  ',
      pretty: settings.pretty
    }).data;

    yield {
      data: svgData,
      dimensions: getDimensions(svg)
    };
  }
}

// 0 almost always breaks images when used on this plugin.
        // Better to allow 0 for everything else, but switch to 1 for this plugin.
        plugin.params.floatPrecision = 1;
      } else {
        plugin.params.floatPrecision = floatPrecision;
      }
    }
  }

  const svg = cloneParsedSvg(parsedSvg);
  let svgData;
  let previousDataLength;

  while (svgData === undefined || svgData.length != previousDataLength) {
    previousDataLength = svgData && svgData.length;
    plugins(svg, {input: 'string'}, optimisedPluginsData);
    svgData = js2svg(svg, {
      indent: '  ',
      pretty: settings.pretty
    }).data;

    yield {
      data: svgData,
      dimensions: getDimensions(svg)
    };
  }
}

removeStyleElement,
  removeScriptElement,
  // addAttributesToSVGElement,
};

// Set a global floatPrecision across all the plugins.
const floatPrecision = 6;
for (const plugin of Object.values(pluginsData)) {
  if (plugin.params && 'floatPrecision' in plugin.params) {
    plugin.params.floatPrecision = floatPrecision;
  }
}

// Tweak plugin params.
cleanupIDs.params.minify = false;
convertPathData.params.makeArcs = undefined;
convertPathData.params.transformPrecision = floatPrecision;
convertShapeToPath.params.convertArcs = true;
convertTransform.params.transformPrecision = floatPrecision;
inlineStyles.params.onlyMatchedOnce = false;
removeUselessStrokeAndFill.params.removeNone = true;

const optimizedPluginsData = (function () {
  return Object.values(pluginsData)
    .map(item => [item])
    .reduce((arr, item) => {
      const last = arr[arr.length - 1];
      if (last && item[0].type === last[0].type) {
        last.push(item[0]);
      } else {
        arr.push(item);
      }

removeScriptElement,
  // addAttributesToSVGElement,
};

// Set a global floatPrecision across all the plugins.
const floatPrecision = 6;
for (const plugin of Object.values(pluginsData)) {
  if (plugin.params && 'floatPrecision' in plugin.params) {
    plugin.params.floatPrecision = floatPrecision;
  }
}

// Tweak plugin params.
cleanupIDs.params.minify = false;
convertPathData.params.makeArcs = undefined;
convertPathData.params.transformPrecision = floatPrecision;
convertShapeToPath.params.convertArcs = true;
convertTransform.params.transformPrecision = floatPrecision;
inlineStyles.params.onlyMatchedOnce = false;
removeUselessStrokeAndFill.params.removeNone = true;

const optimizedPluginsData = (function () {
  return Object.values(pluginsData)
    .map(item => [item])
    .reduce((arr, item) => {
      const last = arr[arr.length - 1];
      if (last && item[0].type === last[0].type) {
        last.push(item[0]);
      } else {
        arr.push(item);
      }
      return arr;

removeScriptElement,
  // addAttributesToSVGElement,
  convertSvgToVd,
};

// Set a global floatPrecision across all the plugins.
const floatPrecision = 6;
for (const plugin of Object.values(pluginsData)) {
  if (plugin.params && 'floatPrecision' in plugin.params) {
    plugin.params.floatPrecision = floatPrecision;
  }
}

// Tweak plugin params.
cleanupIDs.params.minify = false;
convertPathData.params.makeArcs = undefined;
convertPathData.params.transformPrecision = floatPrecision;
convertShapeToPath.params.convertArcs = true;
convertTransform.params.transformPrecision = floatPrecision;
inlineStyles.params.onlyMatchedOnce = false;
removeUselessStrokeAndFill.params.removeNone = true;

const optimizedPluginsData = (function() {
  return Object.values(pluginsData)
    .map(item => [item])
    .reduce((arr, item) => {
      const last = arr[arr.length - 1];
      if (last && item[0].type === last[0].type) {
        last.push(item[0]);
      } else {
        arr.push(item);
      }