Affinity Designer SVGs Imported into Figma do not show up

[csaborio]

I am going mental with this...I am exporting an SVG file in Affinity Designer (attached) and when I drag it into Figma, I get what the attached screenshot shows.

I have unchecked "Set viewBox" as suggested in other posts but it still does not display the image. PNG files display fine but I'd like to use an SVG in Figma.

Thank you.

 

scorpiotek-logo-white-with-tail.svg

[Dan C]

Hi @csaborio,

Welcome to the Affinity Forums

Please see the below thread where this has been discussed previously -

I can also see your SVG has been exported as a Raster layer,within a group, within another layer object and this may be causing issues for you when importing.

Could you please provide a copy of the Affinity document used to create this SVG file?

Many thanks in advance!

[v_kyr]

Well your SVG file contains just an embedded base64 encoded PNG raster-image (sized 480x161px), so no vectors at all!

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="490px" height="171px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,-234,-195)">
        <g transform="matrix(1,-0,-0,1,234,195)">
            <use xlink:href="#_Image1" x="9.104" y="0" width="479.419px" height="160.897px" transform="matrix(0.99879,0,0,0.99936,0,0)"/>
        </g>
    </g>
    <defs>
        <image id="_Image1" width="480px" height="161px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAChCAYAAAAfp2zoAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAgAElEQVR4nOydd3gU1frHv7MlhRQCBAgxdBIQlCoIiLQrIk1AKQJKEwTBhsJV+OEFBQtF0XuRJqIIShUBkSIgLUoLwdAhIQkJ6W2zye7Olpnz++PssJuwSWY2mxDgfJ5nnsDulDOzM+c7bznvUYPBYDAYDM/A2ReVfVED0ERFRYUkJiaKN2/e1ADwti9eTv92/swLgNa+aJz+qu2LtG/O6a/zsRkMBoPBeKiQBFENQDNlypRqZrN5CQBfo9H4FSHEbLPZrvM8vy8/
...
4AD6Rc1xiY8mQMyfp7GxLKANEhwoAIJDoT2Mf/dh4LkBIxHZTwSHMi3pQOpWhl04dmTxt8B/AhknvmmVkcAAAAASUVORK5CYII="/>
    </defs>
</svg>

 

[csaborio]

@Dan C Thank you, I looked at that forum thread and that's where I unchecked Set viewBox option but that did not make a difference. I've attached the file (cleaned it up), it's only text now and I can't seem to export that as an SVG that Figma can use.

@v_kyr Thank you, I was not aware of that. Why would AD export and SVG embedding a PNG? That defies the whole purpose of creating an SVG...I'll fiddle around with settings, thought exporting an SVG would be a bit easier than this...

 

scorpiotek-2021.afdesign.zip

Edited October 9, 2021 by csaborio
Cleaned up file

[PixelPest]

Next hurdle: one will need the font "Oakle" to make it look correct. Better convert the font to shapes with "Convert to Curves" to make the look permanent for all applications.

[R C-R]

9 hours ago, csaborio said:

Why would AD export and SVG embedding a PNG? That defies the whole purpose of creating an SVG..

FWIW, the SVG format supports bitmap (raster) images as well as vector objects, so it is possible for an SVG file to have nothing in it besides one or more raster images.

[v_kyr]

11 hours ago, csaborio said:

...

@v_kyr Thank you, I was not aware of that. Why would AD export and SVG embedding a PNG? That defies the whole purpose of creating an SVG...I'll fiddle around with settings, thought exporting an SVG would be a bit easier than this...

Well, as PixelPest said, convert the font shapes to curves. Further don't apply those color overlay and shadow FX styles, these will yield finally to rasterization on export, aka bitmap/raster portions output into the generated SVG. - Instead color the Oakle text in the usual manner, make white and gray artistic text ones, put the gray one below the white one and reposition it slightly in a way that it looks like a shadow you want. Export to SVG with text as curves.

• scorpiotek-test.afdesign
• scorpiotek-test.svg

The SVG format is of course also capable of embedding raster/bitmap images into SVG code (via base64 encoding of bitmap images), though it's main purpose is creating/working with vectors for Web based presentations. - In your case it's Affinity which generated an embedded bitmap due to the FX style usage and SVG export options used.

[Wosven]

You can use a duplicate with a gaussian blur to keep it vector.

scorpiotek-logo-white-with-tail.afdesign

scorpiotek-logo-white-with-tail3.svg

[csaborio]

Hey there @Wosven @v_kyr @R C-R @PixelPest & @Dan C:

First off, I just want say how pleasantly overwhelmed I feel with the response from this forum. I was ready to be buried under a barrage of "get lost n00b" answers but you have proven me wrong.  Thanks all for your patience, as you can tell, I am indeed an SVG noob but man I have learned a lot from this.

I have followed the invaluable advice presented here and the bloody logo now shows fine in Figma. What you wrote made sense in terms of the graphic effects, and the workarounds you provided worked like a charm.

Thanks again, I am most grateful :-)