Importing svg not working properly

hello,
i tried to import an svg by draging it to my draft but it instead it looks like this…

what can i do?

1 Like

if it’s anything like what happened to me, my imported file was literally 1 x 1 px in the bottom right corner of that square…no idea why, it scaled up fine because of the vector though.

Reuben, that happens when the SVG you are importing doesn’t have set dimensions on it (viewbox / width & height).

Answering the original question, can you send the code of the original SVG before import? Note that if that SVGs are exported from Illustrator, masks in them won’t import to Figma correctly. Also defs and use are not allowed.

@Gleb
This feature is not working and SVG import was always an epic fail.
Doesn’t matter what program you will use for an export - Illustrator, Affinity, Inkscape etc. I’ve tried all of them.
Setting the view box is not helping too. Makes things worst - as after viewbox set imported image frame size has 1 by 1 pixel.
I don’t get why after so many years such a basic thing is still broken?

@Gleb Why the masked element will not import correctly? If it can be imported correctly to Inkscape and many others?

It is an elementary feature as many people use other graphic tools, It’s a must, not could…

Thanks

2 Likes

It doesn’t work because Figma didn’t implement that.

Feel free to vote for this feature suggestion: Improve SVG support

1 Like

Not sure if this solution works all the time and for every image but, I was able to import an svg (with all layers intact and no distortion) by:

  1. Opening svg / vector file in Illustrator (*I haven’t tried any other programs)

  2. Select “File” → “Save As” or “Save a Copy”

  3. Change the “Format:” to “SVG (svg)”

  4. Select “Save”

  5. Find the file and drag it into your desired file in Figma

Somehow, with or without any edits made in Illustrator, the svg is now vectorized (all mask and styling included) and ready for editing in Figma.

Hope that helps!

1 Like

I set viewbox but it imports partially only


instead of this

<svg viewBox="0 0 857 1570" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Layer_1">
  <title>Layer 1</title>
  <g class="cluster" id="clust5">
   <title id="svg_2">cluster_src/jsx</title>
   <path id="svg_3" d="m94.5,446c0,0 425.5,0 425.5,0c6,0 12,-6 12,-12c0,0 0,-42 0,-42c0,-6 -6,-12 -12,-12c0,0 -425.5,0 -425.5,0c-6,0 -12,6 -12,12c0,0 0,42 0,42c0,6 6,12 12,12" stroke-width="2" stroke="black" fill="#ffffff"/>
   <text id="svg_4" font-size="9" font-weight="bold" font-family="Helvetica,sans-Serif" y="391.2" x="307.25" text-anchor="middle">jsx</text>
  </g>
  <g class="cluster" id="clust4">
   <title id="svg_6">cluster_src/forks</title>
   <path id="svg_7" d="m403,666c0,0 141,0 141,0c6,0 12,-6 12,-12c0,0 0,-88 0,-88c0,-6 -6,-12 -12,-12c0,0 -141,0 -141,0c-6,0 -12,6 -12,12c0,0 0,88 0,88c0,6 6,12 12,12" stroke-width="2" stroke="black" fill="#ffffff"/>
   <text id="svg_8" font-size="9" font-weight="bold" font-family="Helvetica,sans-Serif" y="565.2" x="473.5" text-anchor="middle">forks</text>
  </g>
  <g class="node" id="node1">
   <title id="svg_10">src/BadMapPolyfill.js</title>
   <g id="svg_14">
    <a id="svg_13" xlink:title="BadMapPolyfill.js" xlink:href="src/BadMapPolyfill.js">
     <path id="svg_11" d="m160.5,594c0,0 -74,0 -74,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 74,0 74,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ccffcc"/>
     <text id="svg_12" font-size="9" font-family="Helvetica,sans-Serif" y="605.2" x="88.5" text-anchor="start">BadMapPolyfill.js</text>
    </a>
   </g>
  </g>
  <g class="node" id="node2">
   <title id="svg_16">src/React.js</title>
   <g id="svg_20">
    <a id="svg_19" xlink:title="React.js" xlink:href="src/React.js">
     <path id="svg_17" d="m335.5,764c0,0 -42,0 -42,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 42,0 42,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_18" font-size="9" font-family="Helvetica,sans-Serif" y="775.2" x="297.5" text-anchor="start">React.js</text>
    </a>
   </g>
  </g>
  <g class="node" id="node3">
   <title id="svg_22">src/ReactAct.js</title>
   <g id="svg_26">
    <a id="svg_25" xlink:title="ReactAct.js" xlink:href="src/ReactAct.js">
     <path id="svg_23" d="m498.5,764c0,0 -50,0 -50,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 50,0 50,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_24" font-size="9" font-family="Helvetica,sans-Serif" y="775.2" x="450.5" text-anchor="start">ReactAct.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge1">
   <title id="svg_28">src/React.js-&gt;src/ReactAct.js</title>
   <path id="svg_29" d="m341.78,773c25.81,0 65.39,0 94.24,0" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_30" points="436.3800048828125,770.8999938964844 442.3800048828125,773 436.3800048828125,775.1000061035156 436.3800048828125,770.8999938964844 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node4">
   <title id="svg_32">src/ReactBaseClasses.js</title>
   <g id="svg_36">
    <a id="svg_35" xlink:title="ReactBaseClasses.js" xlink:href="src/ReactBaseClasses.js">
     <path id="svg_33" d="m521,794c0,0 -95,0 -95,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 95,0 95,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_34" font-size="9" font-family="Helvetica,sans-Serif" y="805.2" x="428" text-anchor="start">ReactBaseClasses.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge2">
   <title id="svg_38">src/React.js-&gt;src/ReactBaseClasses.js</title>
   <path id="svg_39" d="m341.69,778.3c14.52,2.91 32.9,6.56 49.31,9.7c8.38,1.6 17.25,3.27 25.94,4.88" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_40" points="417.3999938964844,790.8300170898438 422.9200134277344,793.9900207519531 416.6300048828125,794.9600219726562 417.3999938964844,790.8300170898438 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node5">
   <title id="svg_42">src/ReactChildren.js</title>
   <g id="svg_46">
    <a id="svg_45" xlink:title="ReactChildren.js" xlink:href="src/ReactChildren.js">
     <path id="svg_43" d="m510.5,484c0,0 -74,0 -74,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 74,0 74,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_44" font-size="9" font-family="Helvetica,sans-Serif" y="495.2" x="438.5" text-anchor="start">ReactChildren.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge3">
   <title id="svg_48">src/React.js-&gt;src/ReactChildren.js</title>
   <path id="svg_49" d="m315.08,763.92c-1.21,-37.44 -0.53,-181.16 75.92,-252.92c9.08,-8.52 21.25,-13.35 33.41,-16.01" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_50" points="424.07000732421875,492.91998291015625 430.3599853515625,493.8599853515625 424.8599853515625,497.0400085449219 424.07000732421875,492.91998291015625 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node6">
   <title id="svg_52">src/ReactContext.js</title>
   <g id="svg_56">
    <a id="svg_55" xlink:title="ReactContext.js" xlink:href="src/ReactContext.js">
     <path id="svg_53" d="m508,454c0,0 -69,0 -69,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 69,0 69,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_54" font-size="9" font-family="Helvetica,sans-Serif" y="465.2" x="441" text-anchor="start">ReactContext.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge4">
   <title id="svg_58">src/React.js-&gt;src/ReactContext.js</title>
   <path id="svg_59" d="m316.53,763.78c5.28,-45.43 30.71,-244.92 74.47,-285.78c9.58,-8.94 22.66,-13.42 35.54,-15.48" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_60" points="426.6099853515625,460.3900146484375 432.8299865722656,461.69000244140625 427.1499938964844,464.55999755859375 426.6099853515625,460.3900146484375 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node7">
   <title id="svg_62">src/ReactCreateRef.js</title>
   <g id="svg_66">
    <a id="svg_65" xlink:title="ReactCreateRef.js" xlink:href="src/ReactCreateRef.js">
     <path id="svg_63" d="m513.5,528c0,0 -80,0 -80,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 80,0 80,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_64" font-size="9" font-family="Helvetica,sans-Serif" y="539.2" x="435.5" text-anchor="start">ReactCreateRef.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge5">
   <title id="svg_68">src/React.js-&gt;src/ReactCreateRef.js</title>
   <path id="svg_69" d="m315.53,763.59c0.68,-34.5 7.97,-154.97 75.47,-212.59c8.48,-7.23 19.31,-11.37 30.28,-13.62" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_70" points="421.1099853515625,535.2799987792969 427.3800048828125,536.3200073242188 421.8299865722656,539.4200134277344 421.1099853515625,535.2799987792969 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node8">
   <title id="svg_72">src/ReactElement.js</title>
   <g id="svg_76">
    <a id="svg_75" xlink:title="ReactElement.js" xlink:href="src/ReactElement.js">
     <path id="svg_73" d="m671,546c0,0 -73,0 -73,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 73,0 73,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_74" font-size="9" font-family="Helvetica,sans-Serif" y="557.2" x="600" text-anchor="start">ReactElement.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge6">
   <title id="svg_78">src/React.js-&gt;src/ReactElement.js</title>
   <path id="svg_79" d="m316.79,763.92c6.06,-41.39 33.22,-211.44 74.21,-241.92c29.43,-21.88 129.07,-7.33 165,0c19.73,4.03 40.66,13.27 55.79,20.95" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_80" points="613.1400146484375,541.2900085449219 617.489990234375,545.9200134277344 611.2000122070312,545.010009765625 613.1400146484375,541.2900085449219 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node9">
   <title id="svg_82">src/ReactElementValidator.js</title>
   <g id="svg_86">
    <a id="svg_85" xlink:title="ReactElementValidator.js" xlink:href="src/ReactElementValidator.js">
     <path id="svg_83" d="m528,704c0,0 -109,0 -109,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 109,0 109,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_84" font-size="9" font-family="Helvetica,sans-Serif" y="715.2" x="421" text-anchor="start">ReactElementValidator.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge7">
   <title id="svg_88">src/React.js-&gt;src/ReactElementValidator.js</title>
   <path id="svg_89" d="m327.62,763.9c14.37,-10.32 39.39,-26.88 63.38,-35.9c5.04,-1.9 10.36,-3.56 15.75,-5.02" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_90" points="406.2900085449219,720.9299926757812 412.6300048828125,721.4800109863281 407.3299865722656,725 406.2900085449219,720.9299926757812 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node10">
   <title id="svg_92">src/ReactForwardRef.js</title>
   <g id="svg_96">
    <a id="svg_95" xlink:title="ReactForwardRef.js" xlink:href="src/ReactForwardRef.js">
     <path id="svg_93" d="m516.5,974c0,0 -86,0 -86,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 86,0 86,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_94" font-size="9" font-family="Helvetica,sans-Serif" y="985.2" x="432.5" text-anchor="start">ReactForwardRef.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge8">
   <title id="svg_98">src/React.js-&gt;src/ReactForwardRef.js</title>
   <path id="svg_99" d="m316.03,782.13c2.35,31.42 14.58,135.85 74.97,185.87c7.71,6.38 17.24,10.41 27.05,12.88" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_100" points="418.760009765625,978.8800048828125 424.1700134277344,982.219970703125 417.8599853515625,982.989990234375 418.760009765625,978.8800048828125 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node11">
   <title id="svg_102">src/ReactHooks.js</title>
   <g id="svg_106">
    <a id="svg_105" xlink:title="ReactHooks.js" xlink:href="src/ReactHooks.js">
     <path id="svg_103" d="m506,944c0,0 -65,0 -65,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 65,0 65,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_104" font-size="9" font-family="Helvetica,sans-Serif" y="955.2" x="443" text-anchor="start">ReactHooks.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge9">
   <title id="svg_108">src/React.js-&gt;src/ReactHooks.js</title>
   <path id="svg_109" d="m316.76,782.31c4.35,28.43 21.56,114.65 74.24,155.69c10.73,8.36 24.64,12.59 37.93,14.6" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_110" points="429.29998779296875,950.5299682617188 434.9800109863281,953.3800048828125 428.760009765625,954.7000122070312 429.29998779296875,950.5299682617188 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node12">
   <title id="svg_112">src/ReactLazy.js</title>
   <g id="svg_116">
    <a id="svg_115" xlink:title="ReactLazy.js" xlink:href="src/ReactLazy.js">
     <path id="svg_113" d="m501.5,914c0,0 -56,0 -56,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 56,0 56,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_114" font-size="9" font-family="Helvetica,sans-Serif" y="925.2" x="447.5" text-anchor="start">ReactLazy.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge10">
   <title id="svg_118">src/React.js-&gt;src/ReactLazy.js</title>
   <path id="svg_119" d="m317.68,782.03c6.45,24.65 27.91,93.45 73.32,125.97c12.18,8.72 27.93,12.83 42.34,14.64" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_120" points="433.6700134277344,920.5599975585938 439.4200134277344,923.27001953125 433.2300109863281,924.739990234375 433.6700134277344,920.5599975585938 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
  <g class="node" id="node13">
   <title id="svg_122">src/ReactMemo.js</title>
   <g id="svg_126">
    <a id="svg_125" xlink:title="ReactMemo.js" xlink:href="src/ReactMemo.js">
     <path id="svg_123" d="m505.5,884c0,0 -64,0 -64,0c-3,0 -6,3 -6,6c0,0 0,6 0,6c0,3 3,6 6,6c0,0 64,0 64,0c3,0 6,-3 6,-6c0,0 0,-6 0,-6c0,-3 -3,-6 -6,-6" stroke="black" fill="#ffffcc"/>
     <text id="svg_124" font-size="9" font-family="Helvetica,sans-Serif" y="895.2" x="443.5" text-anchor="start">ReactMemo.js</text>
    </a>
   </g>
  </g>
  <g class="edge" id="edge11">
   <title id="svg_128">src/React.js-&gt;src/ReactMemo.js</title>
   <path id="svg_129" d="m319.18,782.11c8.9,20.78 33.7,71.74 71.82,95.89c11.38,7.21 25.34,11.15 38.48,13.25" stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill="none"/>
   <polygon id="svg_130" points="429.7900085449219,889.1799926757812 435.44000244140625,892.0900268554688 429.20001220703125,893.3399658203125 429.7900085449219,889.1799926757812 " stroke-opacity="0.2" stroke-width="2" stroke="#000000" fill-opacity="0.2" fill="#000000"/>
  </g>
</svg>

This SVG (generated by sverweij/dependency-cruiser: Validate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD. (github.com)) works in Graphviz

strict digraph "dependency-cruiser output"{
    ordering="out" rankdir="LR" splines="true" overlap="false" nodesep="0.16" ranksep="0.18" fontname="Helvetica-bold" fontsize="9" style="rounded,bold,filled" fillcolor="#ffffff" compound="true"
    node [shape="box" style="rounded, filled" height="0.2" color="black" fillcolor="#ffffcc" fontcolor="black" fontname="Helvetica" fontsize="9"]
    edge [arrowhead="normal" arrowsize="0.6" penwidth="2.0" color="#00000033" fontname="Helvetica" fontsize="9"]

    subgraph "cluster_src" {label="src" "src/main.js" [label=<main.js> tooltip="main.js" URL="src/main.js" ] }
    "src/main.js" -> "src/modules/mainmodule.js"
    subgraph "cluster_src" {label="src" subgraph "cluster_src/modules" {label="modules" "src/modules/mainmodule.js" [label=<mainmodule.js> tooltip="mainmodule.js" URL="src/modules/mainmodule.js" ] } }
}

but not with graphviz figma plugin either https://www.figma.com/community/plugin/770827538515501401/Graphviz

On my illustrator [SVG file] will combine the multiple groups in single group. after that it’s working fine now.
image

