Svg code acting up

Themes
1

Hi everyone,

I am facing strange behaviour with SVG logos injected directly in the .hbs files. (It isn’t a link to a .svg file)
Both logos appear on my page, however, in Safari part of logo1 is missing and logo2 is complete. If I delete logo2. Logo1 is then displayed properly.
In Brave (and also edge and vivaldi), it is the other way around. Logo1 is complete, logo2 is missing some parts. Removing logo1 makes logo2 be complete.

Both logos are in a different part of the page.

Any ideas?

I’m using the latest versions of each browser.
It has been tested on MacOs, iPad, iPhone, Linux (Brave only) using the latest updates and with each browser named earlier.

2

@WatsonJH Hi! Which browsers are you using? And which one is Browser A and Browser B? And are you using the most updated versions of these browsers? Also, what operating system or environment are you using?

3

Hi @DonaldH

I’m using the latest versions of each browser (Brave, Safari, Edge, Vivaldi).
It has been tested on MacOs, iPad, iPhone, Linux (Brave only) using the latest updates and with each browser named earlier.

I updated my first post with details :slight_smile: .

4

:confused: still trying to figure this one out.
I don’t understand how one svg can interfere with another one.

5

@WatsonJH
SVGs can contain code such as CSS which could interfere with other SVGs. Can you send a link to the page and/or upload your logo so I could take a look for you?

6

@unfurbled
I have sent you the files in private. The code is too long to paste here, and the site is not live yet.

Cheers :slight_smile:

1 Like
7

@WatsonJH
On brief inspection of the files, my initial thought is that, as the clip paths are referencing ids found in both SVGs, you are inadvertently clipping the wrong sections of your logos.

<clipPath id="_clip1"> is found in both files

<g clip-path="url(#_clip1)"> is also found in both files.

Try changing the id in logo2.html to _clip2 (both instances) and let me know how you get on.

Note:
I am an advocate of SVG. In some cases it is more efficient than other “image” file types. However, due to the complexity of your logo, your SVGs are larger in file size than your PNGs. Unless there is a specific case for it here (?), you may get better results from using the PNG logos.

With that said, your SVG logos would be a lot smaller in file size if the code were rewritten more efficiently.

UPDATE
Out of curiosity, I tweaked the code in your 2nd logo and was able to reduce the file size to lower than your PNG, removing the offending clip path altogether.

PNG (logo2) = 46.6KB
SVG (logo2) = 65.8KB
New SVG (logo2) = 15.5KB

I haven’t uploaded as I don’t know if you want it or want it uploaded here.

Note
I suggest avoiding live fonts in your logos (convert to paths instead) as they likely won’t display as desired on other machines.

1 Like
8

Hi @unfurbled

Changing clip1 to clip2 did fix the problem.
For the font, the files are in the theme folder and the CSS calls it. I take note of your advice and I will work on a all paths svg instead :slight_smile:

I use svg instead of png files, as I find they are rendered better.

Thanks for your precious help.