Clean Namespaces and Editor Metadata from SVG

Vector design tools like Adobe Illustrator, Inkscape, and Figma often inject proprietary metadata, editor-specific tags, and unused XML namespaces into SVG files during export. This article explores practical methods for cleaning up and stripping this redundant data to reduce file sizes, prevent rendering conflicts, and produce clean, web-ready SVG code.

1. Automated Optimization with SVGO

SVGO (SVG Optimizer) is the Node.js-based industry standard for stripping editor artifacts, unneeded namespaces, and metadata from SVG files.

Using the SVGO Command-Line Interface

Install SVGO globally or run it directly using npx:

npx svgo input.svg -o output.svg

SVGO applies a series of default plugins that automatically target editor bloat, including: - removeXMLNS: Strips unnecessary XML namespace declarations when not required. - removeEditorsNSData: Deletes editor-specific namespace data (such as Inkscape, Sodipodi, and Illustrator attributes). - removeMetadata: Drops the <metadata> tag and all contained content. - removeComments: Removes code comments left by software.

To configure specific cleanup tasks, define an svgo.config.js file:

module.exports = {
  plugins: [
    'removeMetadata',
    'removeEditorsNSData',
    {
      name: 'cleanupIds',
      params: {
        remove: true,
        minify: true,
      },
    },
  ],
};

2. Web-Based GUI Tools (SVGOMG)

If you prefer a graphical interface without running command-line tools, SVGOMG provides a browser-based implementation of SVGO.

Upload the SVG or paste the raw markup.
Toggle the Clean up attributes, Remove metadata, and Remove editor data switches.
Inspect the live diff to ensure no visual regressions occurred.
Copy the sanitized SVG string or download the cleaned file.

3. Dedicated Python Tools: Scour

Scour is an open-source Python script designed specifically to sanitize SVG files by removing namespaces, styling overhead, and metadata.

Run Scour from the command line:

scour -i input.svg -o output.svg --remove-metadata --enable-comment-stripping --strip-xml-prolog

Key flags for metadata removal: - --remove-metadata: Clears all <metadata> blocks (e.g., RDF/Dublin Core data). - --strip-xml-prolog: Strips <?xml version="1.0" ... ?> headers. - --strip-xml-space: Removes xml:space="preserve" attributes.

4. Proper Export Settings in Vector Editors

Sanitizing SVG files at the point of creation prevents unwanted data from entering production workflows.

Inkscape: Instead of saving as standard “Inkscape SVG”, choose File > Save As and select Optimized SVG (.svg) or Plain SVG (.svg). The “Optimized” setting triggers an internal Scour pass that removes Sodipodi and Inkscape-specific nodes.
Adobe Illustrator: Use File > Export > Export for Screens or File > Export > Export As, choose SVG, and open the settings dialog. Deselect “Responsive” if fixed dimensions are required, and ensure options like “Include Illustrator Data” or “Preserve Editability” are unchecked.

5. Manual Cleanup with a Text Editor

For single SVG files or lightweight components, manual removal in a code editor is straightforward. Look for and delete the following elements:

Namespace Declarations

Delete non-standard namespace definitions inside the opening <svg> tag:

<!-- Remove attributes like these: -->
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/"
xmlns:x="adobe:ns:meta/"

Metadata and Editor Blocks

Delete top-level nodes dedicated exclusively to software state: - <metadata>...</metadata>: Often holds licensing, author, or RDF info. - <sodipodi:namedview ... />: Stores canvas zoom, grid, and window state for Inkscape. - : Safe to remove. - <foreignObject> or <i:pgf>: Proprietary binary/illustrator data tags.