Вставка *.svg на страницу

[Michael Myers]

Друзья, вот такая проблема. Нужно в ссылку впихнуть файл *.svg. Делаю это с помощью <img>. Но в лисе вообще ничего нет, а в Chrome картинка, обозначающяя, что картинка не смогла интерпритироваться. Как можно выкрутиться из этой ситуации. Варианты с JS принимаются.

Спасибо!

[npofopr]

А как нибудь так?

http://www.area53.ru/html5/kak-vstavit-svg-v-html.html

Вы же хотите сделать обычное a>svg? Странно что возникают проблемы.

Можно даже ж вставить svg в беграунд ссылки.

[Michael Myers]

А на background две картинки можно поставить?

[mrnobody]

А на background две картинки можно поставить?

Можно, только ниже IE9 там будет пусто, нужно будет дублировать свойство с одним фоном:

.some-body{
background: url(background-img-1.svg) no-repeat; /*выбираем какой фон отображать если браузер не поддерживает
мультибекграунд*/
background: url(background-img-2.png) no-repeat, url(background-img-1.svg) no-repeat;
}

http://caniuse.com/#...ultibackgrounds

http://htmlbook.ru/css/background

[Michael Myers]

А вот еще вопрос:

HTML

<a class="a"></a>

--

CSS

.a{

background-image: url(img.png);

}

Вот у меня почему-то не работает.

[mrnobody]

Элемент a — строчный, это значит, что его ширина зависит от контента внутри него, следовательно у него ширина = 0 и высота = 0. Но просто так строчному элементу мы не можем задать ширину и высоту, поэтому напишем свойство display: inline-block; и укажем нужные размеры. И у вас картинка будет повторяться, мне кажется вам этого не нужно. И вы не написали обязательный атрибут href="" для элемента a.

HTML:

<a href="#" class="a"></a>

CSS:

.a{
display: inline-block;
width: ??px;
height: ??px;
background-image: url(img.png);
background-repeat: no-repeat; /*чтобы картинка не повторялась (если нужно)*/
}