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

30.10.2017 Oleg M. SVG графика

Файлы в формате SVG это файлы масштабируемой векторной графики. Если быть более точным, то это язык описания двумерной графики. Основой послужил язык разметки XML.

Кратко об svg

Данный формат обладает рядом достоинств: будучи векторными изображениями, SVG изображение сохраняет качество независимо от того, как они масштабируются или изменяются.

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

SVG-изображения, основанные на XML, доступны для поиска, индексируются и могут быть написаны в скриптах и сжаты.
Прежде чем перейти к рисованию без рисования посмотрим на структуру пустого svg файла, достаточного для отображения в любой программе.

1.<?xml version= «1.0» encoding= «utf8»?>
2.<!DOCTYPE svg PUBLIC «-//W3C//DTD SVG 1.1//EN» «http://www.w3c.org/Graphics/SVG/1.1/DTD/svg11.dtd»>
3.<svg width= «600» height= «600» xmlns= «http://www.w3.org/2000/svg » version= «1.1»>
4.
5.</svg>

Для удобства строки пронумерованы. В первой строке находится стандартное объявление XML документа.
Вторая строка- указание DTD-схемы документа. В третьей строке задается размер создаваемого документа 600 на 600 пикселей. Первый атрибут тега <svg> это ширина width,а второй ,соответственно, высота height. Здесь же атрибутом является указание пространства имен и версии. В четвертой строке будет находится все остальное.
Если открыть в блокноте рисунок созданный в inkscape, то можно найти дополнительные теги, которые создает inkscape по умолчанию. Если же при сохранении рисунка выбрать простой svg, то структура файла будет чуть другой.
Перейдем непосредственно к созданию основных фигур. Вооружаемся блокнотом и вперед. То что сделаем проверяем в inkscape, поэтому держим его запущенным.

Окружность.

Для создания окружности в наш пустой svg файл добавляем строку <circle cx= «300» cy= «300» r= «100» />
Атрибутами являются координаты центра окружности (cx и cy) и ее радиус (r). При этом начало координат лежит в верхнем левом углу рабочего листа. Полностью svg файл:

<?xml version= «1.0» encoding= «utf8»?>
<!DOCTYPE svg PUBLIC «-/W3C/DTD SVG 1.1/EN» «http://www.w3c.org/Graphics/SVG/1.1/DTD/svg11.dtd»>
<svg width= «600» height= «600» xmlns= «http://www.w3.org/2000/svg» version=»1.1″>
<circle cx=»300″ cy=»300″ r= «100»/>
</svg>

Будет создана окружность точно по центру документа, радиусом в 100 пикселей. Так как никаких указаний о цвете заливки, обводки, слоях и других эффектов не было, то окружность рисуется без обводки и заливается черным цветом, что и в видим, открыв документ в inkscape. Обратите внимание, что в документе не будет и слоев.

Обозначения атрибутов cx, cy и r является стандартным. Давайте зададим обводку и заливку нашей окружности, а так же зададим толщину обводки равной 6 пикселям.

<?xml version= «1.0» encoding= «utf8»?>
<!DOCTYPE svg PUBLIC «-/W3C/DTD SVG 1.1/EN» «http://www.w3c.org/Graphics/SVG/1.1/DTD/svg11.dtd»>
<svg width= «600» height= «600» xmlns= «http://www.w3.org/2000/svg» version=»1.1″>
<circle cx=»300″ cy=»300″ r= «100» fill= «green» stroke= «yellow» stroke-width= «6»/>
</svg>

Выбрана заливка зеленым цветом, а обводка желтым.

Что интересно, если создать слой в этом документе, то можно увидеть, что рисунок окружности будет находится не на созданном слое , а где то там? Соответствующие атрибуты выделены красным. Если необходимо создать окружность без заливки или обводки значение соответствующего атрибута устанавливаем в none

stroke= «none»

Для изменения прозрачности заливки добавляем атрибут opacity, например opacity= «0.5» уменьшает прозрачность заливки в 2 раза, а для изменения прозрачности обводки добавляем атрибут stroke-opacity, например stroke-opacity= «0.5» уменьшает прозрачность обводки в 2 раза.

<?xml version= «1.0» encoding= «utf8»?>
<!DOCTYPE svg PUBLIC «-/W3C/DTD SVG 1.1/EN» «http://www.w3c.org/Graphics/SVG/1.1/DTD/svg11.dtd»>
<svg width= «600» height= «600» xmlns= «http://www.w3.org/2000/svg» version=»1.1″>
<circle cx=»300″ cy=»300″ r= «100» fill= «green» stroke= «yellow» stroke-width= «6» opacity= «0.5» stroke-opacity= «0.5» />
</svg>

Прямоугольники, квадраты.

Задание прямоугольников выглядит так

<?xml version= «1.0» encoding= «utf8»?>
<!DOCTYPE svg PUBLIC «-/W3C/DTD SVG 1.1/EN» «http://www.w3c.org/Graphics/SVG/1.1/DTD/svg11.dtd»>
<svg width= «600» height= «600» xmlns= «http://www.w3.org/2000/svg» version=»1.1″>
<rect x=»100″ y=»100″ width= «300» height= «80» fill= «green» stroke= «yellow» stroke-width= «6»/>
</svg>

Атрибутами прямоугольника (квадрата) rect указываем координаты верхнего левого угла , а так же ширину и высоту прямоугольника. Настройки заливки и обводки выглядят так же.

Ну и в финале окружность с квадратом

<?xml version= «1.0» encoding= «utf8»?>
<!DOCTYPE svg PUBLIC «-/W3C/DTD SVG 1.1/EN» «http://www.w3c.org/Graphics/SVG/1.1/DTD/svg11.dtd»>
<svg width= «400» height= «400» xmlns= «http://www.w3.org/2000/svg» version=»1.1″>
<rect x=»100″ y=»100″ width= «200» height= «200» fill= «green» stroke= «yellow» stroke-width= «6»/>
<circle cx=»200″ cy=»200″ r= «100» fill= «yellow» stroke= «green» stroke-width= «6»/>
</svg>