Adding an SVG to a Raw Content element changes the appearance of other SVGs on page

[one_eyed_man]

I have four SVG torn paper dividers that I created in Illustrator - Purple Up, Purple Down, White Up, and White Down. I uploaded them to this folder so you can view/download if needed.

On my homepage, when I paste the code for Purple Down and Purple Up into Raw Content elements in the first two divider sections, they display as expected:

However, when I paste the code for White Up into the 3rd divider section, it not only displays incorrectly for that divider (i.e. a second partially-transparent duplicate appears on top of it), but it also breaks the dividers in the previous two sections, changing their color to white.

The same thing happens if I paste the code for White Down in Divider 3 - Divider 1 and 2 change to white. As soon as I delete the code from Divider 3, Dividers 1 and 2 return to their normal purple color.

I’m very new to SVGs, so I don’t know if this is a problem with my SVG files or with the theme. I exported all the SVGs the same way through Illustrator.

I left the code for White Up in the Divider 3 Raw Content element so you can view the problem yourself on my homepage. Any advice is appreciated.

[tristup]

Hi @one_eyed_man,

Thanks for reaching out.
Thanks for explaining the issue in detail, but it will be very difficult to recognize the issue without investigating it through the admin dashboard. Can you please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– Specific page URL and section which has the broken SVG
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[one_eyed_man]

I added the Secure Note.

[one_eyed_man]

Any ideas guys?

[marc_a]

Hi @one_eyed_man,

We don’t see any issue with the SVG using our theme and it is hard for us to determine the root cause of the issue because we don’t see the actual code and actual layout of your SVG. I suggest that you review again your SVG code because you might miss something.

Thank you.

[one_eyed_man]

That’s not very helpful . I don’t understand what you mean when you say that you don’t see the actual code and layout of my SVG - can you not see the problem I’m talking about when you go to my homepage?

^ Do you see the ghosting on the bottom SVG, and how the top two are white when they should be purple?

You can view the code if you login to my website with the credentials I provided. You can also access the SVG files themselves via the hyperlink in the second sentence of my original post, or you can access my homepage from the front end and right-click Inspect the divider elements to see the code.

I tried digging into the SVG code myself, but I could not figure it out. To be clear, I did not code these from scratch - I exported them from Illustrator as SVGs and followed your tutorial to add them to my page.

Each SVG has open and closing tags - shouldn’t that make them contained elements? How is it possible that adding an SVG to a Raw Content section could change the color of other SVGs halfway up the page?

[ruenel]

Hello @one_eyed_man,

Your need to swap out the top and bottom SVG.

I went ahead and I already swapped it out. I also changed your element structure from using the classic section/row to the new section/row elements. I enabled the Flexbox option of the column to prevent any gaps in smaller devices.

Please check your page now and see the element settings of the top divider section.

[one_eyed_man]

I appreciate the try, but the problem is not solved. You simply rearranged the elements to make it look passable, without addressing the actual issue. See the white “ghosting” effect in your screenshot? That is not what my SVG looks like. It should look like this:

The ghosting in your screenshot is the problem I’m talking about. It appears that the SVG is duplicated on top of itself, and the design looks very sloppy. I spent a long time in Illustrator getting the shadows how I wanted. Surely you can respect effort put into design?

If you look at the screenshot in my first post, you’ll notice that the torn paper above and below the quote is purple. Currently they are still white. That is the issue. For some reason, when I add a white SVG to Divider 3, the purple SVGs in Divider 1 and Divider 2 turn white as well.

If you can help me make it so Divider 1 and 2 are purple while Divider 3 is white, I will be eternally grateful.

[tristup]

Hi @one_eyed_man,

I have added the white SVG to the Divider 3, but unfortunately, didn’t find the issue you described here. I would request you to clone the same page and add the white image to the divider 3 and let us know if that creates the same issue keeping the same structure on that page.

Thanks

[one_eyed_man]

I cloned the page and tried your suggestion but the same problem arose.

The effect looks decent and doesn’t glitch when I use only purple dividers so I’m just gonna use those and skip the white ones altogether since we can’t figure out the problem. Thanks anyway.

[ruenel]

You are most welcome.