SVG optimization and icon merging strategies

SVG, as the standard format for vector graphics, is widely used in icon systems due to its lossless scaling and small file size. Properly optimizing SVG code and merging multiple icons can significantly reduce HTTP requests, improve page loading performance, and maintain high-definition rendering quality.

Basic SVG Optimization Techniques

Original SVG code often contains redundant information generated by editors. Manual cleanup can reduce file size by 30%-70%. Typical optimization points include:

1. Remove Metadata: Delete editor-specific namespaces like <sodipodi: and <inkscape:.
2. Simplify Paths: Use path optimization tools to streamline the d attribute in <path> elements.

<!-- Before optimization -->
<path d="M 10 10 L 100 10 L 100 100 L 10 100 Z" fill="#000"/>

<!-- After optimization -->
<path d="M10 10h90v90H10z" fill="#000"/>

3. Merge Styles: Extract inline styles into CSS classes.

/* Global styles */
.icon {
  fill: currentColor;
  stroke-width: 1.5;
}

4. Limit Precision: Simplify transform="matrix(0.70710678, 0.70710678, -0.70710678, 0.70710678, 0, 0)" to transform="rotate(45)".

Automated Optimization Toolchain

Integrating automated tools during the build phase ensures consistent optimization:

# Use SVGO for basic optimization
npm install -g svgo
svgo --input=raw.svg --output=optimized.svg

# Configuration example (.svgo.yml)
plugins:
  - removeDoctype
  - removeXMLProcInst
  - removeComments
  - removeMetadata
  - removeEditorsNSData
  - cleanupAttrs
  - convertStyleToAttrs
  - convertColors
  - convertPathData
  - convertTransform
  - cleanupNumericValues

For React projects, use babel-plugin-inline-react-svg for compile-time optimization:

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

Icon Merging Strategies

Sprite Sheet Approach

Traditional CSS sprite techniques can be adapted for 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 System

A more modern approach uses <symbol> elements for merging:

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

Reference icons using <use>:

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

Dynamic Loading Strategy

For SPAs, implement on-demand loading:

// Dynamically load SVG fragments
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;
    });
}

// Usage example
loadIcon('search').then(content => {
  document.getElementById('icon-container').innerHTML = content;
});

Performance Comparison

Lighthouse test results for different approaches:

Advanced Optimization Techniques

1. Responsive Size Control:

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

2. Theme Color Control:

.icon {
  fill: currentColor;
}
/* Usage */
<button>
  <svg class="icon"><use href="#icon-download"></use></svg>
  Download
</button>

3. Animation Performance Optimization:

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

4. Shadow Optimization: Avoid filter shadows; use CSS shadows instead:

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

Browser Compatibility Practices

Fallback for older IE versions:

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

With Modernizr detection:

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

Design Collaboration Guidelines

Establish rules for designers and developers:

1. Use a standard viewBox="0 0 24 24" size.
2. Naming convention: icon-function-state.svg (e.g., icon-check-active.svg).
3. Use currentColor to inherit text color.
4. Delete hidden layers and unused elements before submission.

Build Process Integration

Complete Webpack configuration example:

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()
  ]
};

Dynamic Color Control

Use CSS variables for runtime color changes:

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

Accessibility Enhancements

Ensure SVG icons are recognizable by screen readers:

<svg role="img" aria-labelledby="title desc">
  <title id="title">Download Icon</title>
  <desc id="desc">Click to download the current file</desc>
  <path d="..."/>
</svg>

For purely decorative icons:

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