Embed SVG images per page
In the simplest case, the svg picture is implemented in the following way:
This works everywhere except IE, which SVG does not natively support. For it you need to install the following plugin:
It should be written in the codebase attribute. Then, when entering the page, the user will be asked to install it. A couple of clicks, reloading the page, approving the use of the plugin on the site, and you can enjoy SVG graphics support.
But the link to the plugin is too long for use in layout, so it is better to shorten it. The simplest version of the shortener in php, for example, looks like this:
Due to some kind of mistake, the donkey will still not be able to draw a picture due to 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, insert embed:
The wmode attribute is required to remove the white background. However, webkits are all for nothing - a white background with both object and embed, so for them we will monitor the appearance of objects in the house using CComponent , break them and insert them inside img with the corresponding picture:
In order to match the img and embed sizes to those specified for object, add styles:
Well, and finally, a live example .
<object type="image/svg+xml" data="pucture.svg">
object>This works everywhere except IE, which SVG does not natively support. For it you need to install the following plugin:
download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exeIt should be written in the codebase attribute. Then, when entering the page, the user will be asked to install it. A couple of clicks, reloading the page, approving the use of the plugin on the site, and you can enjoy SVG graphics support.
But the link to the plugin is too long for use in layout, so it is better to shorten it. The simplest version of the shortener in php, for example, looks like this:
header( 'Location: download.adobe.com/pub/adobe/magic/svgviewer/win/3.x/3.03/en/SVGView.exe', 301 );Due to some kind of mistake, the donkey will still not be able to draw a picture due to 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, insert embed:
<object type="image/svg+xml" data="picture.svg" codebase="install-svg.php">
>
The wmode attribute is required to remove the white background. However, webkits are all for nothing - a white background with both object and embed, so for them we will monitor the appearance of objects in the house using CComponent , break them and insert them inside img with the corresponding picture:
if( /webkit/i.test( navigator.userAgent ) ) CComponent(
{ tag: 'object'
, factory: function( obj ){
if( obj.type !== 'image/svg+xml' ) returnnull
var img= new Image
img.src= obj.data
obj.type= obj.data= obj.innerHTML= ''
obj.appendChild( img )
}
})In order to match the img and embed sizes to those specified for object, add styles:
object embed ,
object img {
width: 100%;
height: 100%
}Well, and finally, a live example .