How SVG Optimizers Strip Raster Images to Reduce Size

Vector optimization tools significantly reduce SVG payload sizes by identifying and removing embedded raster graphics, which are often unintentionally packed into vector files as heavy Base64-encoded strings. When graphics software exports SVGs containing bitmap elements, the resulting markup balloons in size due to encoded data streams. Optimization tools process the underlying XML DOM to detect these elements, strip the Base64 payloads, remove orphaned references, and output clean, lightweight vector code.

The Problem with Embedded Bitmaps in SVGs

When a raster image (such as a PNG or JPEG) is placed into a vector design canvas, software like Adobe Illustrator or Figma often embeds it directly into the SVG using an <image> tag. To make the SVG standalone, the raster binary data is encoded into Base64 within the href or xlink:href attribute.

Base64 encoding increases the raw binary file size by approximately 33%. A single uncompressed PNG embedded in this manner can turn a lightweight 5 KB vector graphic into a multi-megabyte payload, destroying the performance benefits of using SVG.

Step 1: XML Parsing and Node Identification

Vector optimizers (such as SVGO, Scour, or custom build-pipeline scripts) treat the SVG strictly as structured XML. The tool parses the document into a Document Object Model (DOM) tree and scans specifically for elements that host bitmap data:

• <image> elements that render external or inline bitmaps.
• <feImage> filter primitives used to apply raster textures or effects.
• <pattern> elements containing raster fills.

The parser inspects the href and xlink:href attributes of these elements. If the attribute begins with a data:image/ Data URI scheme, the optimizer flags it as an embedded raster payload.

Step 2: Removal and Attribute Stripping

Depending on the optimization configuration, tools employ different strategies to handle the detected raster data:

• Complete Node Removal: If configured to eliminate raster data entirely, the optimizer drops the <image> node and any parent wrappers that served only to position that raster.
• Externalization: Advanced optimizers decode the Base64 string back into its original binary format, save it as an external file (such as .webp or .png), and replace the massive inline Data URI with a compact relative URL reference (e.g., href="asset.webp").
• Empty Tag Stripping: If the raster was used as a hidden layer or an invisible tracing template, the tool deletes the element entirely without affecting visual rendering.

Step 3: Cascading Cleanup and Structural Optimization

Simply removing an <image> tag can leave behind invalid or redundant code. Vector optimizers perform automated post-removal cleanup:

• Orphaned Clip Paths and Masks: Removing <clipPath> or <mask> elements that only applied to the stripped raster image.
• Unused Definitions (<defs>): Deleting raster patterns, filters, or linear gradients that were mapped solely to the removed bitmap.
• Namespace Declarations: Stripping redundant namespace declarations, such as xmlns:xlink="http://www.w3.org/1999/xlink", if no remaining elements require the xlink specification.
• Empty Structural Tags: Collapsing empty <g> (group) tags that previously enclosed the embedded image.

Performance Impact

Stripping embedded raster graphics from SVG files yields immediate performance gains. Eliminating large Base64 strings regularly reduces SVG payload sizes by 80% to 99%. This reduction lowers network bandwidth usage, accelerates DOM parsing times, and minimizes browser memory overhead during vector rendering.