Создание градиента с помощью SVG
Четверг, июля 16, 2009 23:23
Хочу поделиться одним из методов создания масштабируемых градиентов. Сразу скажу что у него есть свои недостатки, которые ограничивают его применение. В основе данного метода лежит использование формата SVG, который является очень перспективным стандартом представления векторной графики.
Как известно, векторные рисунки не теряют своего качества при их увеличении. Ниже представлены два прямоугольника с градиентной заливкой. В обоих случаях используется одно и то же изображение в формате SVG.
Ограничение использования SVG изображений связано с их способом вставки на страницу. К примеру, в настоящий момент только Opera позволяет вставлять SVG-графику c помощью тега IMG, а также задать ее в качесве фона для HTML-элемента. В остальных же случаях для вставки SVG мы вынуждены использовать тег EMBED:
<embed width="100" height="100" type="image/svg+xml" src="image.svg" />В итоге, для того чтобы задать такой градиент в качестве фона, придется использовать абсолютное позиционирование. По сути дела, в некоторых случаях можно использовать и обычные изображения, например в формате PNG, который отличается тем, что градиентные изображения, сохраненные в нем, имеют сравнительно небольшой размер даже при большом разрешении.
Однако SVG дает немного больше возможностей, благодаря тому, что основан на языке XML и имеет текстовый формат. Например, можно с легкостью изменять цвета градиента, при чем для этого будет достаточно обычного текстового редактора. К тому же, такой градиент можно использовать на сайтах, где цветовая схема настраивается самим пользователем, в этом случае SVG файл можно генерировать на сервере и в него заранее будут подставляться те цвета, которые задал пользователь.
В нашем SVG файле цвета градиента определяют следующие строчки:
...
<stop offset="00%" style="stop-color: #e53939;"/>
<stop offset="100%" style="stop-color: #880000;"/>
...Подставив свои значения для stop-color мы получим градиент с нужными нам цветами. Кроме того, можно добавлять промежуточные цвета вставляя дополнительные теги
Владислав пишет:
17 июля 2009 в 18:14
ммм…..заинтересовало,может себе поставлю
а у тебя шпка с помощью SVG сделана???)
Dimon пишет:
18 июля 2009 в 0:05
Шапка сделана обычной картинкой, здесь нет необходимости в SVG ))
applee пишет:
30 августа 2009 в 13:39
Для сайта это может оказаться полезным.
Надо полагать что скорость загрузки увеличиться,
Однако при создании более сложной графики на мой взгляд этот способ не совсем приемлем.
Dmitiy пишет:
13 ноября 2009 в 18:43
А есть какой-нибудь кросс-браузерный вариант для вставки SVG-изображений?
Тимур пишет:
13 декабря 2009 в 3:41
Подскажите пожалуйста, можно ли как-нибудь используя метод вставки через embed задать градиентный фон страницы?
Александр пишет:
11 февраля 2010 в 15:35
Dmitry читай статью http://w3pro.ru/article/ispolzovanie-svg-dlya-sozdaniya-krasivogo-masshtabiruemogo-fona-chast-1 по этому поводу.
Деловой пишет:
10 апреля 2010 в 23:18
Это кросс-браузерное решение?
Влад пишет:
21 июля 2010 в 11:46
Спасибо за статейку, очень интересно! Нужно будет по-экспериментировать!)
Серегй пишет:
19 декабря 2010 в 20:45
Я в старом диайне использовал css 3 для градиента!)
Серегй пишет:
19 декабря 2010 в 20:46
Я в старом диайне использовал css 3 для градиента, чуть незабыл вот зацените новый http://www.knyazsergei.ru/!)
Алексей пишет:
4 июня 2011 в 18:58
Помоему лучше в фотошопе градиент делать, а потом вставлять на сайт