SVG is often appropriate for simple interface geometry, but it is not an automatic replacement for every raster asset. Complex exported vectors can carry thousands of paths, hidden editor metadata, or inaccessible semantics. A delivery test must inspect markup and rendering as well as bytes.
Choose a maintainable icon format for a defined component set and reuse pattern.
Repeatable method
1. Inventory the icon set
Separate simple monochrome UI symbols from detailed illustrations, photos, and brand assets with strict usage rules. Count how many icons appear above the fold.
2. Create equivalent candidates
Export PNG at the required pixel densities. Optimize the SVG viewBox and remove editor metadata without changing its visible geometry.
3. Test three delivery patterns
Compare inline SVG, external SVG files, and PNG img elements. Record transferred bytes with a cold cache and again with a warm cache.
4. Check semantics
Decorative icons should be hidden from assistive technology; meaningful icons need an accessible name or adjacent visible label. Do not rely on the icon shape alone for a critical action.
Icon delivery comparison sheet
Use one simple icon and one comparatively complex icon in the same labelled control. The filenames and sizes you record are test fields, not example results.
Icon delivery checks
- Rendering: compare the same icon at intended sizes, browser zoom, and relevant pixel densities.
- Delivery: record request count and cold- and warm-cache bytes for inline SVG, external SVG, and PNG candidates.
- Reuse: note whether markup is repeated in HTML or shared through a cacheable external file.
- Accessibility: hide decorative icons and give meaningful icons an accessible name appropriate to their context.
- Operations: document sanitization, CSP, CSS theming, and the update path.
- Decision rule: choose by icon role and delivery pattern; no format wins every case.
Render every candidate in the same CSS slot, with the same visible label, color, and interaction state. Clear the cache for the cold pass, reload once for the warm pass, and record transferred bytes rather than source-file size alone. At 100% and 200% browser zoom, inspect alignment, stroke clarity, and any raster softness. Then use keyboard navigation and the accessibility tree to confirm that a decorative icon is hidden or that a meaningful icon has an appropriate accessible name. Repeat the page with the icon used once and many times; reuse can change the request and markup trade-off. Keep the HTML fixture with the completed sheet.
What to record
Record source complexity, SVG path count, uncompressed and compressed transfer bytes, number of requests, cache state, display size, browser zoom, and accessibility treatment.
A result belongs to the source file, encoder, settings, browser, viewport, cache state, and date that produced it. Repeat the test on representative files before changing a production workflow.
Common mistakes
- Inlining a large symbol repeatedly
- Removing a viewBox and breaking scaling
- Giving decorative icons noisy alternative text
- Assuming a smaller source file always decodes or paints faster
Verification checklist
Zoom to 200%, test Windows and macOS rendering if the audience includes both, navigate controls by keyboard, and inspect the accessibility tree. Confirm that external icons still render when cached and that CSP rules permit the chosen delivery method.
Primary references
Related lab notes
About this guide
We distinguish documented platform behavior from our workflow recommendations. See the testing methodology, editorial policy, and corrections log.