Extract Icon for Web: Optimizing SVGs and PNGs for Performance

Extract Icon: A Complete Guide to Exporting Vector Graphics

What this guide covers

• Formats & when to use them: SVG for scalable web/vector needs; PNG/WebP for raster previews and legacy support; PDF/AI/EPS for print or design handoff.
• Export settings: How to set SVG precision, remove metadata, flatten transforms, and choose export DPI for PNGs. When to use viewBox, preserveAspectRatio, and width/height attributes.
• Preparing icons in design apps: Steps for Figma, Sketch, Adobe XD, and Illustrator — naming layers, grouping, setting proper bounds, using slices or export presets.
• Batch export workflows: Using export presets, slices, and asset panels in design tools; organizing export folders; naming conventions and size variants (1x, 2x, 3x).
• Optimization: Minify SVGs with SVGO, remove unused IDs/classes, combine paths, and compress PNGs with pngquant/zopfli or WebP conversion for smaller files.
• Accessibility & semantics: Addingand in SVGs, using role=“img” and aria-hidden appropriately, and inline vs. external SVG considerations.
• Icon systems & components: Building an icon sprite, symbol system, or React/Vue component library; techniques for tree-shaking and lazy-loading icons.
• Automation & scripting: CLI tools (svgo, svg-sprite, sharp), npm scripts, and simple Node.js or Python scripts to batch export/convert and optimize assets.
• Troubleshooting: Fixing clipped paths, missing fonts, stroke alignment issues, and preserving sharpness at small sizes.

Quick export checklist

1. Align artboard to icon bounds and remove extra padding.
2. Name the layer/file with intended output name and size suffixes.
3. Choose SVG for vectors; PNG/WebP for raster; export multiple scales if needed.
4. Optimize SVGs (SVGO) and compress rasters (pngquant/webp).
5. Add accessibility tags for inline SVGs and test on target platforms.

Tools & commands (examples)

• SVGO: svgo icon.svg –multipass
• pngquant: pngquant –quality=65-80 icon.png
• sharp (Node): example script to export PNG/WebP from SVGs.