This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
John Smith
Posted Oct 17 - Read on Facebook

I've been running into a strange issue when importing my own icons as SVG's. When I output them via sketch I will edit the file via a text editor to remove the ' fill="#FFFFFF" ' attribute. By doing this I've found that I have complete control much like the icon used in the icons panel. Yet when I position them in my layout, via design view, when I view it on the code side the icon is shift 20 pixels below from where I position it (on the design view). I have to offset the 20 pixels to match the design when viewing via the code view. Is there a reason why this is happening? Is it because I've removed the fill attribute in the svg file?


Ian McClure

I’ve noticed that Sketch likes to add padding to paths. At least when I have copied paths from Sketch to Affinity Designer.

John Smith

here is an example of what I am referring to. The icon shift about 4 pixels down when viewing it in the code view but when you view it in the design view it exactly within the bounds of the circle.

Ian McClure

I think it has to do with your SVG file. If you look in .framer/images/design there are two files with giant names.
The top one starts with "CbzDT" and is the file that framer is actually using. If you open it in a text editor you'll see the coordinated of the points "M304, 10" That is an anchor point with an X of 304 and Y of 10. Everything is drawn with an X around 300 then shifted over via that transform property. My guess that translation in the SVG is what is causing the problem because the other SVG in the folder ("Lw4oq...") works perfectly and doesn't have the internal translation property.

To fix it, I deleted the two crosses from the design tab and imported the other SVG ("Lw4oq...") into the project.

Ian McClure

It is weird that the shift in framer is a vertical one and the shift in the transform property in a horizontal one but that might be a weird thing with WebKit.

Read the entire post on Facebook