Школа программирования

# SVG

# Стилизация на CSS

svg {
	fill: yellowgreen;
	fill-opacity: 0.9;
	stroke: black;
	stroke-width: 2;
	stroke-opacity: 0.7;
}
svg path {
	d: path('M0,100 L 20,0 80,90 100,0 100,100 Z');
}

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

<svg viewBox="0 0 100 100">
	<rect
		x="25" y="25"
		width="50px"
		height="50px"
	/>
</svg>

<svg viewBox="0 0 100 100">
	<rect
		x="25" y="25" rx="10" ry="50"
		width="50px"
		height="50px"
	/>
</svg>

# Окружность: circle, ellipse

<svg viewBox="0 0 100 100">
	<circle cx="50" cy="50" r="25" />
</svg>
  • <g></g> - объединение объектов для задания общих свойств
<svg>
	<g stroke="black" stroke-width="3" fill="black">
		<circle cx="50" cy="50" r="5" />
		<circle cx="100" cy="100" r="5" />
	</g>
</svg>

<svg viewBox="0 0 100 100">
	<ellipse cx="50" cy="50" rx="35" ry="25" />
</svg>

# Линия: line, polyline

<svg viewBox="0 0 100 100">
	<line x1="0" y1="0" x2="50" y2="50" />
</svg>

<svg viewBox="0 0 100 100">
	<polyline points="0,0 50,50 25,75" />
</svg>

# Полигон: polygon

<svg viewBox="0 0 100 100">
	<polygon points="0,0 50,50 25,75" />
</svg>

# Путь: path

  • Доступные команды:
  • M - moveto<
  • L - lineto
  • H - horizontal lineto
  • V - vertical lineto
  • C - curveto
  • S - smooth curveto
  • Q - quadratic Bézier curve
  • T - smooth quadratic Bézier curveto
  • A - elliptical Arc
  • Z - closepath
<svg viewBox="0 0 100 100">
	<path d="M0,100 L50,50 100,100 Z" />
</svg>

<svg viewBox="0 0 100 100" >
	<path d="M0,100 Q 50,50 100,100"></path>
</svg>
  • Атрибут preserveAspectRatio="none" позволяет поместить фигуру целиком в viewBox
  • При изменении размера блока svg размер фигуры будет меняться
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
	<path d="M0,100 L 20,0 80,90 100,0 100,100 Z"></path>
</svg>

<svg viewBox="0 0 100 100" preserveAspectRatio="none">
	<path d="
		M0,50 Q 25,0 50,50, 75,100,
		100,50 L100,100 0,100 0,50
	"></path>
</svg>

# Текст: text

<svg>
	<text x="25" y="30">
		I love SVG!
	</text>
	<text x="45" y="100" transform="rotate(30 20,40)">
		I love SVG
	</text>
</svg>

<svg>
	<text x="10" y="30">Several lines:
		<tspan x="10" y="60">First line.</tspan>
		<tspan x="10" y="90">Second line.</tspan>
	</text>
</svg>

<svg>
	<a xlink:href="https://www.yandex.ru/" target="_blank">
		<text x="10" y="30">Link</text>
	</a>
</svg>

# Примеры

← 6.1 box-sizing →