SVG's

I have created some SVG’s in affinity 2
and they work fine until I made one with a black infill. This makes the much lighter hue of the other SVG’s turn black, I guess there must be a bug somewhere causing this. Are you able to fix this issue,

It sounds like the SVG with the black fill might be affecting how styles or inherited colors are being applied across the other SVGs… especially if they’re using currentColor or shared CSS rules. This doesn’t sound like a bug in Elements, but more likely an issue with how the SVGs are styled or structured internally.

Can you share a project (via Elements Cloud) showing the issue so we can take a closer look and advise on the fix?

Hi Dan I have uploaded the project you will see that the SVG above the footer is fine but the one at the 2nd from top is not and is completely different to the one uploaded weird

Can you share the link to the project so I can take a look?

How do I do that because it is just housed on my computer

@graham-sm1th see below video then just paste link here

create a new project just for your svgs if needed

1 Like

I looked at the file uploaded, if you delete the huge svg and replace it with a blue one from the resources, yo will see that it replaces it with a different styled one in black and when the 20 is set to auto it almost fills the span but not quite, it would if it loaded the correct one that is visible in the svg display, in the inspector ui.

No link or video image

Graham yes that is the link if it is not sensitive you can paste it in the forum in this thread

Can you paste the Elements cloud link to your project here on the forum, so we can take a look at it for you?

@graham-sm1th I use affinity and save as a png. I then drop the png into Fontawesome icon maker and make an svg item out of it for my icons e.g. mu company assets. For other bits I use an outline only and then “colour it in” with defaults in ELEMENTS.

Problem solved. I hadn’t noticed that the exported SVG from Affinity was changed from 1500 px original size to 178000 px it is now 500 x 50px and works fine. Sorry for troubling you guy’s when you have so much on.

Glad you got it sorted :blush:

Hi Paul many thanks ,

Sorry been busy and just seen your post. Ideally I would like part of the svg to be transparent so that as a divider it blends with just one side adding shape and floats over the adjaecent container/ image /text as a partial mask. Is this possible to achieve, I’m pretty sure it must be. Here I don’t really want to see the cream colour just the background image beneath the mask


?

SVG’s do support transparency, you’ll just need to design it correctly in your graphics app before importing into Elements.

I assume form your post you have it sorted now?

I create it as png file with transparent background however when imported it has a white background unlike the png

@graham-sm1th

is this what you mean