SVG Icons for Product Sites: Measure Before You Optimize

Choose graphics that suit SVG

Rating stars, navigation icons, and simple category symbols can be represented with a small number of paths. Product photography usually contains texture and shading that is better suited to a raster image. Evaluate the actual graphic rather than assuming that SVG will always be smaller.

If you already have a vector source, export from it. If you only have pixels, tracing approximates their shapes. An SVG can also contain an embedded raster image, so the filename alone does not demonstrate vectorization. MDN documents SVG image embedding.

A downloadable file-size comparison

We created the shopping bag below as a simple SVG, rasterized it into a 512 × 512 PNG, and optimized the SVG with SVGO. These are measured file sizes for this one vector-authored icon. This is not a raster-to-vector tracing benchmark or a measurement of a customer website.

PNG generation used Sharp 0.34.3 at compression level 9; SVG optimization used SVGO 4.0.0 with multiple passes. Gzip sizes exclude HTTP headers and do not describe the compression your server actually uses. PNG already contains compressed image data.

Download the reproduction script and source.svg into the same directory. Install the Sharp and SVGO versions above and run the script with Node.js to regenerate the files and measurement record. Package and runtime versions can affect the resulting bytes.

Measure the page, not just the icon

1. Choose a real page and note its viewport, network settings, and browser version. Capture a baseline before replacing assets.
2. Find the image requests in the Network panel. Record transferred bytes, resource sizes, and cache behavior. The Chrome Network reference explains those measurements.
3. Replace one suitable asset. Preserve layout dimensions, visual appearance, and the accessible name where needed.
4. Repeat under the same conditions. Separate cold-cache and warm-cache runs; use several runs to see normal variation.
5. Check the whole page. A smaller icon may have little effect if a photograph, script, or server response dominates loading.

Do not translate a byte reduction directly into a ranking, conversion-rate, or loading-time promise. Those outcomes require their own measurements. A local laboratory comparison also does not establish what real visitors experience.

Pick an embedding approach deliberately

An external SVG image can be reused and cached as a separate resource. Inline SVG gives the page access to its shapes for styling, but repeating the same markup increases HTML size. A symbol-based sprite can share geometry when your implementation supports it.

Choose based on reuse, styling requirements, and measured payload. Give informative graphics an accessible name and mark purely decorative graphics appropriately. Check keyboard and screen-reader behavior when an icon is part of a control.

Use the existing vector when available

For a source SVG, start with the SVG optimization guide. For a raster logo or flat icon, try image tracing and compare its output. Keep photography in an appropriate raster format and choose formats by the content they need to preserve.