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

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

Простая рисовалка на CSS.

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

Сегодня поговорим о том, как рисовать векторную графику в вебе стандартными средствами 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-анимацию, рисовать логотипы и работать с векторной графикой на продвинутом уровне. Подпишитесь на нашу рассылку, чтобы не пропустить новые выпуски.

Текст:

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

Редактура:

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

Художник:

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

Корректор:

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

Вёрстка:

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

Соцсети:

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

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Зеро-код: это как?
Зеро-код: это как?

Какие задачи можно решать, не открывая редактор кода.

easy
Зачем нужны парсеры
Зачем нужны парсеры

И как стащить с сайта что угодно.

medium
За что не любят программистов

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

easy
Зачем нужна командная строка в современных компьютерах

Разбираемся на Маках и Винде.

medium
Домены для вашего сайта
Домены для вашего сайта

Где брать, сколько стоят, какие классные и как там с персданными обстоит вопрос

easy
Кто такой тимлид (он же Lead)

Как устроена работа человека, которого слушают даже сеньоры.

easy
Давид Ян
Давид Ян о системе, которая предскажет ваше увольнение

Большой разговор в подкасте «Запуск завтра».

easy
Как работает 3D-принтер
Как работает 3D-принтер

И что можно на нём напечатать.

easy
Что такое трояны и вирусы — на самом деле

Чем может заразиться компьютер и насколько это реально страшно.

easy
Сжатие без потерь: как это работает
Сжатие без потерь: как это работает

Когда копия не отличается от оригинала.

easy
Какая бывает память
Какая бывает память

Краткий обзор для тех, кто не хочет глубоко копать.

medium
«Нормально делай и нормально будет»
«Нормально делай и нормально будет»

Даниил Попов о современной андроид-разработке, пользе твиттера и уходе из Авито.

easy
Почему в школе до сих пор изучают Pascal
Почему в школе до сих пор изучают Pascal

Паскаль. Турбо Паскаль!

easy
easy