if .svg fails, show div hide 'img'

Question

I'm displaying an SVG image with text in an 'img' tag, however, as we all know support in android 2.1/2.3 is limited, and support for text in svg is even more limited. (a large pool of users on the site in which this is to be used in)

As a result, I'm trying to (not really working) provide a 'div' with a content fallback to the SVG image (in lieu of a *.png). Due to lack of knowledge in jQuery I'm using Modernizr; Modernizr isn't being used for anything else at this time. Ideally I'd like to remove Modernizr altogether if possible, which is why I'm here: what's the best method to approach this? If Modernizr is in fact the best method for detecting support I'll go with it, is there anyway to remove the 'img' tag from the DOM completely prior to the document.ready?

The div has schema.org microdata for the dates, so I'm only hiding it visually.

Or... would it just be more semantically accurate to go with a background image on the 'div' and display the content initially? With this method I could just use .no-svg but that still includes Modernizr into the mix. I'd be more comfortable with this anyways as css makes much more sense to me.

Or... is there a better method altogether? Because I'm about to resort back to *.png, I have yet to get svg fallbacks to display properly in android 2.1-2.3 consistently.

html

<img src="img/dates.svg" width="300" height="500" class="dates-svg" alt="important dates">
<div class="svg-fallback vh"> ... </div>

js

if (!Modernizr.svg) {
  $('img[src$=.svg]').hide(); //if .svg not supported <img> display:none
  $('.svg-fallback').removeClass('vh'); //make visible
}

css

.vh{
  position: absolute; 
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  border: 0; 
  padding: 0; 
  width: 1px;
  height: 1px ; 
  overflow: hidden;
}

TEST JS

if (!Modernizr.svg) {
  $('.svg-fallback').removeClass('vh');
} else {
  $('.svg-fallback').addClass('vh').add('<img src="img/dates.svg'...>');
}

Answer 1

For the purpose I needed the previous answer is a little off the mark.

I ended coming to this as a resolution with a colleague:

• If svg is not supported, remove visually hidden class on the provided div, provided there is a div set as fallback.
• If said div is not present and svg isn't supported, replaces svg with png. This is for social icons and the sort using svg but only using alt for added information.
• If svg is supported, use the svg image and the div remains visually hidden.

updated jquery

// if SVG Unsupported
if (!Modernizr.svg) {
    $('img').each(function() {
        var src = this.src;
        var fb = $(this).data('fallback');
        // if img.src extension is svg
        if (src.length > 0 && src.match(/svg$/)) {
            //if fallback is preset
            if (fb.length > 0) {
                fb.removeClass('vh'); //make div visible
                $(this).remove(); //remove img from DOM
            // if fallback isn't present
            } else {
                this.src = src.slice(0, -3) + 'png'; //replace extension with png
            }
        }
    });
}

html

<img src="@Url.Content("~/img/calendar.svg")" width="470" height="370" data-fallback=".calendar-fallback" alt="Important dates of the event">

<div class="calendar-fallback vh" itemscope itemtype="http://schema.org/Event">
  <!-- etc. -->
  <p>
    Submission Period begins
    <time itemprop="startDate" content="2014-06-02T10:00-05:00" datetime="2014-06-02T10:00-05:00">June 2, 2014 at 10:00AM EST</time>
    and goes until
    <time itemprop="endDate" content="2014-07-15T18:00-05:00" datetime="2014-07-15T18:00-05:00">July 15, 2014 at 6:00PM EST</time>
    <!-- etc. -->
  </p>
<!-- etc. -->
</div>

old js

$(document).ready(function() {
  if (!Modernizr.svg) {
    var imgs = document.getElementsByTagName('img');
    var svgExtension = /.*\.svg$/;
    var l = imgs.length;
    for (var i = 0; i < l; i++) {
      if (imgs[i] != undefined && imgs[i].src.match(svgExtension)) {
        var img = $(imgs[i]);
        var fallbackElement = $(img.data('fallback'));
        if (fallbackElement != undefined && fallbackElement.length > 0) {
          fallbackElement.removeClass('vh');
          img.remove();
        } else {
          img.attr('src', imgs[i].src.slice(0, -3) + 'png');
        }
      }
    }
  }
});

Answer 2

I see you updated it. By how well supported is SVG http://caniuse.com/svg, I would append the fallback (if you don't want to support no-js).

That doesn't make a lot of sense. If SVG is supported you make the fallback visible? You want to display that DIV and hide the SVG in the same case.