Внедрение SVG изображений на страницу

В простейшем случае svg-картинка внедряется следующим способом:

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

Это работает везде, кроме ИЕ, который SVG изначально не поддерживает. Для него надо установить следующий плагин:

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

Его следует прописать в аттрибуте codebase. Тогда при заходе на страницу пользователю будет предложено установить его. Пара кликов, перезагрузка страницы, одобрение использования плагина на сайте, и можно наслаждаться поддержкой SVG графики.

Но ссылка на плагин слишком длинная для использования в вёрстке, поэтому лучше её укоротить. Простейший вариант укорачивателя на php, например, выглядит так:

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

В связи с какой-то ошибкой, ишак всё-равно не сможет нарисовать картинку из-за указанного миме-типа. Оно и к лучшему, ибо через object он рисует её с белым фоном и псевдотрёхмерной рамкой. Поэтому для него вставим внутрь embed:

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

Аттрибут wmode необходим для убирания белого фона. Однако, вебкитам всё ни по чём — белый фон и при object и при embed, поэтому для них будем отслеживать в доме появление object-ов с помощью CComponent, ломать их и вставлять внутрь img с соответствующей картинкой:

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 )
        }
})

Чтобы размеры img и embed соответствовали заданным для object нужно добавить стили:

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

Ну, и, наконец, живой примерчик.