Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 15, 2015 at 9:24 am #444833
    Guenni007

    i have to use a svg as logo image (because of serif font and thin lines- which should be seen on all screenwidth) – it works nice on all Browsers – except on IE8

    Is there an easy way to get on enfold a fallback to png if Browser does not support svg? Have i to implement modernizr script perhaps?

    May 15, 2015 at 5:19 pm #445052
    Yigit

    Hi Guenter!

    I am on a Mac but can you please try adding following code to Functions.php file to check if it helps?

    function add_custom_logo(){
?>
<script>
jQuery(window).load(function(){
jQuery('.avia-msie-8 .logo img').attr('src','YOUR IE8 LOGO URL HERE');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_logo');

    Best regards,
    Yigit

    May 15, 2015 at 6:57 pm #445115
    Guenni007

    wow this seems to be simple enough.
    I can only test it tomorrow and will than make my news on it. Thanks in advance

    Edit: works well !
    is this a kind of conditional comment
    is it possible to obtain in this manner a generell change from svg to png if same filename is found on IE8 ?

    perhaps like :

      jQuery('img[src$="svg"]').attr('src', function() {  
    return jQuery(this).attr('src').replace('.svg', '.png');
  });
    • This reply was modified 9 years, 7 months ago by Guenni007.
    May 18, 2015 at 3:51 pm #445763
    Yigit

    Hi!

    It should work totally fine but please use it as 

    
jQuery('.avia-msie-8 .logo img[src$="svg"]').attr('src', function() {  
    return jQuery(this).attr('src').replace('.svg', '.png');
  });

    Cheers!
    Yigit

    May 18, 2015 at 4:00 pm #445767
    Guenni007

    it is not possible to handle every svg file in this manner ? only the logo ?

    than this could be used for fallback. If there is a svg file and an existing png with exactly the same name it will be replaced.

    May 18, 2015 at 4:04 pm #445771
    Yigit

    Hi!

    In that case, yes. I thought you wanted to only target logo img and not globally :)

    Cheers!
    Yigit

    May 18, 2015 at 4:21 pm #445784
    Guenni007

    hm ?

    but this doesn’t work:

    function svg_replace(){
?>
<script>
jQuery(window).load(function(){
jQuery('.avia-msie-8 img[src$="svg"]').attr('src', function() {  
    return jQuery(this).attr('src').replace('.svg', '.png');
  });
</script>
<?php
}
add_action('wp_footer', 'svg_replace');
    May 19, 2015 at 9:23 am #446263
    Guenni007

    this works :

    function svg_replace(){
?>
<script>
(function($){
	$(window).load(function(){
 	$('img[src$="svg"]').attr('src', function() {  
    	return $(this).attr('src').replace('.svg', '.png');
  	});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'svg_replace');

    so in IE8; if there is a svg file and a png with the same name in the same upload-folder it will be replaced by that png

    • This reply was modified 9 years, 7 months ago by Guenni007.
    May 19, 2015 at 9:27 am #446266
    Guenni007

    can be closed now – thanks for your helpful hints

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘svg graphic as logo and fallback png’ is closed to new replies.