Figma SVG Export Not Working? Fix Blank, Clipped, and Broken SVGs

Figma exports SVG fast. The frustrating part is what happens after: the icon is blank in the browser, half the logo is clipped, a gradient turns black, text shifts, React throws warnings, or a tiny 24px icon ships with a wall of markup.

Here is the fast decision rule:

If the SVG looks wrong immediately after export, fix the Figma selection, frame, text, strokes, gradients, or clipping before optimizing. If it breaks only after pasting into code, fix the SVG markup, JSX attributes, IDs, dimensions, and CSS context.

If your export renders correctly but the code is messy, use the Figma SVG export clean code guide. If the only broken part is a gradient, mask, or shadow reference, use the Figma SVG gradient fix guide before flattening the artwork. If a clipping mask, clipPath, or crop boundary is the suspicious part, the Figma SVG clipping mask fix guide gives you the exact defs, ID, and viewBox checks. If the issue is not Figma-specific and the SVG is blank in a browser, the broader SVG not showing in browser guide covers file paths, MIME types, CSS, and HTML embedding.

Why is my Figma SVG export not working?

A Figma SVG export usually fails because the selected object, exported frame, or SVG markup does not match the place where the file is rendered. Common causes include clipped frame bounds, missing viewBox, invisible fills, unsupported effects, removed defs, duplicate IDs, unoutlined text, and JSX attribute mismatches.

Figma's export settings can include SVG-specific options such as IDs and outlined text, and Figma's own export documentation is worth checking when a setting behaves differently than expected: Figma export formats and settings and Figma guide to exports.

Use this first-pass diagnosis:

Symptom	Most Likely Cause	Fast Fix
Blank SVG	Empty selection, wrong viewBox, invisible fill, broken defs	Re-export a visible selection and inspect viewBox, fill, mask, and gradient references
Clipped or cut off SVG	Frame clips content, outside strokes, shadow outside bounds	Expand frame, disable clipping, outline strokes, or export a tighter complete group
Missing gradient	Deleted or duplicated gradient IDs, complex effects, removed defs	Preserve defs, keep referenced IDs unique, or flatten only complex effects
Wrong text	Font unavailable, text left as live text, text outlined too early	Choose editable text or outlined paths intentionally
React warnings	Raw SVG attributes, duplicate IDs, fixed dimensions	Convert to JSX names, prefix IDs, keep viewBox, use props for size/color
Huge file	Hidden layers, effects, raster embeds, excess precision	Remove noise in Figma, then run conservative optimization

What should I check before changing the SVG code?

Before editing code, check whether the export itself is correct. Open the exported .svg directly in a browser. If it is already blank, clipped, or visually wrong, the problem is upstream in Figma. If it looks correct as a file but fails in your app, the problem is usually embedding, CSS, React conversion, or optimization.

Use this order:

1. Select the exact object, frame, or component instance you want.
2. Confirm hidden layers and temporary backgrounds are removed.
3. Check whether the frame has Clip content enabled.
4. Confirm shadows, strokes, and blur effects fit inside the frame.
5. Decide whether text should remain text or become paths.
6. Export SVG at 1x.
7. Open the exported file directly in Chrome, Firefox, or Safari.
8. Only then paste it into React, HTML, CSS, or a CMS.

Figma SVG troubleshooting is the process of separating export problems from implementation problems. The mistake that wastes time is optimizing, minifying, or rewriting React code when the source export is already broken.

How do I fix a blank Figma SVG export?

To fix a blank Figma SVG export, re-export a visible selected object, keep the viewBox, check that visible shapes have fills or strokes, and preserve referenced definitions such as gradients, masks, filters, and clip paths. A blank export is almost never solved by random minification.

Start with the simplest test. Open the SVG file in a plain browser tab. Then inspect the top of the file:

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">

The opening tag should usually have:

• xmlns="http://www.w3.org/2000/svg"
• a viewBox
• non-zero width and height, or CSS that supplies size
• visible shapes inside the viewBox
• referenced defs still present

A common blank-file pattern looks like this:

<svg viewBox="0 0 24 24">
  <path d="M40 40..." fill="#111827" />
</svg>

The shape may be outside the visible coordinate system. The file technically has artwork, but the viewBox is showing the wrong region. In Figma, export the tighter object or adjust the frame before export. Manual viewBox repair is possible, but re-exporting from the correct selection is safer.

If the file is blank because fill or stroke is missing, add explicit color before debugging anything else:

<path d="..." fill="#111827" />

For unknown markup, open the file in SVG Validator. If it is valid but visually wrong, use SVG Editor to inspect the canvas, fills, and layer structure.

Why is my Figma SVG clipped or cut off?

