How to use SVG logo with PNG fallback (2 posts)

  1. b-cat
    Posted 1 year ago #

    In other WordPress themes, I’ve been able to use SVG logos with a fallback mechanism to display a PNG logo on older browsers and Android 2.3, etc., but I’m having difficulty making this work on the Responsive Theme.

    Why SVG Logo Files?
    SVG files are vector based and remain sharp at any size, but they don’t display on slightly older Android platforms and some older browsers…which is why we need a mechanism to fallback to PNG. (Most people are happy enough with PNG, but I like the vector-based sharpness of SVG, of course, especially for the logo.)

    Turning on SVG in WordPress
    In default mode, WordPress is not enabled to accept SVG files, but that option can be easily turned on via your theme’s functions.php file. For info on how to do that, see here: (http://css-tricks.com/snippets/wordpress/allow-svg-through-wordpress-media-uploader/).

    So, I’ve turned on SVG capability in WordPress, and my SVG logo does display properly in the Responsive Theme when it is selected through the normal Responsive Theme (RT) options settings.

    Child Theme
    However, I want to also enable a PNG fallback image, and this means I need to edit the header.php and style.css files. I’ve set up a Responsive Child Theme, so I’m editing those files, not the original Responsive parent theme files, of course.

    The Fallback Method
    The fallback method involves defining a class in the stylesheet to implements two (or three) simultaneous transparent backgrounds with linear gradients inside a div tag (or other tag, I suppose). If your browser doesn’t support the SVG background, it will display the PNG fallback, and this works like a charm on older browsers and even Android 2.3 and below.

    For more info on the method, see the general discussion of several methods here (http://css-tricks.com/svg-fallbacks/); this comment, which describes the method I’m using (http://css-tricks.com/svg-fallbacks/#comment-1582421), which is based on Pau Giner’s method (which I like a lot) (http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique); and Giner’s demo (https://pauginer.github.io/invisible-gradient-technique/).

    Giner’s method has worked for me on other themes, but for some reason I’m failing to get either the SVG or the PNG file to display under RT. There is probably just some small little detail under the Responsive Theme hood that is preventing this.

    Here’s what I’ve done so far:
    - Created RT-child theme
    - Created RT-child style.css and included the following class definition:

    .logofallback {
    background: transparent url(http://domain.com/wp-content/uploads/logo-fallback.png) no-repeat;
    background-image: -webkit-linear-gradient(transparent, transparent), url(http://domain.com/wp-content/uploads/logo-svg.svg);
    background-image: linear-gradient(transparent, transparent), url(http://domain.com/wp-content/uploads/logo-svg.svg);

    - Created RT-child header.php file and added this code within the <div id=”logo”></div>
    <div class="logofallback"></div>

    End Result: No Image
    No logo image displays at all. However, when I right-click on the logo area of the page and choose “inspect element,” it clearly shows that the SVG logo image address was correctly loaded, and hovering over it in the inspector panel shows that the logo appears properly.

    So why won’t this method work here when it works in other themes? I’m thinking there might be some kind of conflict with some other Responsive Theme css rule…? Any suggestions much appreciated!

  2. Herbert van-Vliet
    Posted 1 year ago #

    Can you give a link to a test-setup?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic