SVGs not showing in Chrome, Safari

  • Simple Social Icons v2.0.1
    In Chrome and Safari, Simple Social Icons SVG’s not showing. If I refresh the screen, they appear and stay visible from page to page. Clear cache or open in Incognito Window, problem returns. Works fine in FF, IE, Opera.

    I am using SSL and CDN while hosting at WP Engine. I have other sites that have the same setup but don’t show this problem. The only difference, or unique element in setup of this site is that client requires the WWW subdomain to be used.

    I have no unique plugins installed that I am aware of.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter stinkykong

    (@stinkykong)

    There seem to be a lot of issues reported and the cause seems to be varied and sundry except for they all involve SVGs not showing and no response from the plugin developer. Am I mistaken? I love this plugin and would be willing to pay for it… just need it to work.

    • This reply was modified 7 years, 10 months ago by stinkykong.
    Plugin Contributor Nick C

    (@modernnerd)

    Hi, @stinkykong, and sorry to miss your original post here.

    There are three issues that have caused display problems with the new SVG icons so far. They all relate to server configuration:

    1. If you haven’t cleared any caching plugins (including CDNs and other offsite caches such as CloudFlare) since updating the plugin, that’s worth doing as a first step.

    2. Icons may be served from a different domain to the main site. This can generate cross-domain errors (visible in your browser’s console). The fix is to serve them from the same domain (example 1, example 2), or ask your host/CDN provider to add a CORS header to permit the icons to load from the other site (example 3).

    3. If your host is serving SVG files with the text/plain type instead of image/svg+xml, that can cause display issues. The fix is to adjust the MIME type for SVG files in your server config, or reach out to your host for help. (Example here showing the type in the network panel in Chrome’s developer tools: https://www.ads-software.com/support/topic/blank-icons/ ).

    If icons display but appear warped, scaled, or miscoloured, it’s possible your theme’s stylesheet needs to be updated. The change to make depends on your theme, but you can see an example here.)

    If the above doesn’t solve this and you’d like more specific advice about which issue could be the cause for you, please feel free to link to your site and let me know what troubleshooting steps you’ve tried so far.

    We have CORS enabled but still getting blank page

    Access-Control-Allow-Methods
    PUT, GET, POST, DELETE, OPTIONS
    Content-Type
    image/svg+xml
    Access-Control-Allow-Origin
    *

    https://www.nuglowskincare.com/blog/

    here is the console error

    Unsafe attempt to load URL https://nuglowblog.upshotcommerce.com/wp-content/plugins/simple-social-icons/symbol-defs.svg from frame with URL https://www.nuglowskincare.com/blog/. Domains, protocols and ports must match.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘SVGs not showing in Chrome, Safari’ is closed to new replies.