A Figma SVG is clipped or cut off when the exported frame does not include the full visible artwork. Outside strokes, shadows, blur, rotated elements, masks, and disabled frame padding can extend beyond the bounds that become the SVG viewBox.

Fix it in Figma first:

• Select the full component or export frame, not only one nested vector.
• Expand the frame until all shadows and strokes fit.
• Disable Clip content if the crop is accidental.
• Outline outside or inside strokes when SVG center-aligned strokes change the edge.
• Flatten boolean groups only when they are visibly unstable.
• Re-export and compare at small and large sizes.

Use this rule: if the exported viewBox is tight but the design relies on effects outside the frame, the SVG is doing exactly what the frame told it to do. The frame is wrong.

If you already have a clipped SVG and cannot re-export, open it in SVG Editor, expand the canvas, and check whether any paths sit outside the current viewBox. For simple icon cropping, the SVG icon cut off fix guide goes deeper on viewBox and overflow repair. For line-specific issues like changed stroke weight, missing rounded caps, or dashed lines becoming solid, use the Figma SVG stroke fix guide.

Why are gradients, masks, or shadows missing after export?

Gradients, masks, and shadows fail when the SVG depends on a definition that is missing, renamed, duplicated, optimized away, or unsupported in the final renderer. The important markup often lives inside <defs>, even though the visible shape appears elsewhere in the file.

This is the pattern to protect:

<defs>
  <linearGradient id="paint0_linear" x1="0" y1="0" x2="120" y2="120">
    <stop offset="0%" stop-color="#22c55e" />
    <stop offset="100%" stop-color="#2563eb" />
  </linearGradient>
</defs>

<path d="..." fill="url(#paint0_linear)" />

If paint0_linear is renamed, duplicated, or deleted, the path can render black, transparent, or not at all.

When combining several Figma exports into one page or React app, duplicate IDs are a silent killer. Two different SVGs can both export id="paint0_linear". The second one can steal the first one's gradient reference. Prefix IDs per asset before inlining multiple SVGs.

Safe optimization rule:

Asset Type	Keep Defs?	Flatten?	Why
Simple one-color icon	Usually no defs needed	No	Clean path output is enough
Brand logo with gradient	Yes	Usually no	Gradient must remain editable and scalable
Illustration with shadows	Maybe	Sometimes	SVG filters can be heavy or inconsistent
Decorative web graphic	Maybe	If visual fidelity matters more than editability	Raster-like effects may be better as PNG/WebP

MDN's SVG reference is useful when checking standard SVG elements and attributes: MDN SVG and MDN viewBox.

Why does Figma SVG text look wrong?

Figma SVG text looks wrong when the font is unavailable where the SVG renders, text was exported as live text but the target environment uses a fallback font, or text was outlined and can no longer behave like real text. The correct fix depends on whether visual fidelity or editability matters more.

Use this decision:

Goal	Text Strategy	Tradeoff
Logo lockup must look exact	Outline text	Larger file, not editable as text
Diagram labels may change	Keep text live	Font must load in the target context
Accessible content matters	Keep real text when practical	More CSS/font setup
Static decorative heading	Outline if exact rendering matters	Screen readers may not read it as text

For logos and icon marks, outlined text is usually safer. For diagrams, product screenshots, or educational graphics, live text may be worth the font setup.

If your actual problem is editing wording inside an existing SVG, start with Edit SVG text online before outlining every layer.

Why does Figma SVG fail after pasting into React?

Figma SVG can fail in React because raw SVG uses HTML attribute names while JSX expects camelCase names for many SVG attributes. React components also expose problems with duplicate IDs, hardcoded width and height, hardcoded fills, and inaccessible inline SVG.

Raw Figma export:

<svg width="24" height="24" viewBox="0 0 24 24">
  <g clip-path="url(#clip0_1_2)">
    <path stroke-width="2" stroke-linecap="round" d="M4 12h16" />
  </g>
</svg>

React-ready version:

export function DividerIcon({ title = "Divider icon", className }: { title?: string; className?: string }) {
  return (
    <svg viewBox="0 0 24 24" className={className} role="img" aria-label={title}>
      <path strokeWidth={2} strokeLinecap="round" stroke="currentColor" d="M4 12h16" />
    </svg>
  );
}

What changed:

• clip-path becomes clipPath if the clip path is still needed.
• stroke-width becomes strokeWidth.
• stroke-linecap becomes strokeLinecap.
• viewBox stays.
• The icon can inherit color through currentColor.
• The component gets an accessible label when it is meaningful.

For production components, the SVG to React converter can do the attribute conversion faster than manual search-and-replace. Then use SVG Optimizer or SVG Minify only after confirming the visual result still matches.

