Skip to main content

Respect Opacity Attribute on Text When Importing SVGs

  • August 7, 2026
  • 1 reply
  • 13 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. 

1 reply

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

 

Terms & ConditionsAccessibility statement