Pasted Illustrator vector art in Figma is scaled 📏

Hey @Thomas_Cramer, thank you for reaching out!
Hmm this looks very interesting. I am not sure on my end what might cause this, but I’ve reached out to the teams internally regarding this issue. Will get back to you once I’ve receive more information on this.

Thanks,
Gayani

I’m experiencing the same issue: when copying from Illustrator to Figma, the 32x32 px icon gets scaled up to 42.67x42.67 px in Figma.

Struggled from this issue already for several days!

Hey everyone, I’ve seen that this issue is currently been investigated. I’ve passed your feedback to the teams. However, it seems to be a long standing bug and to be transparent there is not likely to be fix at this moment, but I will still keep you updated on this post if I should receive more information from the team.

Thank you,
Gayani

Hi @Thomas_Cramer + @Glafira, I am unable to reproduce this with a simple Illustrator example. If either of you could provide a simple SVG here that reproduces the problem, along with the dimensions you copied from in Illustrator, that would be helpful. (Copying from Illustrator copies SVG to the clipboard so you can just copy there and paste the code directly to the reply field here!)

Hi Lauren

This could be an example. Dimensions is 18 x 18 px inside Illustrator and when copied and pasted inside Figma it is scaled to 24 x 24 px.

Illustrator:

Figma:

SVG:

Thanks

Seems to discard some of the code? Here’s a screenshot as well of the code when in edit mode in the comment:

I also cannot reproduce this. @Thomas_Cramer your SVG code includes width and height in centimeters and mine does not. Where does this come from? Can you try removing the width and height from the code, copy it and paste it into Figma? Does this change anything?

Here’s my SVG for example (32x32 copied from Illustrator to Clipboard):

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <defs>
    <style>
      .cls-1 {
        fill: #ff0;
      }

      .cls-1, .cls-2 {
        stroke-width: 0px;
      }

      .cls-2 {
        fill: #000;
      }
    </style>
  </defs>
  <path class="cls-1" d="M32,16c0-2.19-1.76-4.17-4.61-5.62C26.03,4.32,22.57,0,18.5,0c-3.65,0-6.82,3.48-8.41,8.57C4.18,9.75,0,12.63,0,16s4.18,6.25,10.09,7.43c1.59,5.09,4.76,8.57,8.41,8.57,4.07,0,7.53-4.32,8.89-10.38,2.85-1.44,4.61-3.43,4.61-5.62Z"/>
  <g>
    <path class="cls-2" d="M8.75,8c1.93,0,1.93-3,0-3s-1.93,3,0,3Z"/>
    <path class="cls-2" d="M17.95,8.01c.13.23.31.4.54.54.12.05.24.1.36.15.27.07.53.07.8,0,.17-.06.33-.13.5-.19.2-.05.37-.14.51-.27.16-.11.29-.25.39-.42.11-.17.17-.36.18-.56.04-.2.04-.4-.03-.6-.05-.12-.1-.24-.15-.36-.13-.23-.31-.4-.54-.54l-.36-.15c-.27-.07-.53-.07-.8,0-.17.06-.33.13-.5.19-.2.05-.37.14-.51.27-.16.11-.29.25-.39.42-.11.17-.17.36-.18.56-.04.2-.04.4.03.6l.15.36Z"/>
    <path class="cls-2" d="M28.87,10.36c-.22-1.9-3.22-1.92-3,0,.39,3.39.93,7.2-.54,10.42-1.32,2.89-3.75,4.39-6.92,4.03-3.1-.36-6.36-1.17-8.28-3.81-2.04-2.81-3.45-6.03-4.29-9.39-.47-1.87-3.36-1.08-2.89.8.99,3.93,2.71,7.81,5.26,10.99,2.48,3.09,6.8,4.17,10.61,4.45,3.83.28,7.11-1.74,8.89-5.1,2.02-3.83,1.65-8.23,1.17-12.38Z"/>
  </g>
</svg>

Oh, also you can use the “Preformatted text” option in the comment editor to paste code like above.

Thanks @Gleb 🙌! It seems as if changing the resolution of my Illustrator document from 300 ppi to 72 ppi did the trick. Awesome! I actually thought .svg’s were independent of resolution. Learned something new today 👍

Hi @dennsi

I changed the resolution as mentioned by @Gleb which seems to work in my case. I still get a width and height when pasting the copied artwork from Illustrator, but now it is not in centimeters.

<?xml version="1.0" encoding="UTF-8"?>
<svg id="a" data-name="Save" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
  <path d="M17.705,4.707L13.27.291c-.187-.187-.441-.291-.705-.291H1C.448,0,0,.448,0,1v16c0,.552.448,1,1,1h16c.552,0,1-.448,1-1V5.415c0-.266-.106-.521-.295-.709ZM9,14c-1.657,0-3-1.343-3-3s1.343-3,3-3,3,1.343,3,3-1.343,3-3,3ZM11,4H3c-.552,0-1-.448-1-1s.448-1,1-1h8c.552,0,1,.448,1,1s-.448,1-1,1Z" fill="#000" stroke-width="0"/>
</svg>