SVG Image Not Displaying on Mobile

  • Resolved countrymusic

    (@countrymusic)


    3 years, 9 months ago

    Hi, I noticed a couple people in the past had a similar issue, but their solutions did not seem relevant or correct.

    The .svg image uploads correctly and displays correctly as a logo on desktop in any browser. The logo .svg does not display on android or iphone in any browser.

    I greatly appreciate any suggestions.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    Hi there,

    You just need to set a width using CSS, it’s rendering at 0px wide.

    Something like this will work:

    header .custom-logo-link img {
width: 390px; // I set this to the same as your existing max-width
}
    Thread Starter countrymusic

    (@countrymusic)

    Thank you for the quick reply, I wish I had seen this earlier ??

    Your solution kind of works. The text of the svg logo displays now on mobile, but the image does not display the same font on the svg image that I uploaded.

    Thread Starter countrymusic

    (@countrymusic)

    I tried uploading another svg with text for the website logo, and not only is the font not the same on the website, but 2 words have now been separated into 3 words …

    Plugin Author Benbodhi

    (@benbodhi)

    Ok, that’s a separate issue.

    You need to outline your fonts in your vector software as if sending to print.
    It won’t carry through the font information, so outlining fonts will make it pure vector.

    I always expand objects and outline fonts so it’s wysiwyg.

    Let me know how that goes.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘SVG Image Not Displaying on Mobile’ is closed to new replies.

Tags