Blog · Production SVG
A smaller SVG is useful only if it remains the same graphic.
Treat optimization as a tested transformation of geometry, styling, references, accessibility, and trust boundaries—not as blind text removal.
Define what must survive before removing anything.
SVG can carry visible geometry, reusable definitions, CSS hooks, text alternatives, links, animation, metadata, and editor-specific state. Some of that is unnecessary in a delivery asset; some is the reason the asset works. Optimization begins with a contract for appearance, responsive sizing, interactivity, accessibility, and supported embedding methods.
Measure more than the source byte count. Network compression rewards repeated text, while rendering cost depends on element count, path complexity, filters, masks, and paint effects. Combining every shape into one enormous path may reduce tags yet make editing, accessibility, hit testing, or incremental rendering worse.
References and IDs form a dependency graph.
Gradients, clip paths, masks, filters, markers, symbols, and use elements commonly refer to IDs through fragment URLs. CSS selectors, aria-labelledby, aria-describedby, and links can depend on the same identifiers. Renaming or removing an ID safely requires updating every reference, including references inside style elements and attributes.
Inline SVGs share an HTML document and can collide when copied components reuse generic IDs such as gradient or clip. Prefixing IDs per asset avoids one icon resolving another icon’s definition. External SVG files have a separate document scope, so the correct strategy depends on how the file will be embedded.
- Trace URL fragments before deleting definitions
- Preserve IDs used by CSS, scripts, links, or accessibility relationships
- Remove an unused definition only after checking the complete document
Collapse styles only when inheritance remains equivalent.
Presentation attributes and CSS properties participate in the cascade and inheritance. Moving a fill from several children to a group can be correct, but only if no child overrides it and no referenced instance depends on a different inherited value. currentColor is especially useful for icons because it lets the surrounding interface supply the colour without rewriting the SVG.
Converting every style into inline attributes may increase repetition and can defeat theme classes. Converting every attribute into a style block can make isolated reuse harder. Choose a representation for the delivery context, then test inherited fill, stroke, opacity, vector effects, markers, and custom properties.
Accessibility depends on meaning and embedding.
A decorative SVG should be hidden from assistive technology so it does not add noise. A meaningful inline graphic needs an accessible name, commonly through a title associated with aria-labelledby or a direct aria-label, and may use desc for a longer explanation. Complex diagrams need visible surrounding text as well; a hidden description cannot replace all of their relationships and data.
When SVG is loaded through an HTML image element, the image element’s alt text is the primary web-page alternative. Inline SVG exposes its own semantic structure and can use roles, labels, and focusable interactive elements. Do not retain empty title or desc elements: they can create nameless objects instead of useful alternatives.
- Decorative graphic: remove it from the accessibility tree
- Meaningful image: provide a concise accessible name
- Complex information: provide an equivalent visible explanation
Treat untrusted SVG as active content.
SVG is XML-based graphics, but it can also contain scripts, event attributes, foreignObject content, links, styles, and references to external resources. Browser restrictions differ between an SVG used as an image, an inline SVG, and a document loaded through object or iframe. A file that appears harmless in an image preview can gain capabilities in another embedding context.
Do not sanitize untrusted SVG with a few string replacements. Parse it with a maintained sanitizer and an explicit allowlist suited to the intended use. Remove scripting and event handlers, constrain URL-bearing attributes, decide whether foreignObject and external resources are allowed, and serve the result with the expected content type and security policy.
Validate the result as a graphic and as a document.
Compare before and after rendering at multiple sizes and backgrounds. Check viewBox bounds, thin strokes, joins, clipping, masks, filters, gradients, markers, text, and transparent edges. Geometry outside the nominal viewBox may still contribute through strokes or filter effects, so automatic cropping can remove visible pixels.
Then validate references, accessible names, keyboard behaviour where applicable, and the absence of forbidden active content. Keep the source asset and the optimization settings reproducible. An optimization that cannot explain what it removed or prove the resulting contract is difficult to trust.
- Render at target sizes and at high zoom
- Test light, dark, and transparent backgrounds
- Check fragment references and ID uniqueness
- Run accessibility and security checks for the actual embedding mode