.svg — это формат векторной графики, который в отличие от растровой графики, может растягиваться и сжиматься без потери качества; а также “человекопонятный код”. SVG-элементы можно оформить с помощью CSS и добавить им интерактивности с помощью JavaScript.
SVG-элемент вставляется с помощью тега svg, внутри которого находится содержимое:
circle— круг, r — радиус, cx — центр фигуры по оси x, cy — по оси y, fill — цвет;
rect — прямоугльник, width — ширина, height — высота, x и y — координаты верхнего угла, rx — скругление углов по горизонтали,ry — по вертикали, fill — цвет;
polygon — многоугольинки, points — координаты вершин фигуры, fill — цвет;
ellipse — элипс, rx — радиус по горизонтальной оси, ry— радиус и по вертикальной оси, cx — центр фигуры по оси x, cy — по оси y,fill — цвет;
line — линия, x1 и y1 — координаты начала, x2, y2 — координаты конца, stroke — цвет обводки, stroke-width — толщина линии;
polyline— ломаная линия, points — координаты точек на линии,stroke — цвет обводки, stroke-width — толщина линии;
<svg>
<circle r="50" cx="50%" cy="50%" fill="yellow"/>
<rect width="50%" height="100" x="25%" y="25" rx="20" ry="50" fill="orange"/>
<polygon points="70,5 90,41 136,48 103,80 .." fill="green"/>
<ellipse rx="50%" ry="50" cx="50%" cy="30%" fill="silver" />
<line x1="10" y1="20" x2="40" y2="90" stroke="blue" stroke-width="5" />
<polyline points="50,180 100,20 150,180 20,80 180,80 50,180 100,20" stroke="red" stroke-width="5" fill="none" />
</svg>
Все теги в SVG должны быть закрыты!