Why is my Figma SVG file huge?

A huge Figma SVG usually contains hidden layers, embedded raster images, excessive path precision, complex effects, outlined text, unnecessary groups, or copied assets that were never meant to be shipped as web SVG. The fix is to remove noise before export, then optimize conservatively.

Do this in order:

1. Duplicate the asset into an export-only frame.
2. Delete hidden layers, notes, unused variants, and accidental backgrounds.
3. Replace pasted screenshots with real vectors or export them as images.
4. Simplify shapes only when it does not change the artwork.
5. Export SVG.
6. Run SVG Minify.
7. Compare before and after in a browser.

Do not chase the smallest possible file if the result breaks masks, gradients, or path precision. A clean 6 KB icon that renders correctly beats a 2 KB icon with missing corners.

What is the fastest Figma SVG troubleshooting checklist?

The fastest checklist is to verify the source selection, exported file, and implementation separately. That prevents you from fixing the wrong layer of the problem.

Use this sequence:

• In Figma, select only the asset you intend to export.
• Remove hidden layers and accidental backgrounds.
• Expand the frame for shadows, strokes, and rotated shapes.
• Decide whether text should be outlined or live.
• Export SVG at 1x.
• Open the exported SVG directly in a browser.
• Check viewBox, fills, strokes, and xmlns.
• Preserve defs for gradients, masks, filters, and clips.
• If shadows disappear or clip, run the Figma SVG shadow filter checklist before optimizing.
• Prefix duplicate IDs when inlining several SVGs.
• Convert attributes before using the SVG in React.
• Optimize only after the export is visually correct.
• Test in the final page, app, email, or CMS.

If the source was not truly vector, stop fighting the Figma export. Use Image to SVG or PNG to SVG to rebuild the asset from the raster source, then clean it in SVG Editor.

When should I re-export, clean, or rebuild the SVG?

Re-export when the frame, selection, text, clipping, or effects are wrong in Figma. Clean when the exported SVG is visually correct but needs smaller code, React attributes, color control, or background removal. Rebuild when the source is a raster image, a noisy trace, or a design concept that would take longer to repair than regenerate.

Here is the practical choice:

Situation	Best Next Step
Export is blank or clipped	Re-export from a corrected Figma frame
Export looks right but React complains	Convert SVG to React and fix IDs/attributes
White background should be transparent	Use SVG Background Remover or remove the background rect
File is too large	Use SVG Minify after removing Figma noise
Colors need changing	Use SVG Color Changer or SVG Editor
Source is a PNG/JPG	Use Image to SVG instead of forcing Figma export
You need a new clean vector direction	Generate from scratch with SVG Genie

The point is not to make Figma wrong. Figma is excellent for designing vectors. The point is to stop treating every broken export as the same problem. Blank, clipped, missing-gradient, React, and file-size issues have different fixes.

FAQ

Why is my Figma SVG export blank?

A Figma SVG export is usually blank because the selected frame is empty, the artwork sits outside the viewBox, the fill matches the background, the file depends on hidden masks or clips, or the SVG was edited after export and lost required defs. Re-export a tight visible selection, then check viewBox, fills, masks, and gradients.

Why is my Figma SVG cut off after export?

Figma SVGs get cut off when the export frame clips content, shadows extend outside the frame, strokes sit outside the bounds, or the exported viewBox is too tight. Expand the frame, disable clip content where appropriate, outline outside strokes, or re-export a selection that includes the full visual edge.

Why do Figma gradients disappear in SVG?

Gradients disappear when a referenced linearGradient, radialGradient, mask, clipPath, or filter is removed, renamed, duplicated, or unsupported in the target renderer. Preserve the defs block, avoid duplicate IDs when combining SVGs, and flatten complex effects only when a true vector gradient is not required.

Why does Figma SVG fail in React?

Raw Figma SVG can fail in React because attributes such as clip-path and stroke-width need JSX names such as clipPath and strokeWidth, IDs can collide across components, and hardcoded dimensions or fills can fight component props. Convert attributes, preserve required defs, and test the component in the real UI.

Can SVG Genie fix a broken Figma SVG?

Yes, when the issue is cleanup, conversion, colors, background, or optimization. Use SVG Editor for manual cleanup, SVG Validator to inspect code, SVG Optimizer or SVG Minify for safe shrinking, and Image to SVG when the original source is a raster image rather than a clean vector.

Next step

If the exported file is broken, fix the Figma selection or frame first. If the file looks right but the code is messy, run the clean SVG through SVG Optimizer, convert React assets with SVG to React, and keep SVG Editor open for visual checks before shipping.