SVG

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.

<svg width="650" height="300" viewBox="0 0 650 300">
    <!-- Элементы SVG -->
</svg>

Элементы SVG

Линия

<line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="2"/>

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

<polyline points="10,135 100,10 55,135 10,10 105,135"/>

Текст

<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
  • text-anchor - используется для выравнивания строки предварительно отформатированного текста. Значения: start, middle и end.

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

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
  • x - Положение x верхнего левого угла прямоугольника.
  • y - Положение y верхнего левого угла прямоугольника.
  • width - Ширина прямоугольника
  • height - Высота прямоугольника
  • rx - Радиус x углов прямоугольника
  • ry - Радиус y углов прямоугольника

Многоугольник

<polygon points="60,20 180,20 200,150 10,150" style="fill:#f0ffff;stroke:#555;stroke-width:2"/>

Окружность

<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
  • r - радиус окружности.
  • cx - координата x центра окружности.
  • cy - координата y центра окружности.

Эллипс

<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

Путь

<path d="M 20 230 Q 40 205, 50 230 T 90230"/>

Стилизация

  • fill - цвет заливки
  • stroke - цвет границы (аналог border-color)
  • stroke-width - толщина границы (аналог border-width)
  • stroke-dasharray - пунктирная линия. Первая цифра определяет длину черточки, вторая пробел между черточками.

Title

Добавить SVG-элементу title можно следующим образом:

<g>
    <title>Это зеленый квадрат</title>
    <rect x="10" y="100" width="100" height="100" fill="green" />
</g>
Комментарии 0

*** чтобы писать комментарии.