Home

Index

How to use the optimize function from svgo

Find comprehensive JavaScript svgo.optimize code examples handpicked from public code repositorys.

svgo.optimize is a function provided by the SVGO library that optimizes SVG images by removing unnecessary elements, attributes, and whitespace.

index.js

39
40
41
42
43
44
45
46
47
48
// normalize all escaped quote characters from svg attributes
// from <svg attr=\"value\"... /> to <svg attr="value"... />
// see: https://github.com/cssnano/cssnano/issues/1194
svg = svg.replace(escapedQuotes, '$1="$2"');

const result = optimize(svg, opts);

return {
  result: /** @type {import('svgo').Output}*/ (result).data,
  isUriEncoded,

315

+ 6 other calls in file

utils.js

GitHub: webpack-contrib/image-minimizer-webpack-plugin

1200
1201
1202
1203
1204
1205
1206
1207
1208
1209

/** @type {import("svgo").Output} */
let result;

try {
  result = optimize(original.data.toString(), encodeOptions);
} catch (error) {
  const originalError =
    error instanceof Error ? error : new Error(/** @type {string} */ (error));
  const newError = new Error(

182

+ 3 other calls in file

How does svgo.optimize work?

svgo.optimize is a function provided by the SVGO library that optimizes SVG images by removing unnecessary elements, attributes, and whitespace. When you call svgo.optimize, you provide an SVG file or string and a configuration object that specifies the options for optimization. The configuration object can include various options such as whether to remove metadata, comments, or empty groups, and whether to inline or remove certain styles and attributes. You can also specify custom plugins to perform additional optimizations or customizations. When optimizing an SVG file or string, svgo.optimize parses the input using an SVG parser, then applies a series of optimizations to the resulting DOM tree. These optimizations can include removing unused elements, optimizing attributes, and removing whitespace. After the optimizations are applied, the resulting SVG is serialized back to a string and returned as the result of the svgo.optimize function. Depending on the configuration options used, the resulting SVG may be significantly smaller and faster to load than the original file. Overall, svgo.optimize provides a powerful and customizable tool for optimizing SVG images, allowing you to improve the performance and efficiency of your web applications.

process-svgs.js

GitHub: zengm-games/facesjs

21
22
23
24
25
26
27
28
29
for (const file of files) {
  if (!file.endsWith(".svg")) continue;
  const key = path.basename(file, ".svg");

  const contents = fs.readFileSync(path.join(subfolder, file), "utf8");
  const result = await optimize(contents, {
    multipass: true,
    plugins: ["preset-default", "inlineStyles"],
  });

165

generate.js

GitHub: AlaskaAirlines/Icons

101
102
103
104
105
106
107
108
109
110
icon.svg = [icon.svg.slice(0, insertPos), `xmlns:xlink="${icon.xmlns_xlink}" `, icon.svg.slice(insertPos)].join('');
icon.svg = [icon.svg.slice(0, insertPos), `viewBox="${icon.viewBox}" `, icon.svg.slice(insertPos)].join('');
icon.svg = [icon.svg.slice(0, insertPos), ` `, icon.svg.slice(insertPos)].join('');

//optimize SVG
icon.svg = optimize(icon.svg, {
  plugins: [
    {
      name: 'preset-default',
      params: {

+ 9 other calls in file

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const fs = require("fs");
const SVGO = require("svgo");

// Read the SVG file
const input = fs.readFileSync("example.svg", "utf8");

// Create an SVGO instance with custom configuration
const svgo = new SVGO({
  plugins: [
    { name: "removeDoctype", active: true },
    { name: "removeComments", active: true },
    { name: "removeViewBox", active: false },
  ],
});

// Optimize the SVG file
svgo.optimize(input).then((result) => {
  // Write the optimized SVG to a new file
  fs.writeFileSync("example-optimized.svg", result.data);
});

In this example, an SVG file named example.svg is read using fs.readFileSync. An SVGO instance is then created with a custom configuration that specifies various plugins to use for optimization. The plugins array in the configuration object includes options for removeDoctype, removeComments, and removeViewBox. These plugins remove the DOCTYPE declaration, comments, and viewBox attribute from the SVG, respectively. svgo.optimize is then called on the input SVG, and the resulting optimized SVG is written to a new file using fs.writeFileSync. Note that svgo.optimize can be used with various configuration options and plugins to perform different types of optimization on SVG files, allowing you to customize the optimization process to meet the specific needs of your application.

build-icons.js

GitHub: kalimahapps/vue-icons

111
112
113
114
115
116
117
118
119
	occurrence = uniqueFileNames[variableName] + 1;
	variableNameKey = `${variableName}${occurrence}`;
}

let svgString = fs.readFileSync(filePath, 'utf8');
svgString = svgo.optimize(svgString, svgoSettings(attributes));

// Add name and data
uniqueFileNames[variableName] = occurrence;

+ 8 other calls in file

.eleventy.js

GitHub: iliana/iliana.fyi

171
172
173
174
175
176
177
178
179
180
// SVG icon loader, with svgo. this should be async but you can't use async shortcodes in macros
eleventyConfig.addNunjucksShortcode("svg", (svgPath, fillCurrent, className) => {
  const realPath = svgPath.includes("/")
    ? path.join(__dirname, "node_modules", svgPath)
    : path.join(__dirname, "content", "_includes", svgPath);
  return optimize(fs.readFileSync(realPath, "utf8"), {
    plugins: [
      { name: "preset-default" },
      {
        name: "removeAttrs",

+ 3 other calls in file

.eleventy.js

GitHub: arihantverma/arihantverma.com

296
297
298
299
300
301
302
303
304
305
}


if (src.slice(-3) === 'svg') {
  const inlineSvgHTML = await fetch(src).then(res => res.text())
  const optimizedSvg = optimize(inlineSvgHTML, {
    plugins: ["removeDimensions"]
  })

  return optimizedSvg.data;

generate.js

GitHub: jingeweb/jinge-antd-icons

39
40
41
42
43
44
45
46
47
48
try {
  filecnt = await fs.readFile(filepath);
} catch (ex) {
  continue;
}
const svg = svgo.optimize(filecnt, {
  plugins: [
    "removeTitle",
    "removeXMLProcInst",
    "removeDoctype",

+ 4 other calls in file

copy_source_worker.js

GitHub: fadi12321/test-for-deep-8

39
40
41
42
43
44
45
46
47
48
  }
  break;

case '.svg':
  const input = readFileSync(absoluteSource, 'utf-8');
  const result = optimize(input, {
    path: source,
    ...svgOptions,
  });
  if (result.error) throw new Error(result.error);

Other functions in svgo

Sorted by popularity

svgo.optimize is the most popular function in svgo (108 examples)

Other popular packages:

Home

About