SVG优化与图标合并策略

SVG作为矢量图形的标准格式，因其缩放无损、体积小等特性被广泛应用于图标系统。合理优化SVG代码并合并多个图标能显著减少HTTP请求，提升页面加载性能，同时保持高清晰度渲染效果。

SVG基础优化技巧

原始SVG代码通常包含编辑器生成的冗余信息，手动清理可减少30%-70%的文件体积。典型优化点包括：

1. 删除元数据：移除<sodipodi:和<inkscape:等编辑器专用命名空间
2. 简化路径：用路径优化工具精简<path>的d属性

<!-- 优化前 -->
<path d="M 10 10 L 100 10 L 100 100 L 10 100 Z" fill="#000"/>

<!-- 优化后 -->
<path d="M10 10h90v90H10z" fill="#000"/>

3. 合并样式：将内联样式提取为CSS类

/* 全局样式 */
.icon {
  fill: currentColor;
  stroke-width: 1.5;
}

4. 限制精度：将transform="matrix(0.70710678, 0.70710678, -0.70710678, 0.70710678, 0, 0)"简化为transform="rotate(45)"

自动化优化工具链

构建阶段集成自动化工具能保证优化一致性：

# 使用SVGO进行基础优化
npm install -g svgo
svgo --input=raw.svg --output=optimized.svg

# 配置示例（.svgo.yml）
plugins:
  - removeDoctype
  - removeXMLProcInst
  - removeComments
  - removeMetadata
  - removeEditorsNSData
  - cleanupAttrs
  - convertStyleToAttrs
  - convertColors
  - convertPathData
  - convertTransform
  - cleanupNumericValues

对于React项目，可通过babel-plugin-inline-react-svg实现编译时优化：

// webpack配置
{
  test: /\.svg$/,
  use: [
    { loader: 'babel-loader' },
    { 
      loader: 'react-svg-loader',
      options: {
        svgo: {
          plugins: [{ removeTitle: false }],
          floatPrecision: 2
        }
      }
    }
  ]
}

图标合并策略

雪碧图方案

传统CSS雪碧图技术可适配SVG：

/* sprite.css */
.icon {
  width: 24px;
  height: 24px;
  background: url(sprite.svg) no-repeat;
}
.icon-home {
  background-position: 0 0;
}
.icon-user {
  background-position: -24px 0;
}

SVG Symbol系统

更现代的方案是使用<symbol>元素合并：

<!-- sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="icon-home" viewBox="0 0 24 24">
    <path d="M3 10l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  </symbol>
  <symbol id="icon-user" viewBox="0 0 24 24">
    <path d="M12 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>
  </symbol>
</svg>

使用时通过<use>引用：

<svg class="icon">
  <use xlink:href="sprite.svg#icon-home"></use>
</svg>

动态加载方案

对于SPA应用，可采用按需加载策略：

// 动态加载SVG片段
function loadIcon(name) {
  return fetch(`/icons/${name}.svg`)
    .then(r => r.text())
    .then(svg => {
      const parser = new DOMParser();
      const doc = parser.parseFromString(svg, 'image/svg+xml');
      return doc.querySelector('svg').innerHTML;
    });
}

// 使用示例
loadIcon('search').then(content => {
  document.getElementById('icon-container').innerHTML = content;
});

性能对比实测

通过Lighthouse测试不同方案的性能表现：

高级优化技巧

1. 响应式尺寸控制：

.icon-container {
  width: 1em;
  height: 1em;
}
svg {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

2. 主题色控制：

.icon {
  fill: currentColor;
}
/* 使用时 */
<button>
  <svg class="icon"><use href="#icon-download"></use></svg>
  下载
</button>

3. 动画性能优化：

<svg>
  <rect width="10" height="10">
    <animate attributeName="x" values="0;100" dur="1s" repeatCount="indefinite"/>
  </rect>
</svg>

4. 阴影优化： 避免使用滤镜阴影，改用CSS阴影：

.icon {
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}

浏览器兼容实践

针对旧版IE的降级方案：

<!--[if IE 9]>
  <img src="fallback.png" alt="icon">
<![endif]-->
<!--[if !IE]>-->
  <svg>...</svg>
<!--<![endif]-->

配合Modernizr检测：

if (!Modernizr.svg) {
  $('img[src$=".svg"]').each(function() {
    $(this).attr('src', $(this).attr('src').replace('.svg', '.png'));
  });
}

设计协作规范

建立设计师与开发者的协作规则：

1. 统一使用viewBox="0 0 24 24"标准尺寸
2. 命名约定：icon-功能-状态.svg（如icon-check-active.svg）
3. 颜色使用currentColor继承文本色
4. 提交前删除隐藏图层和未使用元素

构建流程集成

Webpack完整配置示例：

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-sprite-loader',
            options: {
              extract: true,
              spriteFilename: 'sprite-[hash:6].svg'
            }
          },
          'svgo-loader'
        ]
      }
    ]
  },
  plugins: [
    new SpriteLoaderPlugin()
  ]
};

动态色彩控制

通过CSS变量实现运行时换色：

:root {
  --icon-primary: #3a7bd5;
  --icon-secondary: #00d2ff;
}

.icon-gradient {
  fill: url(#gradient);
}

<svg style="display:none">
  <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="var(--icon-primary)"/>
    <stop offset="100%" stop-color="var(--icon-secondary)"/>
  </linearGradient>
</svg>

可访问性增强

确保SVG图标可被屏幕阅读器识别：

<svg role="img" aria-labelledby="title desc">
  <title id="title">下载图标</title>
  <desc id="desc">点击下载当前文件</desc>
  <path d="..."/>
</svg>

对于纯装饰性图标：

<svg aria-hidden="true" focusable="false">
  <path d="..."/>
</svg>