Можно ли добавить изображения SVG на веб-страницу через CSS? - PullRequest
Новая
       15

Можно ли добавить изображения SVG на веб-страницу через CSS?

4 голосов
/ 10 октября 2008

Я только начал экспериментировать с SVG на веб-страницах и обнаружил, что можно добавлять изображения SVG в HTML только с использованием тегов <object />, а не <img />, как я ожидал. Большую часть времени я добавляю графику на веб-страницы с помощью CSS, потому что они являются частью презентации сайта, а не контента.

Я знаю, что можно применить CSS к SVG, но возможно ли добавить векторное изображение в элемент HTML, используя только CSS?

Ответы [ 5 ]

5 голосов
/ 25 июня 2009

SVG поддерживается в <img> и в CSS (list-image, background-image, content) начиная с Opera 9. Opera 10 еще лучше. Webkit / Safari также поддерживает SVG в <img>.

Несколько примеров здесь , еще пара на dev.opera.com и annevankesteren.nl

Если вы ищете примеры встроенного svg, взгляните на сайт Сэма Руби .

4 голосов
/ 10 октября 2008

Вы можете попытаться сослаться на SVG-файл со свойством content, но я не думаю, что он поддерживается. Если бы это было поддержано, это выглядело бы так: 

.putapicturehere:before {
  content: url(mysvgfile.svg);
}

Это определенно не будет работать в IE - он может работать в новейшем Firefox.

Я всегда ссылаюсь на quirksmode.org для вопросов поддержки браузера css.

1 голос
/ 24 июня 2009

Насколько я знаю, Opera 9 и WebKit (== Safari & Chrome) делают это на ПК, и, по слухам, FF3.5 тоже сможет.

На самом деле, поскольку Apple добавила поддержку SVG в iPhone Safari всего полгода назад, я не уверена, работает ли она, но стоит попробовать.

Приветствия

1 голос
/ 10 октября 2008

Возможно, вам понадобится небольшой JavaScript-помощник для JavaScript, чтобы прочитать изображение из закадрового img и вставить его в тег объекта. Таким образом, вы все еще можете управлять с помощью CSS.

0 голосов
/ 13 октября 2008

В прошлый раз, когда я пытался, почти год назад, это не сработало. Однако вы уже можете смешивать разметки svg и xhtml. Единственная проблема в том, что страница должна иметь правильный тип MIME (application-xml или что-то в этом роде), иначе браузеры игнорируют svg.

Inline svg - не идеальное решение, если вы хотите строго разделить контент и презентацию, но, похоже, наиболее поддерживаемый способ использования svg.

...