SVG import/paste with unit width height

Ask the community
1

I’m testing copy/paste SVG between Figma and Cuttle.xyz (a new CAD app for laser and CNC cutters).

When you paste SVG text into Figma, it should size it using the width and height of the SVG tag, taking into account the units.

Currently, when you paste into Figma, it uses the width and height for sizing but ignores the units. So if you paste this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1in" height="1in" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M0 0 L72 0 L72 72 L0 72 L0 0 Z " fill="#808080" fill-rule="evenodd" stroke="none" />
</svg>

It comes in to Figma as a 1x1 rectangle. Instead I would expect it to come in as a 96x96 rectangle since “1in” = “96px” according to the CSS spec.

Same situation with export/import as copy/paste.

2

Just to show something fun, here’s a generative Phyllotaxis composition made in Cuttle, pasted into Figma:

image
image2160×1810 434 KB

The JS code in Cuttle that makes it:

const PHI = 137.5;

const items = [];
for (let i = 0; i < repetitions; i++) {
  const angle = PHI * i;
  const item = input.clone().transform({
    position: Vec(c * sqrt(i), 0).rotate(angle),
    rotation: angle
  });
  items.push(item);
}
return items;
1 Like
3

Hi,
welcome to the community!

I think Figma doesn’t interpretate values other than numbers inside width/height attributes, so it automatically thinks that the numbers are values in pixels by default.

Even if you try to put cm, mm inside the height/width attributes, Figma still doesn’t convert the values in pixels as it should (Photoshop does it, for example).

That’s what I presume it’s happening.

PS. Cool thing that Phyllotaxis :hushed:

1 Like