Skip to main content

Respect Opacity Attribute on Text When Importing SVGs

  • August 7, 2026
  • 3 replies
  • 42 views
Brian_Olson

If a text element in an SVG is semi-opaque, Figma switches it to full opacity on import. 


Here’s an example. Import this SVG and the text “My Opacity Changes!” label is not 50% opacity, it is 100%.

<svg width="768" height="650" viewBox="0 0 768 650" fill="none" xmlns="http://www.w3.org/2000/svg">
	<text opacity="0.5" fill="#000" font-family="Lato" font-size="15">
		<tspan x="26.8965" y="558.805">My Opacity Changes!</tspan>
	</text>
</svg>


I our workflows, I set elements in our SVG to opacity=0.01 as a special workaround for this bug: 

I developed our process to read “0.01” as a flag for “this should be invisible, but Figma can’t handle invisible elements so just treat this element as fully invisible despite being 1% opacity”.

But now I can’t even use Figma to edit SVGs with opacity=0.01. 

We will need to develop a Figma workaround on top of a Figma workaround. 

3 replies

Jaycee Lewis
Figmate

Hey hey ​@Brian_Olson 👋 Fancy meeting you here 😂 I took this one down the rabbit hole. Here what I found.

Confirming what you're seeing, I had Claude help me create a few test SVGs:

  • <text opacity="0.5"> → imports at 100% ❌
  • <text style="opacity:0.5"> → 100% ❌
  • <tspan opacity="0.5"> → 100% ❌
  • <text fill-opacity="0.5"> → 50% ✅
  • <text fill="rgba(0,0,0,0.5)"> → 50% ✅
  • <g opacity="0.5"> wrapping text → 50% on the group ✅
  • <rect opacity="0.5"> → 50% ✅

So it's opacity on <text> and <tspan> specifically. Shapes are unaffected, and the other opacity channels work on text.

For your pipeline, have you tried wrapping the text in a group to carry the opacity? Example:

<g opacity="0.01">
  <text fill="#000" font-family="Lato" font-size="15">
    <tspan x="26.8965" y="558.805">My Opacity Changes!</tspan>
  </text>
</g>

The 0.01 lands on the group node, so your flag survives the round trip. Cost: one wrapper per element.

fill-opacity works too, but lands on the fill, not the node.

 

I’m taking the opacity report to my internal resources. If they have any additional requests, I’ll post here. Thanks again for always including your details. Have a great weekend! – Jaycee

 

Brian_Olson
  • Brian_Olson
  • Author
  • Active Member
  • August 10, 2026

Hi again ​@Jaycee Lewis 😅

Thanks for suggesting those alternatives. Knowing that fill-opacity works is very helpful. It’s a good enough work around for a large portion of cases and I’ve wrapped that into our pipeline now. 

We used to wrap text elements in <g> to get around Safari CSS bugs before I rewrote our entire SVG animation engine. I’d like to avoid the added noise of doing that again.

I hope you had a good weekend too!

Jaycee Lewis
Figmate

Hey hey my friend 🤩 I shared your feedback and this behaviour with the team that directly owns this feature. Also the link and other unexpected behaviour was a bonus for sure. I don’t have an update at this moment, and I’ll update this thread if I get any additional info for us. Please keep the SVG-related (and any other) feedback coming 🙌 — Jaycee 

Terms & ConditionsAccessibility statement