Home Menu Search

Saqwel

IT and other things blog

Знакомство с SVG

Поделиться с друзьями

Однажды, бороздя просторы интернета, я наткнулся на изображение SVG. Я и раньше встречал этот формат, однако, не обращал внимания, считая, что это очередной новый формат, разработанный под какой-нибудь новый графический редактор. Однако, все оказалось гораздо интересней. SVG расшифровывается, как масштабируемая векторная графика. Это изображение в формате XML, то есть, его можно открыть в любом текстовом редакторе и в нём же менять (перерисовывать). Вообще, я бы не стал называть SVG изображением, это скорее язык разметки, который современными браузерами и SVG вьюерами преобразуется в изображение.

Преимущества SVG:

Поддержать автора

1. Достаточно маленький размер файла.

2. Масштабируемость. То есть при изменении размера изображения оно не меняет своего качества.

3. Открытость формата. Возможность редактирования даже в текстовом редакторе.

С появлением поиска SVG в Google пропала проблема индексации SVG.

Самым большим недостатком SVG является то, что старые браузеры не понимают этот формат. Для просмотра в старых браузерах необходимо устанавливать плагин. К тому же, по-моему, невозможно изменить формат привычных бинарных изображений в настоящий SVG, возможно лишь внедрение таких изображений внутрь SVG.

Для создания SVG необходимо знать, как показать браузеру, что это именно SVG, а также теги и их атрибуты, которые и будут указывать браузеру или просмотрщику то, что надо прорисовать.

Первая строчка SVG файла – это всегда

Затем можно указать DTD. Но это не обязательно.

Тег SVG

Затем идет тег svg.

Атрибуты тега svg:

  • xmlns [:prefix] – стандартный XML атрибут для обозначения именного пространства XML (XML Namespace);
  • version – указывает, какая версия языка SVG используется в документе. Для SVG 1.1 надо указать 1.1;
  • baseProfile – описывает языковой профиль SVG, который автор считает необходимым для корректного отображения. Этот атрибут не влияет на обработку события а носит информационный характер;
  • x – координата по оси X элемента svg;
  • y – координата по оси Y элемента svg;
  • width – ширина квадратной области, в которую будет помещен svg;
  • height – высота квадратной области, в которую будет помещен svg.

Выше мною были описаны обязательные теги. Ниже речь пойдет о тегах, которые непосредственно создают изображение.

Line

Line – этот элемент определяет отрезок с началом в одной точке и концом в другой.

Атрибуты line:

  • x1 – координата по оси X точки начала отрезка;
  • y1 – координата по оси Y точки начала отрезка;
  • x2 – координата по оси X точки конца отрезка;
  • y2 – координата по оси Y точки конца отрезка.

Использование line:

Без указания значения атрибута stroke-width, который определяет толщину линии, линия не видна.

Rect

Rect – этот элемент определяет прямоугольник. Прямоугольник со скругленными углами определяется значениями атрибутов rx и ry.

Атрибуты rect:

  • x – кооордината по оси X стороны прямоугольника, которая имеет меньшее значение в текущей системе координат;
  • y – кооордината по оси Y стороны прямоугольника, которая имеет меньшее значение в текущей системе координат;
  • width – ширина прямоугльника;
  • height – высота прямоугольника;
  • rx – радиус скругления углов прямоугольника по оси X;
  • ry – радиус скругления углов прямоуголmника по оси Y.

Ипользование rect:

Circle

Circle – определяет круг с указанием координат центра и радиуса.

атрибуты circle:

  • cx – координата по оси X для центра круга;
  • cy – координата по оси Y для центра круга;
  • r – радиус круга.

Использование circle:

Ellipse

Ellipse – определяет овал, у которого указан центр и два радиуса.

атрибуты elipse:

  • cx – координата центра овала по оси X;
  • cy – координата центра овала по оси Y;
  • rx – радиус окружности по оси X;
  • ry – радиус окружности по оси Y.

Использование ellipse:

Poliline

Poliline – это элемент, определяющий несколько соединенных прямых отрезков.

Атрибуты poliline:

  • points – список точек, которые будут соединены приямыми линиями.

Использование poliline:

Polygon

Polygon – это элемент определяющий замкнутую фигуру, состоящую из соединенных прямых линий.

Атрибуты polygon:

  • points – точки, которые будут соединены в многоугольник или другую фигуру.

Использование polygon:

В этой статье описаны самые простые фигуры, которые могут быть созданы средствами SVG. Существуют и более сложные, например, path, а также можно объединять простые объекты в группы посредством элемента g. Кроме того в этой статье не описано большое количество атрибутов, которые можно применить почти ко всем элементам и, которые позволяют настраивать внешний вид элементов SVG.

Leave a Reply