Создание градиента с помощью SVG

Хочу поделиться одним из методов создания масштабируемых градиентов. Сразу скажу что у него есть свои недостатки, которые ограничивают его применение. В основе данного метода лежит использование формата 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 мы получим градиент с нужными нам цветами. Кроме того, можно добавлять промежуточные цвета вставляя дополнительные теги и указывая смещение через атрибут offset.

About: neadmin


One thought on “Создание градиента с помощью SVG”

  1. Для сайта это может оказаться полезным.
    Надо полагать что скорость загрузки увеличиться,
    Однако при создании более сложной графики на мой взгляд этот способ не совсем приемлем.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перейти к верхней панели