You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Apr 10, 2020. It is now read-only.
A simple jQuery plugin that creates a fallback for .SVG images (backgroundimage supported to!). In case your browser doesn't support .SVG images it will <b>create</b> a .PNG file and replace the .SVG with it. Meaning that you don't have to create and store two copies of your image.
4
+
This ease-to-use jQuery plugin will create a fallback for .SVG images on your website. When the plugin notices that the visitors browser doesn't support .SVG images it will replace those images with new .PNG images. Those .PNG images are created on the run using a serverside script. When the visitors browser does support .SVG images it will just go back to sleep.
5
5
6
-
Big difference with other fallback plugins: this plugin CREATES the PNG image automatically. This means that you don't have to create an extra folder with PNG images.
6
+
A big advantage of SVGMagic is that you don't have to create multiple versions of your images. You can just focus on the .SVG images and let SVGMagic do the rest.
7
7
8
+
You can find more information and demos on [our website](http://svgmagic.bitlabs.nl/).
9
+
10
+
SVG... what/why?
11
+
------------
8
12
SVG is a vector graphics format, meaning it's perfectly scalable. Whatever size it needs to display at, or whatever screen it needs to display on, an SVG will adapt perfectly. This means that you can use the same image for desktop and mobile (including Retina) visitors. They all get a perfectly sharp image.
You can find more information and demos on [our website](http://svgmagic.bitlabs.nl/).
13
-
14
16
Installation
15
17
------------
16
-
Just include the script in your header and call the plugin in your documentready
18
+
Just include the script in your header and call the plugin in your ```$(document).ready()```
17
19
```code
18
20
<script src="SVGMagic.min.js"></script>
19
21
<script>
@@ -22,7 +24,7 @@ Just include the script in your header and call the plugin in your document read
22
24
});
23
25
</script>
24
26
```
25
-
SVGMagic also supports backgroundimages. You need to parse the div containing the backgroundimage including the {backgroundimage} option.
27
+
SVGMagic also supports backgroundimages. You need to parse the div containing the backgroundimage including the ```backgroundimage``` option.
26
28
```code
27
29
<script src="SVGMagic.min.js"></script>
28
30
<script>
@@ -54,13 +56,14 @@ The plugin is tested in Internet Explorer Version 7 and 8 (other browsers alread
54
56
55
57
Security / How it works
56
58
--------
57
-
The script makes use of a server side php script that converts the SVG to an PNG. The script will send a request to the server containing the images sources. The server will get those images, convert them to PNG, temporarily save them and send the new URL back. When the SVGMagic scripts receives the new URL it will replace the .SVG images with the new ones.
59
+
The script makes use of a server side php script that converts the SVG to an PNG. The plugin will send a request to the server containing the images' sources. The server will then grab those images, convert them to PNG, temporarily save them and send the URL of the new images back to the plugin. When the plugin receives the new URL it will replace the .SVG images with the new ones.
60
+
61
+
This will only happen when the plugin notices that the user's browser doesn't support SVG images. At the moment IE8 and lower and Android 2.* don't support SVG images.
58
62
59
63
Demo
60
64
----
61
65
A demo of SVGMagic can be found on the [SVGMagic website](http://svgmagic.bitlabs.nl/).
62
66
63
-
64
67
Known bugs
65
68
----------
66
69
- Because the image URL's are sent to the server via a GET request it's possible that it will fail when a page has many images.
0 commit comments