Categories: DesignDevelopmentHTML5Javascript

Go 100% SVG, with a PNG fallback

Pure CSS

    

  1. .svg{

    2. 

  2. 
background-image:  url('image.png');

    3. 

  3. 
background-image:  none,url('image.svg'), url('image.png');

    4. 

  4. 
background-size: 100% 100%;

    5. 

  5. }
    6.

Using Modernizer + jQuery

    

  1. 
if(!Modernizr.svg) {

    2. 

  2.     $('img[src*="svg"]').attr('src', function() {

    3. 

  3.         return $(this).attr('src').replace('.svg', '.png');

    4. 

  4.     });

    5. 

  5. }
    6.

Modernizer

 Custom detection of SVG

    

  1. 
var supportsSVG = function() {

    2. 

  2.                 return document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");

    3. 

  3.         }

    4. 

  4.  
    5. 

  5. 
if (!supportsSVG()) {

    6. 

  6.  // work your magic

    7. 

  7. }
    8.

 

 

Alex

I am a full-stack developer. I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing. I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest. Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Leave a Comment
Published by
Alex
9 years ago

Recent Posts

B&B / Hotel Booking Solutions for WordPress | 2024

BOOKING SOLUTIONS 202x This is my take on a subset of booking, appointment, PMS or… Read More

4 weeks ago

WordPress Cron + WP-CLI + Ntfy

THE GOAL Create a system cron for WordPress, that is accessible and can be easily… Read More

2 months ago

2024 is here and now :)

2024, what's cooking? Slowly getting into the 2024 spirit. 3 projects coming to a close… Read More

4 months ago

2023 ends and whats next !

Short look back at 2023 This has been a busy and interesting year. I am… Read More

4 months ago

cubicFUSION Grid Tweaker – Elementor Grid made easy.

Elementor Pro provides grid containers as an experimental feature. The options provided are limited, when… Read More

5 months ago

Archaeology Travel Booth – Travel Innovation Summit 2023

Archaeology Travel is an online travel guide for people who enjoy exploring the world’s pasts.… Read More

6 months ago