{ ggrrrrrrrrhhhhh }

SVGs are awesome, but Android's browser didn't support them until version 3.0, and since 2.x devices represent more than 50% of Android's market share it is still important to provide a fallback.

Sass Mixins FTW

One of my favorite features of Sass are mixins, they let you reuse chunks of CSS code and keep things DRY. The mixin we created looks something like this:

@mixin svg-background($name, $w, $h) {
  background: url('../images/#{$name}.svg') no-repeat;
  background-size: $w $h;
  .no-svg & {
    background-image: url('../images/png/#{$name}.png');
  }
}

And can be easily included:

#brush-selector {
  .pencil {
    @include svg-background('pencil', 15px, 8px);
  }
}

This will generate something that looks like:

#brush-selector .pencil {
  background: url("../images/pencil.svg") no-repeat;
  background-size: 15px 8px;
}

.no-svg #brush-selector .pencil {
  background-image: url("../images/png/pencil.png");
}

Feature Detection

For detecting whether or not SVG is supported we can use Modernizr or roll out our own. I decided to roll out my own to keep it lightweight.

$(document).ready(function () {
  var supportsSVG = document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1');
  if (!supportsSVG) {
    $('body').addClass('no-svg');
  }
});
blog comments powered by Disqus

Ramon Torres - iOS developer/product designer

My name is Ramon Torres. I'm a software developer and product designer, currently working at Inkboard building cool stuff.