# SVG's

**URL:** <https://forums.realmacsoftware.com/t/svgs/48209>\
**Category:** Elements\
**Created:** [June 20, 2025, 3:19pm UTC](https://forums.realmacsoftware.com/t/svgs/48209 "2025-06-20T15:19:51Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![graham-sm1th](https://avatars.discourse-cdn.com/v4/letter/g/5f9b8f/32.png) [@graham-sm1th](https://forums.realmacsoftware.com/u/graham-sm1th)\
**Post date:** [June 20, 2025, 3:19pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/1 "2025-06-20T15:19:51Z")

</div>

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,

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 20, 2025, 3:42pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/2 "2025-06-20T15:42:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![graham-sm1th](https://avatars.discourse-cdn.com/v4/letter/g/5f9b8f/32.png) [@graham-sm1th](https://forums.realmacsoftware.com/u/graham-sm1th)\
**Post date:** [June 20, 2025, 6:25pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/3 "2025-06-20T18:25:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 20, 2025, 7:15pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/4 "2025-06-20T19:15:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![graham-sm1th](https://avatars.discourse-cdn.com/v4/letter/g/5f9b8f/32.png) [@graham-sm1th](https://forums.realmacsoftware.com/u/graham-sm1th)\
**Post date:** [June 20, 2025, 7:27pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/5 "2025-06-20T19:27:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 20, 2025, 7:57pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/6 "2025-06-20T19:57:13Z")

</div>

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

create a new project just for your svgs if needed

---

<div class="post-metadata">

**Author:** ![graham-sm1th](https://avatars.discourse-cdn.com/v4/letter/g/5f9b8f/32.png) [@graham-sm1th](https://forums.realmacsoftware.com/u/graham-sm1th)\
**Post date:** [June 20, 2025, 9:09pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/7 "2025-06-20T21:09:47Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 20, 2025, 9:18pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/8 "2025-06-20T21:18:30Z")

</div>

No link or video image

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 21, 2025, 3:03am UTC](https://forums.realmacsoftware.com/t/svgs/48209/9 "2025-06-21T03:03:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 21, 2025, 10:12am UTC](https://forums.realmacsoftware.com/t/svgs/48209/10 "2025-06-21T10:12:34Z")

</div>

> [@graham-sm1th](#):
>
> I looked at the file uploaded

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

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [June 21, 2025, 10:56am UTC](https://forums.realmacsoftware.com/t/svgs/48209/11 "2025-06-21T10:56:51Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![graham-sm1th](https://avatars.discourse-cdn.com/v4/letter/g/5f9b8f/32.png) [@graham-sm1th](https://forums.realmacsoftware.com/u/graham-sm1th)\
**Post date:** [June 22, 2025, 11:05am UTC](https://forums.realmacsoftware.com/t/svgs/48209/12 "2025-06-22T11:05:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 22, 2025, 11:10am UTC](https://forums.realmacsoftware.com/t/svgs/48209/13 "2025-06-22T11:10:07Z")

</div>

Glad you got it sorted 😊

---

<div class="post-metadata">

**Author:** ![graham-sm1th](https://avatars.discourse-cdn.com/v4/letter/g/5f9b8f/32.png) [@graham-sm1th](https://forums.realmacsoftware.com/u/graham-sm1th)\
**Post date:** [June 22, 2025, 11:21am UTC](https://forums.realmacsoftware.com/t/svgs/48209/14 "2025-06-22T11:21:27Z")

</div>

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

 ![Screenshot 2025-06-22 at 12.17.34](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/a/5a21e1d82cfbf009e327b7f8e677da2b8e4383c1.jpeg)  
?

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 22, 2025, 2:24pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/15 "2025-06-22T14:24:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [June 22, 2025, 2:59pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/16 "2025-06-22T14:59:25Z")

</div>

I assume form your post you have it sorted now?

---

<div class="post-metadata">

**Author:** ![graham-sm1th](https://avatars.discourse-cdn.com/v4/letter/g/5f9b8f/32.png) [@graham-sm1th](https://forums.realmacsoftware.com/u/graham-sm1th)\
**Post date:** [June 22, 2025, 3:39pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/17 "2025-06-22T15:39:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 22, 2025, 3:55pm UTC](https://forums.realmacsoftware.com/t/svgs/48209/18 "2025-06-22T15:55:52Z")

</div>

@graham-sm1th

is this what you mean
