Hi Paul,

Thanks for reaching out to us.

For your issues, You don’t need special browser-specific code.

This is normal responsive behavior differences between browsers.

Why it happens: • Slight differences in mobile viewport width can cause header text to wrap. • SVGs may behave differently if they have fixed widths or missing viewBox. • Browsers render fonts slightly differently.

What to do: • Make sure SVGs use viewBox and width: 100%; height: auto; • Adjust font size or spacing for the mobile breakpoint • Use media queries instead of browser-specific fixes

This is a responsive tuning issue, not a bug.

Thanks

Ok thanks, but after even investigating online explanations, and seeing the image already seems to have those input, perhaps it's another issue ? But as a newbie I don't know.

So have included details / screenshots in the hidden section.

The .svg files display fine on same mobile screen for firefox ( and all other views in all browsers I've checked so far ). Haven't checked others yet. It's just the mobile view in duckduckgo, which is my own phone motoG30.

My phone, DDG browser, still broken .svg images. But as before, perfect display in firefox, same mobile phone. Don't have access to a different mobile just yet

Cleared browser cache, still broken.

Using browserstack.com testing site, is also breaking in some chrome browsers. Breaking in Opera as well.

Maybe it's the img conversion ? Do I upload .svg files at full size, or resize to the site defined 40x40 size and then upload ? will go check...

Perhaps, but testing on several browser / device testing sites, which have current browser versions & devices, seems to show broken .svg images in many types - chrome, opera, brave, edge, - but not in firefox. Assuming these are reliable services, don't think you can assume it's not possibly template or pagebuilder related. I'll keep looking but if you have any ideas, please let me know.

Update - reinstallingan original template .svg image ( icon-creativity2 etc ), results in it being published as desired across all browsers & devices ( testing at browserstack testing ), INCLUDING my seemingly problematic moto G30.

So now I have to figure out why my replacement .svg files are not working in some browsers.

Haven't figured this out yet.

Using or reinstalling the original template .svg files results in correct publishing on all browsers / devices ( testing at various browser / device testing sites ), including my own problematic motoG30.

Converting an image file ( jpg ) using an online svg converter ( eg adobe ) publishes correctly in some browsers / devices but breaks in many browsers / devices ( eg chrome, edge, opera, brave ). Publishes correctly in firefox & tor.

Looking for different svg conversion tools to see if that is the problem.

Suggestions welcome.

PS Btw, images displayed as 40x40 jpgs display well in all formats. Why are we using svg files ?

Hi Paul,

Thanks for the detailed investigation and updates.

Based on what you described, the template itself appears to be working correctly because the original template SVG files display properly across all browsers and devices. The issue is most likely related to how the replacement SVG files were generated.

Many online converters export SVGs with extra attributes, unsupported tags, or missing properties that can cause inconsistent rendering between browsers. Firefox is usually more tolerant, while Chromium-based browsers (Chrome, Edge, Brave, Opera, etc.) can be stricter.

Here are a few things you can try:

• Open your SVG file in a code editor and check that it includes a proper viewBox attribute. • Remove fixed width and height values if they conflict with responsive CSS. • Avoid embedded raster images or unnecessary metadata in the SVG. • Try optimizing the SVG using a tool like SVGO or exporting it directly from a vector editor such as Illustrator, Figma, or Inkscape. • Compare your SVG code with one of the original template SVG files to see what structure might be different.

Regarding your question about why SVG is used: SVG icons are vector-based, which means they scale perfectly on all screen sizes and remain sharp on high-resolution displays, while JPG/PNG images can become blurry when resized.

Best regards.

hey thanks for the guidance. I was using adobe online svg cnverter, which I was assuming would be fairly high standard / not slack and very multi browser friendly ( because well, it's adobe ). Will see how we go....

PS have also discovered firefox has an addon called SVG Extractor Pro, which is quite useful for me so far. Can identify, save, copy & view source in a click from a webpage.