{"id":20596,"library":"svgo-loader","title":"svgo-loader","description":"A webpack loader for optimizing SVG files using SVGO (Squeeze SVG). Current stable version is 5.0.0, which requires SVGO v4 and Webpack 4/5. Release cadence is irregular with major version bumps tied to SVGO major releases. Key differentiators: directly integrates SVGO optimization into webpack build pipeline, supports config file loading (e.g., svgo.config.js), and allows inline options override. Unlike other SVG optimization plugins, it delegates all configuration to SVGO's standard format.","status":"active","version":"5.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/svg/svgo-loader","tags":["javascript","svgo","webpack"],"install":[{"cmd":"npm install svgo-loader","lang":"bash","label":"npm"},{"cmd":"yarn add svgo-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add svgo-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency - SVGO is the core optimization library. Must be installed separately.","package":"svgo","optional":false},{"reason":"Peer dependency - requires webpack to function.","package":"webpack","optional":false}],"imports":[{"note":"This is a webpack loader, not a JavaScript module. It is used via webpack configuration, not imported in source code.","wrong":"import svgoLoader from 'svgo-loader'","symbol":"Loader","correct":"module.exports = { module: { rules: [ { test: /\\.svg$/, loader: 'svgo-loader', options: { ... } } ] } }"},{"note":"There is no JavaScript import available. The loader is referenced by string in webpack config rules.","symbol":"Plugin","correct":"No plugin import needed. Use as loader in webpack config."},{"note":"SVGO configuration is external, not provided by svgo-loader package.","wrong":"const config = require('svgo-loader/config.js')","symbol":"Config","correct":"Use svgo.config.js file or pass options directly in webpack config."}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.svg$/,\n        type: 'asset',\n        loader: 'svgo-loader',\n        options: {\n          configFile: false, // disable external config\n          multipass: true,\n          js2svg: { indent: 2, pretty: true },\n          plugins: [\n            'removeDoctype',\n            'removeXMLProcInst',\n            'removeComments',\n            'removeMetadata',\n            'removeEditorsNSData',\n            'cleanupAttrs',\n            'inlineStyles',\n            'minifyStyles',\n            'convertStyleToAttrs',\n            'cleanupIDs',\n            'removeRasterImages',\n            'removeUselessDefs',\n            'cleanupNumericValues',\n            'convertColors',\n            'removeUnknownsAndDefaults',\n            'removeNonInheritableGroupAttrs',\n            'removeUselessStrokeAndFill',\n            'removeViewBox',\n            'cleanupEnableBackground',\n            'removeHiddenElems',\n            'removeEmptyText',\n            'convertShapeToPath',\n            'convertEllipseToCircle',\n            'moveElemsAttrsToGroup',\n            'moveGroupAttrsToElems',\n            'collapseGroups',\n            'convertPathData',\n            'convertTransform',\n            'removeEmptyAttrs',\n            'removeEmptyContainers',\n            'mergePaths',\n            'removeUnusedNS',\n            'sortAttrs',\n            'sortDefsChildren',\n            'removeTitle',\n            'removeDesc',\n            'removeDimensions',\n            'removeAttrs',\n            'removeElementsByAttr',\n            'addClassesToSVGElement',\n            'addAttributesToSVGElement',\n            'removeOffCanvasPaths',\n            'removeStyleElement',\n            'removeScriptElement',\n            'reusePaths'\n          ]\n        }\n      }\n    ]\n  }\n};","lang":"javascript","description":"Basic webpack configuration to optimize SVGs with SVGO, disabling external config and providing inline plugin list and options."},"warnings":[{"fix":"Update SVGO plugin configurations to be compatible with SVGO v4 format.","message":"Version 5.0.0 switches to SVGO v4, which has breaking changes from SVGO v3. See SVGO v4 changelog for plugin updates.","severity":"breaking","affected_versions":">=5.0.0 <5.0.0"},{"fix":"Upgrade to webpack 5 or pin to svgo-loader@3.x.","message":"Version 4.0.0 removes Webpack 4 support. Only webpack 5 is supported.","severity":"breaking","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Review SVGO v3 migration guide and update plugin list accordingly.","message":"Version 4.0.0 switched to SVGO 3, which changed the plugin format from SVGO 2. Plugins must be specified differently.","severity":"breaking","affected_versions":">=4.0.0 <5.0.0"},{"fix":"Add type: 'asset' to your rule configuration.","message":"The loader expects a 'type: asset' or 'type: asset/resource' rule to emit the file; otherwise no output.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Explicitly set configFile: false or create a valid svgo.config.js.","message":"If configFile is not set, the loader looks for svgo.config.js which may not exist, causing errors.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install svgo --save-dev' or 'yarn add svgo -D'.","cause":"svgo is a peer dependency not automatically installed.","error":"Module not found: Error: Can't resolve 'svgo'"},{"fix":"Set configFile: false in loader options to disable default config loading.","cause":"Loader searches for svgo.config.js by default but file missing.","error":"Error: SVGO config not found at /path/to/svgo.config.js"},{"fix":"Ensure rule has only one type property (e.g., 'type: asset') and 'loader' specified.","cause":"Conflict when both 'type: asset' and 'loader' are used improperly.","error":"Error: Rule can only have one source, but found more than one (asset, svgo-loader)"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}