SVG not showing up on media file or on the front end

Hi there,

My plugin works great with Divi.

I do however have this in my theme CSS to make sure the SVG images always show up because they can display at 0px sometimes due to the nature of SVGs not actually being images:

.et_pb_image img { width: 100%; }

I also noticed you might be using the “Force Inline” feature of my plugin, which is very rarely needed and not recommended. It’s not necessary with Divi… And may even cause issues. So try flicking that off too.

I can see all the content within your header section, it just has a white/transparent background with white text on it. Not exactly sure how this would be affected, but you never know. Try those 2 things and let me know.

Thanks Benbodhi for your super swift reply! ok I have just done the 2 points you mentioned and still no joy!

I have opened up in firefox and all working perfectly! so it is a case of the browser, could you have a fix?

Thanks again ??

I believe your issue is that you are using the SVG files as background images in CSS and they are not actually true SVG files, they have PNGs or JPGs just placed in them.

I would convert them to PNG or JPG for the backgrounds since they aren’t actually vectors anyway.

Also, save for web, they are absolutely massive. This presents many issues with loading. Just the news and reviews image alone is over 3MB :O

PS. That’s a cool section you’re building ??

Thanks Benbodhi, yes you are correct they are background images but the text comes out all blurry in png and jpg, everyone said use svg?!? I just want to give it with wow look if you see what I mean?

I understand that for sure.

But you will not be using true vectors as long as there is any raster images inside the SVG. SVG format is useless while they contain raster images since they will not scale at all and will give you weird results as you’ve found.

SVG is best for icons, logos, simple background elements and things like that, to allow scalable quality and small file size. In this case, I think the rule of “use SVG” has led you astray a little. Though, you could use SVG for the text only, similar to an option that I will explain next.

You should be able to save the images with text as PNG without losing the quality, provided they are the right size. And save the photo only style backgrounds as JPG to save on file size. (always save for web).

As it stands, the images are way too big to load correctly anyway, so you would need to reduce the file size regardless of quality.

To be honest, I would adjust the way you implement this, but it may get a bit technical. What you’re trying to achieve is quite a technical effect.

You could use raster (image only) JPG/PNG backgrounds that switch out, and put the text elements (or SVG with outlined text only) in the markup separately. Just set the classes/IDs on the new text element divs/SVGs and show/hide them along with the correct background.

This will have the added benefit of the text being searchable for SEO too.
That’s the approach I would take personally.

—–

Now, your title of this thread says the SVG is “SVG not showing up on media file or on the front end”.

Are you able to upload a proper SVG to test please?
Here is one that I know is ready for upload: https://www.dropbox.com/s/qq9nx5ys9oyqqqd/mrbill-sample-pack-15_min.svg?dl=0

Hi there,

I will mark this thread as resolved since the issue at hand is not the problem you’re having.

Help is here if you need it still though.