How to Export SVG from Figma: Complete Guide to Perfect Vector Exports

Figma is the design tool of choice for millions of designers. But exporting SVGs from Figma? That's where things get tricky.

You've probably experienced it: your design looks perfect in Figma, but the exported SVG has missing gradients, broken text, or strange clipping issues. This guide covers exactly how to export SVG from Figma correctly—and how to fix the common problems.

Quick Export: The Basics

Here's the fastest way to export SVG from Figma:

Method 1: Export Panel

1. Select the frame or element you want to export
2. In the right sidebar, scroll to the Export section
3. Click the + button to add an export
4. Select SVG from the format dropdown
5. Click Export [element name]

Method 2: Right-Click Export

1. Select your element
2. Right-click
3. Choose Copy/Paste as > Copy as SVG
4. Paste directly into your code editor

Method 3: Keyboard Shortcut

1. Select your element
2. Press Cmd + Shift + E (Mac) or Ctrl + Shift + E (Windows)
3. The export panel opens with your selection

Export Settings Explained

When you add an SVG export in Figma, you'll see several options:

Contents Only vs. Include Background

• Contents only: Exports just the vectors, transparent background
• Include bounding box: Adds the frame dimensions to the SVG viewBox

For most web use, Contents only is what you want.

Include "id" Attribute

Enable this if you need to target specific elements with CSS or JavaScript:

<!-- With IDs enabled -->
<svg>
  <path id="icon-path" d="..."/>
  <circle id="dot" cx="10" cy="10" r="5"/>
</svg>

Without IDs, elements have no identifiers, making them harder to style individually.

Outline Text

Critical setting. When enabled, converts text to paths.

Enable when:

• The SVG will be used where fonts might not load
• You need exact text appearance guaranteed
• Distributing SVGs that must look identical everywhere

Disable when:

• You need editable text in the SVG
• File size is critical (outlined text is larger)
• SEO matters (search engines can't read outlined text)

Fixing Common Figma SVG Export Problems

Problem: Gradients Missing or Broken

Symptom: Your beautiful gradient appears as a solid color after export.

Causes:

1. Gradient uses multiple layers/effects
2. Gradient is on a group, not a shape
3. Complex gradient types not supported

Solutions:

Flatten the gradient:

1. Select the element with gradient
2. Right-click > Flatten
3. This bakes the visual appearance into a single layer

Use simple gradients:

• Linear and radial gradients export cleanly
• Avoid angular or diamond gradients

Check gradient definition: After export, verify your SVG has the gradient defined:

<svg>
  <defs>
    <linearGradient id="gradient-1">
      <stop offset="0%" stop-color="#6366f1"/>
      <stop offset="100%" stop-color="#f97316"/>
    </linearGradient>
  </defs>
  <rect fill="url(#gradient-1)"/>
</svg>

If <defs> is empty or missing, flatten your layers in Figma.

Problem: Text Looks Different

Symptom: Font appears wrong or completely different after export.

Solutions:

Option 1: Outline text in Figma

1. Select text layers
2. Right-click > Outline stroke (or use Flatten)
3. Text becomes paths—appearance preserved exactly

Option 2: Enable "Outline Text" in export settings Check the outline text option in the export panel.

Option 3: Ensure font availability If keeping text as text, embed the font or ensure it's available where the SVG loads:

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap');

svg text {
  font-family: 'Space Grotesk', sans-serif;
}

Problem: SVG Has White Background

Symptom: Transparent design in Figma, white background in export.

Causes:

• Frame has a fill color
• Background rectangle included accidentally
• "Include background" option enabled

Solutions:

Remove frame fill:

1. Select your frame in Figma
2. In the right sidebar under Fill, remove any fills
3. Re-export

Export contents only: In export settings, ensure you're not including unnecessary backgrounds.

Clean up in the SVG: Look for and remove background rectangles:

<!-- Remove this if it's an unwanted background -->
<rect width="100%" height="100%" fill="white"/>

Or use our SVG Background Remover tool to strip backgrounds automatically.

Problem: Elements Clipped or Cut Off

Symptom: Parts of your design are missing in the export.

Causes:

• Elements extend beyond frame bounds
• Clip content is enabled
• Boolean operations not flattened

Solutions:

Extend frame bounds:

1. Select your frame
2. Expand it to include all elements
3. Or disable Clip content in frame settings

Flatten boolean operations: Complex boolean operations (union, subtract, intersect) sometimes export incorrectly.

1. Select the boolean group
2. Right-click > Flatten

Check viewBox: After export, verify the viewBox includes all content:

<!-- If content is clipped, adjust viewBox -->
<svg viewBox="0 0 100 100">
  <!-- Elements at x="110" would be clipped -->
</svg>

<!-- Expand viewBox to include all elements -->
<svg viewBox="0 0 150 100">

Problem: Huge File Size

Symptom: Simple icon is 500KB+.

Causes:

• Hidden layers exported
• Unnecessary precision in paths
• Effects converted to embedded images
• Text not optimized

Solutions:

Hide unused layers: Hidden layers in Figma can still export. Delete them or move to a separate page.

Simplify paths: In Figma, reduce path points:

1. Edit the path (double-click)
2. Delete unnecessary anchor points
3. Use the pen tool to smooth curves

Flatten effects: Drop shadows and blurs may export as embedded images. Flatten or remove them.

Optimize after export: Use SVG Minify to reduce file size by 30-70%:

• Removes metadata
• Shortens path coordinates
• Strips comments and whitespace

Problem: Strokes Look Wrong

Symptom: Stroke width appears different, or strokes are missing.

Solutions:

Outline strokes before export:

1. Select element with strokes
2. Right-click > Outline stroke
3. Converts stroke to filled path

Check stroke alignment: Figma allows inside/outside/center stroke alignment. SVG only supports center alignment. If using inside or outside strokes, outline them first.

Verify stroke attributes: After export, check stroke properties:

<path
  stroke="#6366f1"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  fill="none"
/>

Optimizing Figma SVG Exports for Web

Step 1: Prepare in Figma

Before exporting:

1. Flatten complex elements - Boolean operations, effects, grouped gradients
2. Outline text (if appearance matters more than editability)
3. Remove hidden layers
4. Name your layers - These become IDs in the SVG
5. Use simple shapes when possible - Rectangle vs. complex path

Step 2: Export with Correct Settings

• Format: SVG
• Include "id" attribute: Yes (if you'll style with CSS)
• Outline text: Based on your needs
• Contents only: Usually yes

Step 3: Optimize the SVG

After export, run through SVG Minify:

• Reduces file size
• Removes Figma metadata
• Shortens decimal precision
• Removes empty groups

Step 4: Clean Up Code

Open the SVG and check for:

<!-- Remove Figma metadata -->
<!-- Generator: Figma -->

<!-- Remove empty groups -->
<g></g>

<!-- Simplify transforms if possible -->
<g transform="translate(0,0)">  <!-- Remove this -->

Step 5: Test Rendering

View your SVG in:

• Browser (Chrome, Firefox, Safari)
• Target use case (website, app, email)
• SVG Playground for quick testing

Exporting Components and Variants

Figma components require special attention:

Single Component Instance

1. Select the specific instance you want
2. Export as normal

All Variants

1. Select the component set (parent)
2. Add multiple exports—one per variant
3. Name with variant properties

Component with Overrides

If you've overridden properties (colors, text):

1. Select the overridden instance
2. The export reflects your overrides, not the main component

Exporting for Different Use Cases

For Web/HTML

Standard SVG export works. Consider:

• Inline SVG for maximum control
• External file for caching benefits
• SVG to React for React components

For iOS/Android Apps

1. Export SVG as normal
2. Use platform tools to convert:
   • iOS: Create asset catalogs or use PDF
   • Android: Vector Drawable format (Android Studio converts SVG)

For Print

1. Export SVG with outlined text
2. Use higher precision in paths
3. Convert to PDF or EPS for print workflows

For Icon Libraries

1. Create consistent artboard sizes (24x24, 48x48)
2. Center icons within artboards
3. Use consistent stroke widths
4. Export with IDs for CSS styling
5. Batch export all icons at once

Batch Exporting Multiple SVGs

Export many SVGs efficiently:

Method 1: Multi-Select Export

1. Select multiple frames/elements
2. Add export to each (they share settings)
3. Click Export X layers

Method 2: Export All on Page

1. Set up exports on each element you want
2. Use File > Export... (Cmd/Ctrl + Shift + E)
3. Exports everything with export settings configured

Method 3: Figma Plugins

Plugins like Super Tidy or Batch Export can automate:

• Naming conventions
• Folder organization
• Format variations

Figma to SVG Alternatives

If Figma exports aren't working:

Recreate with AI

Use our AI SVG Generator to:

1. Describe what you need
2. Generate clean, optimized SVG
3. Skip the export hassle entirely

Trace Existing Designs

1. Export from Figma as PNG
2. Use vector tracing tools
3. Clean up the result

Build in Code

For simple shapes, write SVG directly:

• Use SVG Playground for real-time preview
• SVG Editor for visual editing

Troubleshooting Checklist

When your Figma SVG export isn't working:

• [ ] Flatten boolean operations
• [ ] Outline text if appearance matters
• [ ] Remove frame background fills
• [ ] Delete hidden/unused layers
• [ ] Check elements aren't clipped
• [ ] Outline strokes if using inside/outside alignment
• [ ] Flatten layers with complex effects
• [ ] Verify viewBox covers all content
• [ ] Run through SVG optimizer
• [ ] Test in target environment

Key Takeaways

1. Flatten complex elements before exporting
2. Outline text when exact appearance matters
3. Remove backgrounds for transparent SVGs
4. Optimize after export with SVG Minify
5. Test rendering in your target environment
6. Consider alternatives like AI generation for complex needs

Figma is great for design, but exports sometimes need cleanup. With these techniques, you'll get clean, optimized SVGs every time.

---

Related Articles:

• What is SVG? Scalable Vector Graphics Explained
• How to Optimize SVG Files
• SVG Format: The Complete Guide