Блог

Такой себе городской круизер, выполненный при помощи SVG. Никакого джаваскрипта, только HTML (SVG) и CSS, впрочем, кого на данный момент еще можно этим удивить.

SVG является грамматикой языка XML, расшифровывается как — масштабируемая векторная графика и используемая для описания графических изображений. Особенно нужно подчеркнуть, что это именно векторная графика, что указывает на фундаментальное отличие от растровой графики и таких ее форматов как: JPEG, PNG или GIF. СВГ является точным, не зависящим от разрешения (на что указывает термин «масштабируемая») описанием шагов, которые нужно выполнить, для того чтобы создать необходимый рисунок.

Для начала давайте рассмотрим код простого примера:

…

Как видно из примера, мы определяем начало рисунка и задаем пространство имен. Вслед за этим указываем систему координат рисунка, задаем цветовой градиент с именем «fade» и начиная заливку с темно-синего цвета, заканчиваем её светло-синим. Следующим шагом, мы даем указание нарисовать треугольник с тонкой черной рамкой и заполнить его указанным ранее градиентом.

Графическое представление того, что у нас получилось:

…

Пример простого изображения, выполненного посредством SVG

Масштабируемая векторная графика – представляет собой достаточно обширную грамматику с умеренной сложностью её применения на практике. Помимо примитивных рисунков с её помощью можно воспроизводить рисунки любой сложности, создавать произвольные кривые и добавлять анимацию. Так же, рисунки, выполненные при помощи SVG, могут содержать в себе JavaScript сценарии и CSS стили.

Ниже представлен пример кода для создания велосипеда, размещенного в шапке статьи, если у вас появятся вопросы, прошу – задавайте их в комментариях, описывать каждый шаг, в этом красивом, но достаточно простом примере, просто не вижу смысла.

Реализация велосипеда: