SVG logo doesn't display in WebKit/Blink browsers

[morganestes]

First noticed in 3.8 update, still happening in trunk. Tested using DesktopServer 3.6.1 (Apache/2.4.4 (Unix) PHP/5.4.19 OpenSSL/1.0.1e mod_perl/2.0.8-dev Perl/v5.16.3).

When viewing the wp-admin/about.php page, the WP logo is missing in Chrome, Safari, and Opera on Mac. Since those browsers supports SVG, the CSS falls through the PNG version and tries to display the SVG but it isn't recognized (lined out in the inspector). This doesn't happen in Firefox.

I'm running Apache, and adding the SVG support to .htaccess in the root directory works for me, but I don't think it's a solid solution for fixing across the board. Since it works in Firefox without adding these lines, I'm wondering if there's a better solution for general use.

​http://www.w3.org/services/svg-server/ gives solutions to add support to servers, but I'd like to find something that works on first install if the browser supports it.

[morganestes]

Missing logo in WebKit/Blink

[morganestes]

Logo present in FF

[SergeyBiryukov]

Related: #25224

[morganestes]

This also affects the login page, and anyplace else that SVG is being used.

[jaredatch]

Yep, encountering this globally as well.

[pross]

Chrome Mac, server nginx/fpm

[iammattthomas]

Don't believe I have a suggestion here since it appears to be a server configuration issue from Sergey's comment here: https://core.trac.wordpress.org/ticket/25224#comment:10

If it's a persistent problem, there are two other possible solutions -- adding full-size versions of the W logo to Dashicons, and using dashicons there (the existing W logos in Dashicons are specially tweaked for small sizes only). Or, go retro with 1x and 2x PNGs.

[morganestes]

The weird part of it is that FF displays it without any extra server configuration, but it takes adding a few lines to the .htaccess to enable SVG, even though Chrome says it supports it.

Just looked again at 3.9-alpha-27368-src and it's displaying the PNG, but the body class shows svg, so I'd expect the SVG to be displayed over the PNG. It's starting to make my head hurt thinking about all the ways this is so wrong.

[johnbillion]

I saw this too the other day one one particular shared host install. SVG files on the server are being served with mime type text/plain. The problem is on the server side, not the client side, although as you noted some browsers do still display the SVG file despite the mime type.

Not sure there is anything core can do here, short of adding a mime type declaration to .htaccess.

Any suggestions?

[johnbillion]

#25224 was marked as a duplicate.

[morganestes]

Replying to johnbillion:

Not sure there is anything core can do here, short of adding a mime type declaration to .htaccess.

I've written a plugin that does this, but it seems a bit of a hack since I can't guarantee it works on anything other than Chrome on Apache httpd, and it feels like that's overstepping core's bounds.

I'll work on cleaning it up and releasing it as a public plugin, but if I find a better solution I'll either reopen this ticket or create a new one.

[morganestes]

I added the plugin code I use to ​https://gist.github.com/morganestes/10066447, along with instructions on how to use. I've gone ahead and attached it to this ticket, also.

[morganestes]

The plugin I use to add SVG to my sites.

[johnbillion]

As frustrating as it is, this is a server-level issue and not really up to WordPress to fix. Closing as invalid. If anyone thinks otherwise or has a suggestion how we could fix this in a nice cross-server way then please re-open.