https://github.com/baamenabar/svgfall-v1

Load img SVGs only when supported, else fallback to PNG. Based on Picturefill.
https://github.com/baamenabar/svgfall-v1

Last synced: 1 day ago
JSON representation

Load img SVGs only when supported, else fallback to PNG. Based on Picturefill.

• Host: GitHub
• URL: https://github.com/baamenabar/svgfall-v1
• Owner: baamenabar
• Fork: true (scottjehl/picturefill)
• Created: 2012-11-12T19:23:44.000Z (almost 12 years ago)
• Default Branch: svgfall
• Last Pushed: 2012-11-19T05:23:50.000Z (almost 12 years ago)
• Last Synced: 2024-08-02T05:10:45.783Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 13.1 MB
• Stars: 41
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# SVGfall

A fast way to use SVG images with a reliable fallback, based on the [Picturefill](https://github.com/scottjehl/picturefill/) syntax using `div`s, for downloading only one asset.

* Author: Agustín Amenabar (c) 2012

* License: MIT/GPLv2

**Demo URL:** [http://baamenabar.github.com/svgfall/](http://baamenabar.github.com/svgfall/)

## Size and delivery

Currently, `svgfall.js` compresses to around 541bytes (~0.53kb), after minify and gzip. To minify, you might try these online tools: [Uglify]:(http://marijnhaverbeke.nl/uglifyjs), [Yahoo Compressor]:(http://refresh-sf.com/yui/), or [Closure Compiler](http://closure-compiler.appspot.com/home). Serve with gzip compression.

## Markup pattern and explanation

Mark up your SVG images like this. 

```html

	


		


		


		

		

			

		

	

```


### Explained...

Notes on the markup above...

* The `div[data-svgfall]` element's `alt` attribute is used as alternate text for the generated `img` element.

* The `div[data-svgfall]` element must have 2 `source` elements, one for SVG support one for the absence of support. 

* Each `div[data-src]` element must have a `data-src` attribute specifying the image path. 

* The `div[data-support]` tells the script which `source` is the svg and wich one is the fallback.

* If the `div[data-support]` is not provided the script will try to infer the type of file from the file extension, if found.

* The `noscript` element wraps the fallback image for non-JavaScript environments, and including this wrapper prevents browsers from fetching the fallback image during page load (causing unnecessary overhead). Generally, it's a good idea to reference the fallback image here, as it's likely to be loaded in older/underpowered mobile devices.

	

### Image size

As you may sometimes want to control the image size in the markup you can set the image size as an additional data attribute.

```html

	


		


		


		

		

			

		

	

```


## Support

SVGfall supports a broad range of browsers and devices (there are currently no known unsupported browsers), provided that you stick with the markup conventions provided. (based on picturefill's claim)

## Further development or deployment

This is easy to implement, pretty clean but it could be taken even further like some of the following implementations:

* Render the fall-back PNG from the SVG on the server, cache it and serve that. For this to work you need *ImageMagik* which is not a default library on most shared servers with PHP, but it's pretty straight forward.

* Check for support once, store a cookie, and replace the complicated markup to a regular image once you know if the device supports SVG or not.

* We could also test for WebP support.