Что такое SVG-графика и зачем она нужна

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

Сего­дня пого­во­рим о том, как рисо­вать век­тор­ную гра­фи­ку в вебе стан­дарт­ны­ми сред­ства­ми HTML.

Что такое и зачем нужно SVG

SVG рас­шиф­ро­вы­ва­ет­ся как scalable vector graphics, «мас­шта­би­ру­е­мая век­тор­ная гра­фи­ка». Это зна­чит, перед нами век­тор­ное изоб­ра­же­ние, кото­рое мож­но мас­шта­би­ро­вать без поте­ри качества.

SVG — это не един­ствен­ный фор­мат век­тор­ной гра­фи­ки, есть мно­го дру­гих. Но имен­но SVG исполь­зу­ют на веб-страницах и в HTML-коде. Его инструк­ции опти­ми­зи­ро­ва­ны для веб-разработки, и отри­сов­ка про­ис­хо­дит пря­мо в бра­у­зе­ре. И, самое глав­ное, все коман­ды SVG пред­став­ле­ны в виде тек­ста и коор­ди­нат, а не в виде отдель­ных фай­лов. Это зна­чит, что SVG-изображение мож­но зашить пря­мо в код веб-страницы, что ино­гда быва­ет незаменимо.

SVG исполь­зу­ет­ся в вебе для отрисовки:

  • гео­мет­ри­че­ских фигур и линий,
  • лого­ти­пов,
  • эле­мен­тов интер­фей­са на странице,
  • про­стых кар­ти­нок и иллюстраций.

Как использовать SVG на странице

Обыч­но когда хотят что-то нари­со­вать в HTML, то исполь­зу­ют холст с тегом <canvas> и рису­ют на нём. Но плюс SVG-графики в том, что для неё не нужен отдель­ный холст — мож­но рисо­вать что угод­но в любом месте стра­ни­цы с помо­щью тега <svg>..</svg>. Все объ­ек­ты, кото­рые нам нуж­но нари­со­вать, зада­ют­ся меж­ду эти­ми тегами.

Напри­мер, мы можем поста­вить на стра­ни­це любой заго­ло­вок, а потом пря­мо поверх него нари­со­вать пару зелё­ных кру­гов и крас­ную линию:

Как использовать SVG на странице

Теперь давай­те раз­бе­рём­ся, как это у нас полу­чи­лось и что для это­го нужно.

Линия

Линия — самый про­стой эле­мент SVG-графики. Что­бы нари­со­вать линию, нам нуж­но знать:

  • началь­ные и конеч­ные координаты,
  • тол­щи­ну линии,
  • и её цвет.

Для линии исполь­зу­ет­ся тег <line/>:

<line 

      x1="50" y1="30" ← начальные координаты линии

      x2="250" y2="0"  ← конечные координаты

      stroke-width="3" ← толщина линии

      stroke="red" ← цвет

/> 

Собе­рём всё вместе:

<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/> 

Теперь обер­нём эту коман­ду в тег <svg>, поста­вим на стра­ни­цу и посмот­рим на результат:

Линия в SVG-графике
<!DOCTYPE html>
<html lang="ru" >
<head>
  	<meta charset="UTF-8">
	<title>SVG-графика</title>
</head>
<body>
	<svg>
		<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/>  
	</svg>
</body>
</html>

Круг

Для кру­га исполь­зу­ет­ся коман­да <circle/>, в кото­рой нам нуж­но указать:

  • центр кру­га,
  • ради­ус,
  • цвет залив­ки,
  • тол­щи­ну контура,
  • цвет кон­ту­ра.

Что­бы нари­со­вать зелё­ный круг с жир­ной фио­ле­то­вой обвод­кой, зада­дим такие параметры:

<circle 

      cx="25" cy="25" ← центр круга

      r="20"  ← радиус

      fill="green" ← цвет заливки

      stroke-width="5"  ← толщина контура

      stroke="rgb(150,110,200)" ← цвет контура

/>

Собе­рём вме­сте, доба­вим вто­рой круг и тоже поло­жим это внутрь тега <svg>:

<circle cx="25" cy="25" r="20" fill="green" stroke-width="5" stroke="rgb(150,110,200)"/>
<circle cx="250" cy="32" r="30" fill="yellow" stroke-width="3" stroke="rgb(50,90,150)"/>
Круг в SVG-графике

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

С пря­мо­уголь­ни­ка­ми тоже всё про­сто — ука­зы­ва­ем раз­ме­ры, цвет залив­ки, а так­же цвет и тол­щи­ну контура:

<rect 

      width="30" ← ширина

      height="20"  ← высота

      fill="orange" ← цвет прямоугольника

      stroke-width="1" ← толщина контура

      stroke="rgb(0,0,0) ← цвет контура

"/>

<rect width="30" height="20" fill="orange" stroke-width="1" stroke="rgb(0,0,0)"/>
Прямоугольник в SVG-графике

Минус стан­дарт­но­го пря­мо­уголь­ни­ка в том, что он все­гда рису­ет­ся от точ­ки с коор­ди­на­та­ми (0,0). Если пря­мо­уголь­ник нужен в дру­гом месте, исполь­зу­ют многоугольник.

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

Мно­го­уголь­ник — это фигу­ра, кото­рая полу­ча­ет­ся так:

  1. Мы зада­ём любое коли­че­ство точек по координатам.
  2. Через эти точ­ки по поряд­ку про­хо­дят линии, при­чём послед­няя точ­ка соеди­ня­ет­ся с первой.
  3. То, что полу­чи­лось внут­ри гра­ниц линий, закра­ши­ва­ет­ся выбран­ным цветом.