I found a free SVG editor web-site that can fix this.

https://boxy-svg.com/

Load your SVG in. If you want to see how far off it is from the view box, you can zoom out using “-” (minus). Otherwise, just hit Select All and open the Arrangements palette (Crossed arrows icon on right) and click the Top and Right align buttons. If the View Box does not fit around the geometry, go to the Geometry tab (Rulers), and you can adjust it there.

Fixed 5 SVGs this way.

1 Like

@Adam24 I am facing the same issue with SVG files being 1px by 1px.
Are you saying that this is a recurring issue, for years?!
I just started using Figma yesterday, so I’m not aware of it
Is there a workaround, besides resizing the files manually?

Unable to drag or import SVG in figma again whats happen seriously, this issue has come again and again and there is no substitute or proper solution

Guys what the f**k is happening ya. figma doesn’t support svg i can not import svg directly into file and that’s the reason i’m using one of random plugin for import and that works temp for me but again that plugin has removed in the plugins. now what ???

1 Like

Estava tendo essa problema ao exportar arquivos em SVG no CorelDraw, depois de investigar o código consegui encontrar uma solução. O problema é que eu estava exportando com o Método de Codificação em “Unicode - UTF-16” e aparentemente o Figma aceita apenas o “Unicode - UTF-8”. Mudei apenas essa configuração e o Figma passou a aceitar as importações em SVG.

1 Like

Your method helped. Thanks!

In case someone still struggles with it - try saving the svg as pdf, then import the pdf to FigJam, and then finally copy the element you need from FigJam to Figma