Всем привет и давайте приступим к рассмотрению svg.Первое что вам нужно знать svg - изображения являются векторными, то есть в их основе лежат линии.

А это значит что такие изображения отлично масштабируются.

Рассмотрим пример:

<svg>
    <line x1="0" y1="0" x2="500" y2="0" stroke-width="5" stroke="rgba(0,0,0,0.5)"/>
</svg>

c помощью данного кода мы нарисовали горизонтальную линию длиной 500px, толщиной 5px, черного цвета с коэффициентом прозрачности 0.5, то есть полупрозрачный.

Как видите для того чтобы нарисовать линию нам понадобились два тега.

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

x1 - начальная координата по оси x

y1 - начальная координата по оси y

x2 - конечная координата по оси x

y2 - конечная координата по оси y

здесь все довольно просто, есть начало отрезка, есть конец, которые соединены линией.

stroke-width - толщина линии в px

stroke="rgba(0,0,0,0.5)" - задаем цвет по схеме rgba

мы можем также стилизовать их через атрибут style.

Если нам необходимо нарисовать несложный контур состоящий из совокупности прямых линий, то для этих задач отлично подойдет тег polyline:

<svg>
	<polyline points="50,50 75,0 100,50 125,0 150,50" fill="none" stroke-width="1" stroke="rgb(0,0,0)"/> 
</svg>

здесь у нас добавились еще два атрибута points и fill. С fill все понятно это заливка нашего контура, none значит что у нас ее нет. points - в данном атрибуте перечислены пары значений x,y координат точек которые мы будем в заданной последовательности(слева на право) соединять прямыми.

Для отрисовки фигур с замкнутым контуром используется тег polygon:

<svg>
	<polygon points="100,100 125,50 150,100" fill="none" stroke='#000' />
</svg>

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

Скажу сразу что для отрисовки квадратов есть специальный тег rect:

<svg>
    <rect width="300" height="200" fill="rgb(200,234,234)" stroke-width="3" stroke="rgb(30,21,210)"/>
</svg>

здесь без комментариев.

Для отрисовки кругов и элипссов используют теги circle(круг) и ellipse(овал):

<svg >
    <circle cx="102" cy="100" r="40" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

где cx - координата x точки центра окружности круга, cy - координата y, r - радиус окружности.

<svg >
	<ellipse cx="100" cy="100" rx="100" ry="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

c эллипсом или овалом все немного посложнее, здесь уже задаются два радиуса окружностей, в нашем случае они равны, поэтому получается круг rx - радиус по x, ry - радиус по y.

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

На последок рассмотрим тег text который позволяет работать с текстом:

<svg >
	<text x="30" y="90" rotate="20,0,20"  fill="blue" font-size="30px" >SVG</text>
</svg>

здесь у нас выводится текст 'SVG',тут мы можем указывать все стандартные стили для работы с текстом, обратите внимание что первая и последняя буква наклонены, такого эффекта мы добились благодаря атрибуту rotate в котором указали через запятую значение угла наклона в градусах для каждой буквы.

Мы также можем через запятую указывать разные координаты для букв пример:

<svg >
	<text x="30 " y="90,95,100 " rotate="20"  fill="blue" font-size="30px" >SVG</text>
</svg>

и это далеко не все, что мы можем делать с текстом, более расширенные возможности дает тег textPath который мы рассмотрим в следующих статьях.

На этом дорогие друзья данная статья подошла к концу, надеюсь я смог донести до вас информацию и вы не раз ею воспользуетесь.

Желаю успехов и удачи! Пока!