Skip to main content
Question

When importing SVG, Figma ignores the stroke-width set in svg and adds its own

  • January 26, 2023
  • 1 reply
  • 1955 views

Streamline

Hello, we are having an issue when importing SVGs into Figma.

Apparently, when viewBox’s width/height doesn’t match width/height attributes of SVG, Figma changes viewBox’s width/height to match width/height attributes, but also it scales the set stroke-width in the same way. This results in confusion, as externally explicitly set stroke-width gets changed when imported into Figma.

This simple SVG

<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">
	<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

…gets converted into this when I import it into Figma (retrieved by copying its SVG):

<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M100 180C144.183 180 180 144.183 180 100C180 55.8172 144.183 20 100 20C55.8172 20 20 55.8172 20 100C20 144.183 55.8172 180 100 180Z" fill="#FF0000" stroke="black" stroke-width="6"/>
</svg>

As you can notice, stroke-width got multiplied by 2, as viewBox’s width/height also got multiplied by 2.

I would love to avoid this when importing SVGs into Figma, how is it possible? Or perhaps how can I prepare SVG with code so that, when imported into Figma, the stroke-width doesn’t change and yet the certain size Is used? Thank you!

This topic has been closed for comments

1 reply

  • 0 replies
  • February 25, 2023

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings