Embed SVG images per page

In the simplest case, the svg-picture is implemented in the following way:

< object type = "image/svg+xml" data = "pucture.svg" >
< / object >

It works everywhere except IE, which is not supported by SVG initially. You need to install the following plugin for it:

download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe

It should be specified in the codebase attribute. Then, when entering the page, the user will be prompted to install it. A couple of clicks, reloading the page, approving the use of the plugin on the site, and you can enjoy support for SVG graphics.

But the link to the plugin is too long for use in the layout, so it’s better to shorten it. The simplest version of a php shortener, for example, looks like this:

<?php header ( 'Location: download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe' , 301 ) ;

In connection with some kind of error, the donkey will not be able to draw a picture anyway because of the specified mime type. It is for the better, because through object he draws it with a white background and a pseudo-three-dimensional frame. Therefore for it we will insert in embed:

< object type = "image/svg+xml" data = "picture.svg" codebase = "install-svg.php" >
<embed src = "picture.svg" wmode = "transparent" / >
< / object >

The wmode attribute is needed to remove the white background. However, webkits don't do anything with a white background and with object and embed, so for them we will track the appearance of objects in the house with the help of CComponent , break them and insert img with the appropriate picture:

if ( /webkit/i . test ( navigator. userAgent ) ) CComponent (
{ tag : 'object'
, factory : function ( obj ) {
if ( obj. type !== 'image/svg+xml' ) return null
var img = new Image
img. src = obj. data
obj. type = obj. data = obj. innerHTML = ''
obj. appendChild ( img )
}
} )

In order for the img and embed dimensions to match the specified for the object, you need to add styles:

object embed ,
object img {
width : 100 % ;
height : 100 %
}

Well, and, finally, a lively example .