Sorry, but I've not yet supported your browser ( IE7 or IE8 ). Please use another, advanced, browser to view this site

thank you

Supported browsers

SVG image Fallback

May 18th, 2015
Categories: Blog, CSS, Development, Hand coded, HTML, Sass, SVG | Tags: ,

Using SVG’s is awesome. When they break, which isn’t that often, they can be a pain.

To ensure I don’t get ‘stung’ when using SVG’s as background images in Sass/CSS, I created the following Sass mixin:

This is pretty self explanatory but what it does is ensure that there’s a ‘.png’ image for older browsers, and devices, that don’t yet support svg’s.

To use it, you include the following when setting a ‘background-image:;’ :

The name of the image is passed within the brackets. I’ve chosen not to include the extension as it’s already set in the sass mixin. This can be changed to anything that you wish to use.

The CSS that gets rendered is pretty clean, I think:

 

I use the above mainly for icons and logo’s, to be honest. I’ll be posting more about SVG and images tomorrow. You may have noticed that I’ve not written a blog post for some time; I’m looking to change that, dramatically, from now on.

I’ll also be replying to a lot of questions asked in previous blog posts, better late than never…

 

latest work

  1. Responsive design, Responsive grid integration, Media queries, HTML5, jQuery, JavaScript, CSS3 animations

  2. Responsive carousel, design, grid and media queries, HTML5, custom jQuery & JavaScript, HTML5 & CSS3 animations, custom nomination form.

  3. Responsive design, grid and media queries, HTML5, custom jQuery & JavaScript, mobile optimised design and development

  4. Custom Wordpress posts, one page design and development, Custom JavaScript for mobile and desktop carousel switching, mobile optimised design and development

Back to top

designed & developed by Scripted Pixels Ltd