HTML5. Урок #10. SVG

by @html_books
HTML5. Урок #10. SVG

Рисуем фигуры

SVG (Scalable Vector Graphics, или масштабируемая векторная графика) - язык разметки в стиле HTML для рисования фигур.

Есть несколько методов рисования траекторий, прямоугольников, кругов, букв и графических изображений. 

Векторная графика не привязана к пикселям, поэтому такие изображения могут быть увеличены бесконечно без потери качества.

Вставка SVG - изображений

Векторное изображение может быть вставлено в HTML-код с помощью простого тега изображения с атрибутом, указывающий путь к исходной картинке:

<img src="image.svg" alt="" height="300" />

Рисуем круг

Чтобы нарисовать фигуру с помощью SVG - графики, сначала нужно написать элемент svg с двумя атрибутами: шириной width и высотой height.

<svg width="1000" height="1000"></svg>

Если нужно нарисовать круг, добавьте тег <circle>:

<svg width="2000" height="2000">
   <circle cx="80" cy="80" r="50" fill="green" />
</svg>

- cx - центр круга передвигается вправо по экрану

- cy - центр круга передвигается вниз по экрану

- r - задаёт радиус

- fill - задаёт цвет нашему кругу

- stroke - для создания контура

Результат:

Другие фигуры

<rect> нарисует прямоугольник:

<svg width="2000" height="2000">
   <rect width="300" height="100" 
      x="20" y="20" fill="green" />
</svg>

Следующий код нарисует «залитый» зелёным цветом прямоугольник. 

<line> нарисует линию:

<svg width="400" height="410">
   <line x1="10" y1="10" x2="200" y2="100" 
      style="stroke:#000000; stroke-linecap:round; 
      stroke-width:20" />
</svg>

(x1, y1) задают координаты начала, (х2, у2) задают координаты конца линии.

<polyline> рисует фигуры, составленные из нескольких отрезков линий:

<svg width="2000" height="500">
   <polyline style="stroke-linejoin:miter; stroke:black; 
      stroke-width:12; fill: none;"
      points="100 100, 150 150, 200 100" />
</svg>

Points - координаты ломанной линии.

Код внизу нарисует чёрную галочку:

Элементы <ellipse> и <polygon>

Эллипс

Элемент <ellipse> пишется так же, как <circle>, с той лишь разницей, что: 

Вы можете отдельно задавать координаты горизонтальной и вертикальной осей радиуса эллипса - с помощью атрибутов rx и ry.

<svg height="500" width="1000">
   <ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green" />
</svg>

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

Элемент <polygon> используется для создания фигур с не менее, чем тремя сторонами. Элемент polygon стоит особняком, потому что он может автоматически замыкать фигуру.

<svg width="2000" height="2000">
<polygon points="100 100, 200 200, 300 0" 
   style="fill: green; stroke:black;" />
</svg>
June 15, 2018
by @html_books