How to Use Outlined SVG Text in Framer

Framer has decent typography support. You can load custom fonts, use Google Fonts, and even pull in variable fonts. So why would you ever bring in outlined SVG text instead?

Because there's a category of text that Framer's live text layer simply can't handle well — and if you've hit that wall, you know exactly what I mean.

---

The Problem with Live Text in Framer (For Certain Use Cases)

Framer's text layers are great for body copy, headings, and UI labels. But they fall apart in a few specific scenarios:

Gradient fills on individual letters
Framer lets you apply gradients to frames, but applying a per-letter gradient to a text layer — the kind that flows across the whole word as one continuous fill — requires SVG. Live text can't do it natively without workarounds.

Stroke-only type (hollow text)
Want letters that are outlines only, with no fill? In live text, there's no stroke-only option. In SVG paths, you just set fill: none and stroke to whatever you want.

Clip masks and image-inside-text effects
The "image fills a word" effect is everywhere in modern web design. In Framer, pulling this off with live text is fragile and version-dependent. With an SVG path, you use a <clipPath> and it works predictably.

Fonts you can't load in Framer
Framer loads Google Fonts and lets you upload custom fonts — but if you're using a licensed typeface that can't be uploaded, your only clean option is to outline the text before it enters Framer.

Text as a design element, not copy
When a word is part of a graphic — a hero illustration, a decorative background element, a watermark — treating it as live text adds unnecessary fragility. A path is just geometry and stays that way.

---

When to Keep It as Live Text

This matters: don't outline everything. If the text is:

• A page heading or paragraph that might change
• Localized copy (different languages = different lengths)
• Something screen readers need to parse
• Inside a CMS-connected component

...leave it as live text. Outlined SVG text is invisible to screen readers and unsearchable. That's a real accessibility and SEO cost for content that should be readable.

The rule: outline text that's decorative or typographically complex. Keep live text for everything informational.

---

How to Generate the Outlined SVG

Go to texttosvg.app. Type your text, pick your font. Before you export, adjust a couple of settings with Framer in mind:

Bezier Accuracy
Set this to medium. High accuracy produces more anchor points than you need for screen display — it's overkill for web and makes the SVG file slightly heavier. Medium gives you smooth curves without unnecessary complexity.

Separate Characters: depends on your use case

• Off (default): The whole word exports as one path or compound path. Easier to position in Framer as a single element.
• On: Each letter is its own path. Use this if you want to animate letters individually in Framer's animation system or stagger entrance effects per character.

Units
Set to px for web. Framer works in pixels — mm or in units will cause scaling confusion when you paste the SVG in.

Fill Color
Set a fill color in the tool if you want the default color baked into the SVG. Or leave it as black and override it inside Framer using the fill controls on the SVG element.

Hit Download SVG.

---

Bringing the SVG into Framer

There are two ways to get SVG into Framer, and they behave differently:

Method 1: Paste as SVG code (recommended for editing)

Open the downloaded .svg file in a text editor. Copy the raw SVG code. In Framer, press Cmd+V (Mac) or Ctrl+V (Windows) on the canvas. Framer will paste it as a native SVG element with editable properties.

This method preserves path editability inside Framer. You can select individual paths, change fill colors, and animate them.

Method 2: Import as an image asset

Drag the .svg file into Framer's Assets panel. Insert it onto the canvas like an image. This is faster but treats the SVG as a flat asset — you lose per-path control and can't override fill colors from Framer's UI.

Use Method 1 when you care about styling or animating the SVG inside Framer. Use Method 2 when you just need a static visual element.

---

Styling and Animating Outlined SVG in Framer

Once pasted as an SVG element, you can:

Change fill color
Select the SVG element, go to Fill in the right panel. Apply a solid color, gradient, or image fill. This overrides the fill set inside the SVG code.

Apply a gradient across the whole word
Select the element → Fill → Gradient. Because the word is now a single path (assuming Separate Characters was off), the gradient maps across the entire shape as one continuous flow, not letter by letter. This is the effect that's nearly impossible to achieve with live text.

Animate with Framer Motion
In Framer's built-in animation controls, you can set entrance animations on the SVG element just like any other frame — fade, slide, scale. If you exported with Separate Characters on, each letter is its own element and can be staggered individually in the timeline.

Use as a clip mask
In Framer, place an image layer behind your SVG text. Select both layers, right-click → Mask. The image will show through the letter shapes. Clean and predictable because the paths are well-defined geometry.

---

Checking That It Worked Correctly

After pasting, do a quick check:

1. Zoom to 400% — the letterforms should stay perfectly crisp. Blurry edges mean it was rasterized somewhere, which shouldn't happen with a proper SVG, but worth verifying.

2. Resize the element — drag a corner handle and see if it scales without distortion. SVG paths scale infinitely; if you see pixelation, something went wrong in the import.

3. Click into the element — you should be able to select individual paths. If the whole thing behaves as a single locked group, you may have imported it as an image asset accidentally. Re-paste using Method 1.

4. Preview in browser — Framer's canvas rendering and browser rendering are close but not identical. Hit Preview (or publish to a staging link) and check the text at different screen sizes. Outlined SVG text should look identical across all resolutions.

---

A Real-World Example: Hero Section Wordmark

Here's a typical use case that combines everything above:

A landing page hero with a large wordmark where the letters are filled with a diagonal gradient that flows left-to-right across the whole word — not per-letter, but as one continuous wash of color.

1. Type the brand name in texttosvg.app, pick the brand font, set Bezier Accuracy to medium, Separate Characters off, units to px.
2. Download SVG, open in a text editor, copy the code.
3. Paste into Framer canvas (Cmd+V / Ctrl+V).
4. Select the element → Fill → Gradient → set the angle and colors.
5. Add an entrance animation: scale from 95% → 100% + fade, 0.6s ease-out.

Total time: about three minutes. The gradient effect alone would have taken much longer to fake with live text, and would have broken on the next Framer update.

---

Summary

Use Case	Live Text	Outlined SVG
Body copy / headings	✅	—
CMS-connected text	✅	—
Cross-word gradient fill	—	✅
Stroke-only type	—	✅
Image-inside-text clip mask	—	✅
Font not loadable in Framer	—	✅
Per-letter entrance animation	Framer plugin workaround	✅ (Separate Characters on)
Screen reader accessible	✅	—

Outlined SVG text isn't a replacement for Framer's live text system. It's a surgical tool for the cases where live text genuinely can't do what you need. Know the difference, and you'll spend a lot less time fighting with workarounds.