SVG-фигуры и трансформации

← Начало про SVG

Писать SVG руками довольно просто. Используем фигуры: rect, polygon, circle, ellipse, а также line, polyline и path. Задаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку.

Следует отметить, что писать код руками совершенно не обязательно: с этим гораздо лучше справятся векторные редакторы, например, мощный, но платный Adobe Illustrator, бесплатный, но не такой удобный Inkscape, немного платный, но довольно симпатичный Sketch. Но имеет смысл хотя бы попробовать, потому что это а) интересно, б) полезно: навыки могут пригодиться, если надо нарисовать что-то простое, подправить код в отсутствие векторного редактора или вы хотите взаимодействовать с SVG через JavaScript.

Размеры и координаты задаются для разных фигур по-разному, а вот фон и обводка — одинаковы для всех:

fill — заливка. Можно задать цвет любым способом. Прозрачность — none или transparent. Цвет по умолчанию — черный;

stroke — цвет обводки;

stroke-width — толщина обводки, по умолчанию — 1. Без stroke не работает.

Больше параметров можно найти в спецификации w3.org/TR/SVG/painting.html#StrokeProperties.

Ниже можно увидеть примеры простых SVG-фигур и трансформации, которые к ним можно применить.

Rect

<svg width="230" height="140">
  <rect x="5" y="5" width="220" height="130"
    fill="skyblue" stroke="steelblue" stroke-width="5"
  />
</svg>

x,y — координаты левого верхнего угла фигуры; width, height — ширина и высота прямоугольника.

Закругленные уголки задаются параметрами rx и ry. Если задан только один из параметров, скругление по вертикали и по горизонтали будет одинаковым:

<svg width="230" height="140">
  <rect x="5" y="5" width="220" height="130" rx="20"
    fill="yellowgreen" stroke="green" stroke-width="5"
  />
</svg>

Если заданы оба параметра (и они таки разные), радиус скругления будет разным:

<svg width="230" height="140">
  <rect x="5" y="5" width="220" height="130" rx="10" ry="50"
    fill="khaki" stroke="darkkhaki" stroke-width="5"
  />
</svg>

Polygon

<svg width="230" height="140">
  <polygon points="5,135 115,5 225,135"
    fill="violet" stroke="purple" stroke-width="5"
  />
</svg>

<svg width="140" height="130">
  <polygon
    points="70,5 90,41 136,48 103,80 111,126 70,105 29,126 36,80 5,48 48,41"
    fill="turquoise" stroke="lightseagreen" stroke-width="5"
  />
</svg>

В points задаются x,y-координаты вершин фигуры, через пробел.

polygon замыкается сам по себе, последнюю точку можно не указывать.

Circle

<svg width="140" height="140">
  <circle r="65" cx="70" cy="70"
    fill="orangered" stroke="crimson" stroke-width="5"
  />
</svg>

r — радиус круга; cx, cy — координаты центра круга.

<svg width="230" height="140">
  <ellipse rx="110" ry="60" cx="115" cy="70"
    fill="gold" stroke="orange" stroke-width="5"
  />
</svg>

rx, ry — горизонтальный и вертикальный радиусы эллипса; cx, cy — координаты центра эллипса.

Более сложные фигуры можно сделать из сочетания простых:

При этом стиль фигур можно задать один раз для всей группы, а не отдельно для каждой фигуры:

<svg width="250" height="210" style="border: 1px solid">
  <g fill="#333">
    <ellipse rx="45" ry="37" cx="55" cy="60" transform="rotate(-45, 55, 55)"/>
    <ellipse rx="45" ry="37" cx="190" cy="60" transform="rotate(45, 190, 55)"/>
    <circle r="67" cx="122" cy="125"/>
  </g>
</svg>

Также можно рисовать простыми линиями.

Line

<svg width="230" height="140">
  <line
    x1="220" y1="10" x2="20" y2="130"
    stroke="violet" stroke-width="5"
  />
</svg>

x1, y1, x2, y2 — координаты начала и конца линии.

Polyline

<svg width="260" height="140">
  <polyline
    points="5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, 255,135"
    fill="none" stroke="orangered" stroke-width="5"
  />
</svg>

В points задаются x,y-координаты точек, каждая точка через пробел.

Для более сложных линий и фигур существует тег path, но эту тему стоит рассмотреть отдельно.

Transform

SVG-фигуры можно видоизменять с помощью свойства transform.

Возможные значения: translate, scale, rotate, skewX, skewY, matrix.

Пример:

<svg width="230" height="140">
  <ellipse rx="110" ry="30" cx="115" cy="70"
    fill="gold" stroke="orange" stroke-width="5"
    transform="rotate(-23 115 70)"/> <!-- Трансформация -->
</svg>

Можно задавать несколько трансформаций через запятую или через пробел.

translate(tx [ty])

Если второй параметр не задан, он равен 0.

scale(sx [sy])

Если второй параметр не задан, он равен первому.

rotate(rotate-angle [cx cy])

Если координаты центра поворота не заданы, они равны 0 0 — это левый верхний угол SVG-изображения.

skewX(skew-angle), skewY(skew-angle)

matrix(a b c d e f)