SVG imports as black

[camgk]

Hi All,

New user to affinity designer here!

I am trying to import some svgs into the program, but they seem to always come up as completely black. It seems to be fine on browser SVG viewers and AI. another problem is the dotted bands either side do not properly import either, they load in as this shape attached.

Any advise on how I can get this to properly import?

Cheers!

[v_kyr]

Hi and welcome!

Affinity's SVG parser handles just a common subset of the SVG specification, meaning it doesn't handle all the SVG spec offers. So in your case it probably doesn't know to deal with the defined styles there. - So if you have Illustrator too export as PDF (try PDF for exchange) and try to import the PDF into Affinity instead.

[Ross Burton]

I just hit exactly this.  It appears that Affinity doesn't parse embedded CSS correctly, which is a damn shame as I just spent two evening making a tool that exports SVG with CSS files to discover my time was wasted...

[rgladwin]

On 3/7/2021 at 6:06 AM, v_kyr said:

export as PDF (try PDF for exchange) and try to import the PDF into Affinity instead.

There are online tools as well. I tried this and it worked: https://cloudconvert.com/svg-to-pdf

[Sheilaq6931]

Hi all,

Well, I have experienced the same thing, but found a solution. I cannot take credit for it, but I found it in a Quora Google thread. I have tested it in both Affinity Designer 2.3 and Publisher 2.3 and it is a super easy fix - at least it was for me.

When you open your SVG and see the dreaded solid black. Look in your Layers palette. You will see that there is a "rectangle" layer AND the actual image layer (At least this is what I have seen on my SVG images with this issue.). You will see that the rectangle layer looks to be solid black -- and, yes, it is as it has a black fill AND a stroke (usually). All you have to do is select that black rectangle layer and then choose "no fill" and leave the stroke if you want one -- or choose "no stroke" for the image as well.

VOILA! You can now see your image. I hope this works for everyone else!

 

[TCO Jonathan]

Greetings All,

I'm a new user, evaluating alternative tools after Adobe's wonderful TOS update, and am finding that lots of SVG files are behaving the same say in Designer. For example, the YMCA logo online with blue and purple gradients, imports as black. BUT -- when I open it in Illustrator (which I'm keeping for a bit while transitioning), it opens fine. And if I save a new copy as an SVG, it opens fine in Designer.

It's obviously not a great solution, but it does bring me some comfort knowing that years worth of legacy logos and illustrations won't have to be re-done.

Hopefully this helps somebody else.

Best,

Jonathan

[mopperle]

Welcome Jonathan, you are aware that you posted in the Pre-V2 forum? So if you got the AF Designer in version 2, you better make a new topic here:

https://forum.affinity.serif.com/index.php?/forum/5-affinity-on-desktop-questions-macos-and-windows/
And please mention, which exact version you are using, Mac or Windows, OS-Version, and maybe you can attach an example file.

[mopperle]

Sorry forgot to add the link, corrected now.

[TechspiredMinds]

I figured out what the general problem is:

Affinity (and some other programs) seem to have a problem to read the so called shorthand css:

Quote

.cls-1, cls-2 {fill: #fff;}
.cls-3 {fill:#000;}
.cls-1 {stroke-width:1.9941px;}

I wrote a converter that changes the file into this format (you can also do it manually) and then everything works as normal:

Quote

.cls-1{fill: #fff;stroke-width:1.9941px;}
.cls-2 {fill: #fff;}
.cls-3 {fill:#000;}

 

Edited July 10, 2024 by TechspiredMinds
More clarity