Основным изобразительным инструментом формата SVG служат кисти и их свойства. Последнии задаются с помощью атрибутов, и имеют в каждом конкретном случае свое специальное назначения и таким образом придают отображению особый шарм.
Основные свойсва
Любой рисунок имет два основных свойства. Это его форма/размерность и цвет. Кисти имеют два основных атрибута цвета. Это - цвет границы stroke с толщиной stroke-width и цвет заливки фона fill. Последний агргумент может передаваться не только в виде цвета, но и в виде градиента или объекта. Конкретно о конструкции этих свойств объекта поговорим позже, а сейчас перейдем к рассказу об конструкции кисти
Во всех случаях если свойство stroke не указывается, то внешняя граница не рисуется. Отсутствие свойства fill всегда воспринимается заливкой - черного цвета. Если нужно, чтобы заливка отсутствовала то необходимо свойство fill="transparent" записать в таком виде. Дополнительно можно использовать так же fill="none"
<rect> - прямоугольник
Кисть rect рисуется прямоугольник с границей и заливкой, в начальных координатах x и y, по соответствующим осям, шириной width и высотой height.
<rect x="0" y="0" width="100" height="100" />
Если указаны два дополнительных параметра, то у прямоугольника рисуются радиусы углов rx и ry привязаные так же к своим осям
<rect rx="50" ry="30" width="100" height="100" fill="blue" />
Прямоугольник с границей оранжевого цвета толщиной в 10 пикселов, но без заливки выглядит так. Дополнительно кроме цвета границы - stroke, задается ее толщина и обязательно атрибут fill имеет значение transporent. В противном случае поле будет залито черным цветом.
<rect x="10" y="10" width="80" height="80" stroke-width="10" stroke="orange" fill="transparent" />
<circle> - окружность
Кисть circle отрисовывает окружность с границей и заливкой. Основными координатами служат положение ее центра по осям - cx и cy и значение радиуса r
<circle cx="50" cy="50" r="40" fill="#8CE" stroke-width="10" stroke="pink" />
<ellipse> - эллипс
Кисть ellipse отрисовывает эллипс с границей и заливкой. Основными координатами служат положение ее центра по осям - cx и cy и значение радиусов по своим осям rx и ry, соответственно.
<ellipse cx="50" cy="30" rx="40" ry="20" stroke-width="5" stroke="#CC8" fill="#FCF" />
<line> - линия
Кисть line отрисовывает линию цветом и толщиной, с координатами x1,y1 начала и x2,y2 конца.
<line x1="10" y1="10" x2="80" y2="40" stroke-width="10" stroke="red" />
<polyline> - полилиния
Кисть polyline отрисовывает линию цветом и толщиной, с координатами, заданными парами значений x,y от начала до конца линии, в блоке свойства points. Координаты всегда пара чисел, разделенных любым допустимым знаком, в т.ч и переводом строки.
<polyline points="10 10 20 20 30 15 40 30 50 25 60 40 70 35 80 50 90 45" stroke-width="3" stroke="blue" />
<polygon> - полигон
Кисть polygon отрисовывает замкнутую в начале линию цветом и толщиной, с заливкой с координатами, заданными парами значений x,y от начала до предпоследней точки линии, в блоке свойства points. Координаты всегда пара чисел, разделенных любым допустимым знаком,в т.ч и переводом строки.
<polygon points="50 10 55 30 70 30 60 40 65 55 50 45 35 55 40 40 30 30 45 30" stroke-width="5" stroke="red" />
<path> - часть
Кисть path наиболее универсальный инструмент изображения различных непрерывных объектов формата. Ей можно рисовать как закрытые объекты , типа полигонов, так и полилини, причем отрезки линий могут быть как прямые линии, так и кривые, типа дуг или линий безье. Рисунок имееет цвета границы и заливки с координатами, заданными специальными точками в блоке свойства d. Здесь приводится лишь демонстрация кисти, а самим правилам задания координат мы посвещаем отдельную главу.
<path d="M20,30 Q40,05 50,30 T90,30" stroke-width="5" stroke="green" fill="none" />
