Создание градиента с помощью 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. Для сайта это может оказаться полезным.
    Надо полагать что скорость загрузки увеличиться,
    Однако при создании более сложной графики на мой взгляд этот способ не совсем приемлем.

Leave a Reply

Your email address will not be published. Required fields are marked *

Skip to toolbar