Home Menu Search

Saqwel

IT and other things blog

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

2011-07-18
Web
Share

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

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

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

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

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

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

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

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

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

<?xml version="1.0" standalone="no"?>

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

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
	"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Тег SVG

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

<svg xmlns=http://www.w3.org/2000/svg
	xmlns:xlink="http://www.w3.org/1999/xlink">

Атрибуты тега 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:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="400 xmlns="http://www.w3.org/2000/svg"
	version="1.1">
  <desc>Example line01 - lines expressed in user coordinates</desc>
    <line x1="100" y1="300" x2="300" y2="100" stroke-width="5"  />
</svg>

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

Rect

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

Атрибуты rect:

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

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="<a href="http://www.w3.org/2000/svg">
	 http://www.w3.org/2000/svg</a>" version="1.1">
  <desc>Example rect01 - rectangle with sharp corners</desc>
  <!-- Show outline of canvas using rect element -->

  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>
  <rect x="400" y="100" width="400" height="200"
        fill="yellow" stroke="navy" stroke-width="10"  />
</svg>

Circle

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

атрибуты circle:

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

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example circle01 - circle filled with red and
  	stroked with blue</desc>
  <!-- Show outline of canvas using rect element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2"/>

  <circle cx="600" cy="200" r="100"
        fill="red" stroke="blue" stroke-width="10"  />
</svg>

Ellipse

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

атрибуты elipse:

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

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example ellipse01 - examples of ellipses</desc>
  <!-- Show outline of canvas using rect element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <g transform="translate(300 200)">
    <ellipse rx="250" ry="100"
          fill="red"  />
  </g>
  <ellipse transform="translate(900 200) rotate(-30)" 
        rx="250" ry="100"
        fill="none" stroke="blue" stroke-width="20"  />
</svg>

Poliline

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

Атрибуты poliline:

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

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example polyline01 - increasingly larger bars</desc>
  <!-- Show outline of canvas using rect element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <polyline fill="none" stroke="blue" stroke-width="10" 
            points="50,375
                    150,375 150,325 250,325 250,375
                    350,375 350,250 450,250 450,375
                    550,375 550,175 650,175 650,375
                    750,375 750,100 850,100 850,375
                    950,375 950,25 1050,25 1050,375
                    1150,375" />
</svg>

Polygon

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

Атрибуты polygon:

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

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

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example polygon01 - star and hexagon</desc>
  <!-- Show outline of canvas using rect element -->
  <rect x="1" y="1" width="1198" height="398"
        fill="none" stroke="blue" stroke-width="2" />

  <polygon fill="red" stroke="blue" stroke-width="10" 
            points="350,75  379,161 469,161 397,215
                    423,301 350,250 277,301 303,215
                    231,161 321,161" />
  <polygon fill="lime" stroke="blue" stroke-width="10" 
            points="850,75  958,137.5 958,262.5
                    850,325 742,262.6 742,137.5" />
</svg>

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

Leave a Reply