Продолжаем знакомство с svg

Поделиться

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

Основные фигуры

Создайте пустой текстовый документ в блокноте. Все примеры ниже мы будем набирать именно в блокноте.

Линия.

Линия относится к одним из простейших объектов и используется достаточно часто. Для задания линии достаточно указать координаты начала линии (x1, y1) и координаты конца линии (х2,y2). Если не указывать других атрибутов, то будет нарисована линия минимальной толщины черного цвета.

<?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″>
<line x1=»100″ y1=»100″ x2= «100» y2= «200» stroke= «red» stroke-width= «6»/>
</svg>

В примере выше строится линия красного цвета, толщиной 6 пикселей. Для изменения прозрачности обводки добавляем атрибут stroke-opacity.

Ломаная линия.

Задание ломаной сводится к указанию координат точек, через которые проходит линия.

<?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″>
<polyline points=»100 100 200 100 200 200 100 200″ stroke= «yellow» stroke-width= «6»/>
</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= «400» height= «400» xmlns= «http://www.w3.org/2000/svg» version=»1.1″>
<polyline points=»100 100 200 100 200 200 100 200″ stroke= «yellow» fill= «none» stroke-width= «6»/>
</svg>

А в этом случае заливки нет.

Полигон

Задание полигона практически не отличается от создания ломаной.  Мы указываем пары координат точек, а вот замыкание начальной и конечной точки происходит автоматически. Ну и необходимо заменить тег polyline на polygon.

<?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″>
<polygon points=»100 100 200 100 200 200 100 200″ fill= «none» stroke= «red» stroke-width= «6»/>
</svg>

Это уже знакомый пример, замыкание происходит автоматически.

И еще немного информации

  • Для группировки элементов используется конструкция <g> … </g>

<?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″>
<g>
<polygon points=»100 100 200 100 200 200 100 200″ fill= «blue» stroke= «none»/>
<line x1=»100″ y1=»300″ x2= «300» y2= «200» stroke= «red» stroke-width= «6»/>
</g>
</svg>

В этом примере сгруппированы полигон голубого цвета и линия красного цвета.

  • Цвет объектов можно задавать не только прямым указанием цвета, но и в формате RGB, указав значение в каждом канале. Например, так

<?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″>
<polygon points=»100 100 200 100 200 200 100 200″ fill= «rgb(128,135,50)» stroke= «none»/>
</svg>

  • Принято с помощью конструкции  <desc> … </desc> создавать описание содержания файла. Теги можно многократно использовать внутри одного файла. Например, так

<?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″>
<desc>Строим полигон без заливки и с обводкой.<desc>
<polygon points=»100 100 200 100 200 200 100 200″ fill= «none» stroke= «red» stroke-width= «6»/>
</svg>

 

Продолжение следует.

Поделиться