It looked perfect in Illustrator. Or Figma. Or Sketch. Then you exported it, dropped it into your site or app, and something's off — the icon is invisible, the text has shifted, a shadow is missing, or the whole thing renders at the wrong size. You didn't touch anything. The export just quietly broke.
This happens because your design tool and the browser are not reading the same rulebook. Design software renders SVGs with its own internal engine, filling in gaps and guessing at intent. Browsers don't guess — they follow the SVG spec literally, so any missing attribute, unsupported filter, or unembedded font that your design tool was silently covering for suddenly becomes visible the moment the file leaves the app.
SVGs usually break after export because of a missing or incorrect viewBox attribute, fonts that weren't embedded or converted to outlines, or filter effects your target browser doesn't fully support. Open the file in a text editor, check the viewBox and width/height values, convert text to paths, and test in at least two browsers before calling it done. Most rendering issues trace back to one of these three causes.
What actually causes an SVG to render incorrectly?
"Broken SVG" covers a range of symptoms, but nearly all of them come down to a small set of root causes:
- Missing or wrong viewBox. The viewBox tells the browser how to map the artwork's internal coordinate system onto its display size. Without it, or with incorrect values, the browser can't scale the image properly — it may render tiny, cropped, stretched, or blank.
- Unembedded fonts. Text elements in an SVG reference a font by name only. If that font isn't installed on the viewer's system or loaded on the page, the browser substitutes a fallback, which shifts spacing, sizing, and line breaks.
- Unsupported filters and effects. Advanced effects like feDropShadow, certain blend modes, or filter chains render inconsistently — or not at all — across different browser engines, even though they look fine in your design tool's preview.
- Clipping and masking issues. Elements positioned outside the artboard, or clip-paths referencing IDs that got renamed or duplicated during export, can silently hide parts of the artwork.
- Editor bloat and malformed markup. Design tools often export extra metadata, editor-specific namespaces, or slightly non-standard attributes that most browsers tolerate — but not all, and not always consistently.
The key insight: the design tool's canvas is not the source of truth — the browser is. Anything a design tool renders "correctly" that isn't valid, standard SVG markup is a rendering issue waiting to happen the moment the file is opened somewhere else.
Why correct SVG rendering matters
A broken SVG isn't just a cosmetic annoyance — it has real consequences depending on where the file ends up:
- Brand consistency. A logo or icon that renders differently across browsers, or vanishes entirely on some devices, undermines the polish of a site or product.
- Cross-platform reliability. SVGs are used everywhere — web, email, print, app icons — and each context has different rendering support. A file that only works in one place isn't actually reusable.
- Accessibility and usability. Missing icons or shifted text can make interfaces confusing or unusable, especially for functional UI elements like buttons and status indicators.
- File size and load performance. Bloated, malformed SVGs are often larger than they need to be, adding unnecessary weight to a page on top of the visual bugs.
Step-by-step: diagnose and fix a broken SVG
- Open the file in a text or code editor. SVG is just XML — open the raw file and read the opening <svg> tag first. This is where most problems start.
- Check the viewBox and width/height attributes. Confirm a viewBox is present and its four values (min-x, min-y, width, height) match the actual artwork bounds. Remove any fixed pixel width/height that conflicts with the viewBox if you need the SVG to scale responsively.
- Convert text to outlines before export. If exact typography matters and font-loading can't be guaranteed, convert text layers to paths in your design tool before exporting. This trades a slightly larger file for guaranteed visual consistency everywhere.
- Simplify or replace unsupported filters. If a drop shadow or blend effect isn't rendering consistently, try re-creating it with a simpler, more widely supported technique, or bake it into the artwork as a flattened shape.
- Check clip-paths and IDs for duplicates. If multiple SVGs are used on the same page, duplicate internal IDs (like clipPath or gradient references) can collide and cause one element to clip or color another incorrectly.
- Test in at least two browser engines. Check the file in a Chromium-based browser and a non-Chromium one (Safari or Firefox) before considering it finished — this catches the majority of cross-browser rendering gaps.
- Optimize only after it renders correctly. Once the SVG displays properly everywhere, run it through an optimizer to strip leftover editor metadata and reduce file size — never optimize a file that's still broken, since it can mask the real problem.
Common mistakes that cause export issues
1. Optimizing before diagnosing the actual problem
Running a broken SVG straight through an aggressive minifier can strip out the very attributes — like viewBox — that would have revealed the root cause. Always confirm the file renders correctly first, then optimize as a separate, final step.
2. Assuming the design tool's preview is the ground truth
Design software preview panes are more forgiving than browsers by design, since they're built to help you edit, not to enforce the spec. A file that looks flawless in the export preview can still be missing attributes a browser requires.
3. Leaving text as live text instead of outlines
This feels like it preserves editability, and it does — but only in an environment where the exact font is guaranteed to be available. Anywhere else, it's a silent invitation for the browser to substitute a different font and shift your layout.
4. Manually fixing large batches of SVGs one at a time
Going through an icon set or asset library file by file is slow and easy to get inconsistent, since it's simple to miss a fix on one or two files. A bulk optimizer applies the same cleanup rules to every file in one pass, which is both faster and more reliable.
Real-world rendering fixes
These are representative cases of SVGs that broke after export, and what actually fixed them:
The pattern holds across cases: the fix is almost always structural — an attribute, a font, or an effect — not a matter of file size. Optimization is the cleanup step that comes after the structural problem is solved, not a substitute for solving it.
Comparison: common SVG problems and their fixes
Here's how the most frequent rendering issues map to their causes and fixes:
| Symptom | Likely cause | Fix difficulty | Fix |
|---|---|---|---|
| SVG appears blank or invisible | Missing/incorrect viewBox | Easy | Add or correct the viewBox values |
| Wrong size or stretched | Conflicting width/height and viewBox | Easy | Align or remove fixed width/height |
| Text spacing looks off | Font not embedded or loaded | Moderate | Convert text to outlines/paths |
| Shadow or glow missing | Unsupported filter in that browser | Moderate | Rebuild effect as a flattened shape |
| Wrong element clipped or colored | Duplicate internal IDs across files | Moderate | Rename IDs to be unique per file |
| File is large but looks unchanged | Editor metadata and bloat | Easy | Run through an SVG optimizer, after fixing rendering |
Free tool: SVG Optimizer and Minifier
The Rebrixe SVG Optimizer runs entirely in your browser. Your files are never uploaded to a server — cleanup happens locally, and you can preview the result before downloading. No account, no file size limit, no watermarks.
Clean up your SVGs in seconds
Drop in a whole icon set and strip editor bloat from every file at once, without touching the artwork.