#css #svg #vector-graphics
Вопрос:
Я только начал экспериментировать с SVG на веб-страницах и обнаружил, что добавлять изображения SVG в HTML можно только с помощью <object /> тегов, а не <img /> так, как я ожидал. Большую часть времени я добавляю графику на веб-страницы с помощью CSS, потому что они являются частью презентации сайта, а не контента.
Я знаю, что можно применить CSS к SVG, но можно ли добавить векторное изображение в HTML-элемент, используя исключительно CSS?
Ответ №1:
SVG поддерживается в <img> CSS и в CSS (список-изображение, фоновое изображение, содержимое) начиная с Opera 9. Opera 10 еще лучше. Webkit/Safari также поддерживает svg <img> .
Несколько примеров здесь, еще пара на dev.opera.com и annevankesteren.nl
Если вы ищете встроенные примеры svg, загляните на сайт Сэма Руби.
Ответ №2:
Вы можете попытаться ссылаться на файл SVG со свойством content, но я не думаю, что он поддерживается. Если бы это было поддержано, это выглядело бы так:
.putapicturehere:before {
content: url(mysvgfile.svg);
}
Это определенно не будет работать в IE — это может сработать в новейшем Firefox.
Я всегда ссылаюсь quirksmode.org по вопросам поддержки браузера css.
Комментарии:
1. Не имеет значения, если это не работает в IE. Моей целевой аудиторией будут браузеры safari для iPhone/iPod touch.
2. Дайте нам знать, работает ли это на iPhone. SVG — классная технология-я надеюсь, что она заинтересует больше!
3. Можете ли вы манипулировать свойствами svg, например, заполнить это решение?
Ответ №3:
Возможно, вам потребуется сделать небольшой CSS-вспомогательный JavaScript, чтобы прочитать изображение из закадрового img и поместить его в тег объекта. Таким образом, вы все еще можете управлять с помощью CSS.
Ответ №4:
Насколько я знаю, Opera 9 и WebKit (== Safari и Chrome) делают это на ПК, и ходят слухи, что FF3.5 также смогут.
На самом деле, поскольку Apple добавила поддержку SVG в Safari iPhone всего полгода назад, я не уверен, сработает ли это, но попробовать стоит.
Овации,
Ответ №5:
В последний раз, когда я пытался, почти год назад, это не сработало. Однако вы уже можете смешивать разметку svg и xhtml. Единственная проблема заключается в том, что страница должна иметь правильный тип mime (приложение-xml или что-то в этом роде), иначе браузеры будут игнорировать svg.
Встроенный svg не является идеальным решением, если вы хотите строгого разделения контента и презентации, но, похоже, это наиболее поддерживаемый способ использования svg.