Exported SVG file doesn't appear when I drag it into Figma

[RobertLF]

Today is day one with AD and I'm trying to change the color of a logo in an SVG file and then export it out for use in my Figma project.  I learned how to change the color of the logo's elements in AD just fine.   I then went to File > Export, clicked on the SVG icon in the Export window and entered these parameters:

• Preset: SVG (for export)
• Raster (I left blank)
• Area: Whole document

I then clicked the Export button.  If I now open that new, exported file in my Chrome browser, I can see that I did indeed change the color.

Now typically, if I want to use a logo in SVG format, I can just drag it from Finder into my Figma file and it shows up with no problem.  But when I drag this new SVG file in, I don't see the logo at all.  Instead all I see are three very tiny blue dots lined up horizontally and then what appears to be a small, blue square below them and to the left.

Has anyone here worked with both AD and Figma and know what I did wrong?  Thanks!

Edited March 2, 2022 by RobertLF

[v_kyr]

Hi and welcome!

In AD the default unaltered SVG export options will do generate SVG output with "height=100%" & "width=100%" settings related to the SVG viewBox. So if you open the SVG file in a plain text editor you will proabably see something like ...

Quote

<svg width="100%" height="100%" viewBox="0 0 400 100" version="1.1" xmlns="http://www.w3.org/2000/svg"

If you export as SVG from AD note the "more" button on the bottom center of the export panel, which when pressed pops up another panel where you can set/change several SVG settings for the export options. Uncheck there the set ViewBox option and retry exporting as SVG. - Now you should see SVG code which is genearted like this ...

Quote

<svg width="400px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"

Now retry to import the altered and different generated SVG code in Figma.

BTW, you can also modify the (width="100%" height="100%") setting inside a text editor to (width="400px" height="100px") in order to change this SVG setting.

[RobertLF]

v_kyr, thank you for your suggestion.  I followed your instructions but unfortunately they didn't solve the problem.  When I uncheck "set ViewBox" I still don't see the SVG logo in Figma when I copy and paste it into my Figma artboard.  The one difference from last time is that when I paste the SVG file now, what I get in Figma is a tiny text element that contains the name of the SVG file itself rather the the contents of the file. I experimented with some of the AD Export settings such as the Preset and Area but this didn't make a difference.  I don't see why something so seemingly simple isn't working.

[pgraficzny]

Hi and welcome!

I am working with AD and Figma under Windows. When I export SVG with no Set viewbox, after dragging to Figma (desktop app) the logo is generally OK, but Your troubles happen. Then it is enough to change the size of the graphic as shown in screenshot.

Sorry for my English.

If the image consists of contour lines (stroke), they are so thin that you cannot see them and you need to change their thickness.

Edited March 2, 2022 by pgraficzny

[RobertLF]

Thanks pgraficzny.  I'm wondering if part of the problem is that I have three layers and I have to recombine them after I change the color of each?  What I mean is this.  The SVG logo has three parts, or layers, as I guess they're called.  In order to change the color of each layer, I clicked the Edit Document button at the top and then selected each layer in turn and changed its color.  But after I did this, I still have these three separate layers.  Do I have to do something to them first to combine them all together again into a single document like what I started with and then do the export?

For now, I'll just try exporting them as is and see if the problem is with the SVG's dimensions in Figma.

Thank you for your help. Your English is just fine.  You know much more English than I do Polish so you've got me there.   

[pgraficzny]

Layers and groups shouldn't be a problem in Figma, only the set viewbox option turned on. Attach the problematic SVG file here.

[RobertLF]

I think I've got it figured out.  Let me just ask you this.  If you release an SVG file (document) in order to work with the individual layers, do you have to "unrelease" the layers (reverse the process) before you export them to a new SVG file?  If so, do you do this simply by grouping them or is there a different AD command to accomplish this?

The second problem I had was that when I brought the SVG file into Figma, I needed to use "Scale" when resizing it.

Thank you again for your help! 

 

Edited March 4, 2022 by RobertLF

[pgraficzny]

Look at this:

Boolean operations and non-destructive compounds | Affinity Designer for desktop tutorials (serif.com)

Expand stroke | Affinity Designer for desktop tutorials (serif.com)

I couldn't see this file   SVG files dragged into Figma have problem with object scale (with viewbox option) and line (stroke) thickness.
You should be aware of what kind of objects this logo consists of.