Мой Справочник | HTML | SVG

MDN - Tutorial

svg-html

Теги	Описание	Атрибуты	Описание
<svg>	html-контейнер для svg-тегов	width, height	Размеры контейнера. По ум* 300 х 150. Эти размеры влияют только на контейнер, на svg-рисунов не влияет никак
viewBox	Атрибут для масштабирования граффики внутри контейнера	viewBox="0 0 237 300"	координаты X и Y, ширина, высота. Относительно контейнера viewBox центруется
<circle>	круг	cx="50%" cy="50%" r="50" fill="red"	x-координата y-координата размер радиуса заливка
<rect>	прямоугольник	height="100px" width="150px" x=25% y="30" rx="15" ry="10" fill="green"	высота ширина x-координата (левого верхнего угла) y-координата (левого верхнего угла) радиусы скругления углов заливка
<polygon>	многоугольник	points="x1,y1 ..." fill="maroon"	координаты точек заливка
<ellipse>	эллипс	rx="80" ry="20" cx="" cy="" fill="lightgray"	x-радиус y-радиус координаты центра заливка
<line>	линия	x1="50" y1="50" x2="250 " y2="100" stroke="deeppink" stroke-width="6"	координаты начала координаты конца цвет линии ширина
<polyline>	ломанная	points stroke stroke-width fill	координаты точек цвет ширина заливка

svg-css

Теги	css	Описание
svg	svg {   border: 1px solid #000;   width: 200px;   height: 200px; }	Можно применять любые доступные css-свойства
circle, ellipse, rect, polygon, line, polyline	.svg-elem {   fill: yellowgreen;   fill-opacity: .5;   stroke: orange;   stroke-width: 5;   stroke-opacity: 0.5;   stroke-linecap: round;   stroke-linejoin: bevel;   stroke-dasharray: 15 15;   stroke-dashoffset: 20; }	fill - заливка (none - без заливки); fill-opacity - прозрачность заливки; stroke - цвет; stroke-width - толщина обводки; stroke-opacity - прозрачность обводки; stroke-linecap - концы линий (butt - по ум*, round - закруглённые, square - квадратные); stroke-linejoin - вид изгибов (miter - по ум*, round - закруглённые, bevel - ленточный изгиб); stroke-dasharray - пунктир (длина отрезка длина пробела, может быть много значений) stroke-dashoffset - сдвиг пунктира на 20px

Окружность

<svg style="border: 1px solid black">
  <circle cx="50%" cy="50%" r="50" fill="red"/>
</svg>

Прямоугольник

<svg style="border: 1px solid black">
  <rect height="100px" width="150px" x=25% y="30" rx="15" ry="10" fill="green"/>
</svg>

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

<svg style="border: 1px solid black">
  <polygon points="230,30 200,60 260,60" fill="maroon"/>
  <polygon points="70,5 90,41 136,48 103,80 111,126 70,105 29,126 36,80 5,48 48,41" fill="chocolate"/>
</svg>

Эллипсы

<svg style="border: 1px solid black">
  <ellipse rx="80" ry="20" cx="50%" cy="50%" fill="lightgray"/>
</svg>

Линии

<svg style="border: 1px solid black ">
  <line x1="50 " y1="50 " x2="250 " y2="100 " stroke="deeppink " stroke-width="6 "/>
</svg>

Ломанные

<svg style="border: 1px solid black ">
  <polyline points="30,50 40,10 80,100 0,30 70,25 10,85" stroke="pink" stroke-width="4" fill="none"/>
</svg>

Атрибут preserveAspectRatio="none" будет отменять сохранение пропорций ширины и высоты у svg-картинок

Вставлять <svg> можно с помощью тега <img> (подойдет для контента), также с помощью background-image (подойдёт для декора).

Если необходим полный доступ к svg-элементу, то необходимо записывать сам тег svg, либо внутри object

SVG-спрайты

Вставить после body:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="svg-logo">
    ...svg-код...
  </symbol>
</svg>

Использование через id symbol:

<svg class="svg-map" width="136.1px" height="75px" viewBox="0 0 136.1 75">
  <use xlink:href="#svg-map"></use>
</svg>