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

Текст:

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

Редактура:

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

Художник:

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

Корректор:

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

Вёрстка:

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

Соцсети:

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

Веб-разработка — это новый черный
А мы знаем толк в моде и поможем освоить новую специальность за полгода.
Посмотреть
Фронтенд — это новый черный
Еще по теме
prev
next
Зеро-код: это как?
Зеро-код: это как?

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

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

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

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

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

Как работает шифрование в мессенджерах
Как работает шифрование в мессенджерах

Секретная переписка.

MySQL — царица баз
MySQL — царица баз

Она сложная, но с ней всё просто.

Какие бывают хостинги

Выделенный сервер, VPS, KVM, VDS и прочие умные слова.

Отлить в бетоне!
Отлить в бетоне!

Сага о генераторах статических сайтов.

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

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

Как отправить JSON-данные на сервер
Как отправить JSON-данные на сервер

Первый шаг на пути к облачному хранению данных.

Кто такой мидл и как им стать

Если вы это читаете, у вас больше шансов, чем у остальных.

Как стать богатым программистом
Как стать богатым программистом

Четыре стратегии повышения дохода, если ты владеешь хотя бы одним языком программирования.

Как учатся нейронки

Самое простое объяснение на картинках.

Симметричное шифрование
Симметричное шифрование

Простое, но очень стойкое.

easy