Напри­мер, вот что нуж­но, что­бы нари­со­вать синий треугольник:

<polygon 

      points=" ← начались координаты вершин треугольника

      100,140 ← координаты первой точки

      250,118  ← координаты второй точки

      170,60 " ← координаты третьей точки

      fill="blue" ← цвет фигуры

      stroke-width="1" ← ширина обводки

      stroke="rgb(0,0,0) ← цвет обводки

"/>

<polygon points="100,140 250,118 170,60 " fill="blue" stroke-width="1" stroke="rgb(0,0,0)"/>
<!-- сразу добавим ещё одну фигуру -->
<polygon points="40,100 100,100 100,150 40,150" fill="red" stroke-width="2" stroke="rgb(100,250,110)"/>
Многоугольник в SVG-графике

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

Продвинутый уровень

Теперь доба­вим заго­ло­вок, что­бы полу­чить кар­тин­ку как в нача­ле ста­тьи. Пишем после тега <svg> тег <h1>:

<h1>Привет, это журнал Код!</h1>

Что такое SVG-графика и зачем она нужна

Так как наш тег с заго­лов­ком пер­во­го уров­ня напи­сан ниже тега с гра­фи­кой, то бра­у­зер и раз­ме­стил заго­ло­вок ниже кар­ти­нок. Что­бы гра­фи­ка лег­ла свер­ху тек­ста, нуж­но пой­ти на хитрость:

  1. Доба­вить стиль к svg-тегу.
  2. В этом сти­ле про­пи­сать абсо­лют­ное пози­ци­о­ни­ро­ва­ние и уста­но­вить зна­че­ние z-index = -1, что­бы слои с рисун­ка­ми ока­за­лись ниже всех и не меша­ли остальным.
  3. Так­же в этот стиль нуж­но доба­вить свой­ство display: block — оно управ­ля­ет тем, как рас­по­ла­га­ет­ся содер­жи­мое все­го бло­ка. Подроб­но про это свой­ство мы рас­ска­зы­ва­ли в под­бор­ке полез­ных CSS-команд — почи­тай­те, если инте­рес­но, как управ­лять внеш­ним видом страницы.

Доба­вим это в сти­ли и собе­рём пол­ную страницу:

<!DOCTYPE html>
<html lang="ru" >
<head>
  	<meta charset="UTF-8">
	<title>SVG-графика</title>
	<style type="text/css">
		svg{
			position:absolute;
			z-index:-1;
			display: block;}
	</style>
</head>
<body>
	<svg>
		<!-- круги -->
		<circle cx="25" cy="25" r="20" fill="green" stroke-width="5" stroke="rgb(150,110,200)"/>
		<circle cx="250" cy="32" r="30" fill="yellow" stroke-width="3" stroke="rgb(50,90,150)"/>
		<!-- линия -->
		<line x1="50" y1="30" x2="250" y2="0" stroke-width="3" stroke="red"/>  
		<!-- прямоугольник -->
		<rect width="30" height="20" fill="orange" stroke-width="1" stroke="rgb(0,0,0)"/>
		<!-- многоугольники -->
		<polygon points="100,140 250,118 170,60 " fill="blue" stroke-width="1" stroke="rgb(0,0,0)"/>
		<polygon points="40,100 100,100 100,150 40,150" fill="red" stroke-width="2" stroke="rgb(100,250,110)"/>

	</svg>
	<h1>Привет, это журнал Код!</h1>
</body>
</html>
Что такое SVG-графика и зачем она нужна

Внешние SVG-файлы

Инструк­ции SVG мож­но упа­ко­вы­вать во внеш­ние фай­лы и под­клю­чать как обыч­ные изоб­ра­же­ния. Напри­мер, вы нари­со­ва­ли кра­си­вую икон­ку в век­тор­ном редак­то­ре, сде­ла­ли экс­порт в фор­мат SVG и под­клю­чи­ли к стра­ни­це как обыч­ное изоб­ра­же­ние. Бра­у­зер пой­мёт инструк­ции и нари­су­ет ваше изоб­ра­же­ние кра­си­во и плав­но, како­го бы раз­ме­ра оно ни было. 

Это осо­бен­но полез­но на мони­то­рах высо­ко­го раз­ре­ше­ния и на мобил­ках: напри­мер, если вам на сай­те нуж­ны какие-то икон­ки, вы може­те под­клю­чить их как SVG-файлы, и бра­у­зер отри­су­ет их кор­рект­но хоть на retina-дисплеях, хоть на ста­рых Full-HD мониторах. 

Если хоти­те попро­бо­вать, ска­чай­те любую из ико­нок Чики­на и добавь­те на сайт через тег <img src="..."> — уви­ди­те, как это кра­си­во. Не забудь­те ука­зать width и height, что­бы век­тор­ная кар­тин­ка зна­ла, в каком раз­ме­ре отрисовываться. 

Что дальше

Мы разо­бра­ли толь­ко самые осно­вы SVG-графики. Даль­ше будем делать кра­си­вую SVG-анимацию, рисо­вать лого­ти­пы и рабо­тать с век­тор­ной гра­фи­кой на про­дви­ну­том уровне. Под­пи­ши­тесь на нашу рас­сыл­ку, что­бы не про­пу­стить новые выпуски.

Текст:

Миха­ил Полянин

Редак­ту­ра:

Мак­сим Ильяхов

Худож­ник:

Даня Бер­ков­ский

Кор­рек­тор:

Ири­на Михеева

Вёрст­ка:

Мария Дро­но­ва

Соц­се­ти:

Олег Веш­кур­цев