Попробовал слегка разобраться с возможностью использования векторной графики на сайте. В данной статье будет рассказано про поддержку браузерами SVG и про способы использования.
Порой векторный формат позволяет серьезно сэкономить на объеме ресурсов сайта по сравнению с растровой графикой.
Некоторые возможности SVG дублирует современный CSS 3. Например: фоны, градиенты, скругленные углы, анимация и некоторые другие возможности - можно реализовать с использованием обеих технологий. В каждом конкретном случае выбирается тот подход, который имеет лучшую поддержку браузерами, меньший объем кода реализации, проще в использовании.
Для начала подготовим SVG-картинку
Здесь будет просто круг и подключение внешнего CSS:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="svg.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="50%"/>
</svg>
HTML с различными способами включения
Здесь будет HTML со следующими включениями:
1) тег img
2) тег div с фоном background-image
3) тег object с внешним файлом svg, как вариант, еще позволяется использовать тег embed
4) object с data:image/svg+xml;base64 (берем исходный svg-код и кодируем base64), тут может быть не обязательно object, а любой элемент с поддержкой data
<!doctype html>
<html>
<head>
<style>
.svg-bg {
background: url(img.svg);
}
</style>
</head>
<body>
<img src="img.svg" width="100" height="100">
<div class="svg-bg" style="float: left; width: 100px; height: 100px;"></div>
<object type="image/svg+xml" data="img.svg" width="100" height="100">
<param name="src" value="img.svg">
</object>
<object type="image/svg+xml" width="100" height="100" data="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxzdHlsZT4KY2lyY2xlIHsKICAgIGZpbGw6IHJlZDsKICAgIGZpbGwtb3BhY2l0eTogMC43Owp9Cjwvc3R5bGU+CjxjaXJjbGUgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAlIi8+Cjwvc3ZnPg==">
</object>
</body>
</html>
CSS для SVG
Можно не использовать CSS, SVG и без того имеет широкие возможности управления внешним видом. Тот или иной подход выбирается под каждую конкретную задачу.
Здесь просто покрасим circle в красный цвет и сделаем слегка прозрачным:
circle {
fill: red;
fill-opacity: 0.7;
}
Что получилось
1 - тег img
2 - css background
3 - object, внешний файл
4 - object, data:image/svg+xml;base64
Комментариев нет:
Отправить комментарий