Содержание

Что такое SVG-графика и как её использовать — Журнал «Код»

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

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

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

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

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

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

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

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

Обычно когда хотят что-то нарисовать в HTML, то используют холст с тегом <canvas> и рисуют на нём. Но плюс 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>, поставим на страницу и посмотрим на результат:

<!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)"/>

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

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

<rect 
      width=»30″ ← ширина
      height=»20″  ← высота
      fill=»orange» ← цвет прямоугольника
      stroke-width=»1″ ← толщина контура
      stroke=»rgb(0,0,0) ← цвет контура
«/>
<rect fill="orange" stroke-width="1" stroke="rgb(0,0,0)"/>

Минус стандартного прямоугольника в том, что он всегда рисуется от точки с координатами (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> тег <h2>:

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

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

  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 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>
	<h2>Привет, это журнал Код!</h2>
</body>
</html>

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

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

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

Зачем программистам сразу два монитора (а то и три)

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

Что дальше

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

Текст:

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

Редактура:

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

Художник:

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

Корректор:

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

Вёрстка:

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

Соцсети:

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

SVG Tutorial

❮ Предыдущий Далее ❯

Примеры в каждой главе

С помощью нашего редактора «Попробуйте сами» вы можете отредактировать SVG и нажать кнопку, чтобы просмотреть результат.

Пример SVG


Мой первый SVG


 



Попробуйте сами »

Что вы уже должны знать

Прежде чем продолжить, вы должны иметь базовое представление о следующем:

  • HTML
  • Базовый XML

Если вы хотите сначала изучить эти предметы, найдите учебные пособия на нашем Домашняя страница.

Что такое SVG?

  • SVG означает Масштабируемая векторная графика
  • SVG используется для определения векторной графики для Интернета
  • SVG определяет графику в формате XML
  • Каждый элемент и каждый атрибут в файлах SVG можно анимировать
  • SVG является рекомендацией W3C
  • SVG интегрируется с другими стандартами W3C, такими как DOM и XSL
    • .

SVG является рекомендацией W3C.

SVG 1.0 стал рекомендацией W3C 4 сентября 2001 г.

SVG 1.1 стал рекомендацией W3C 14 января 2003 г. 2011.

Преимущества SVG

Преимущества использования SVG по сравнению с другими форматами изображений (например, JPEG и GIF):

  • Изображения SVG можно создавать и редактировать в любом текстовом редакторе
  • Изображения SVG можно искать, индексировать, создавать сценарии и сжимать
  • Изображения SVG масштабируются
    • Изображения
  • SVG можно печатать с высоким качеством при любом разрешении
  • Изображения SVG можно масштабировать
  • Графика SVG НЕ теряет качества при увеличении или изменении размера
  • SVG — это открытый стандарт
    • .
  • Файлы SVG — это чистый XML

Создание изображений SVG

Изображения SVG можно создавать с помощью любого текстового редактора, но часто удобнее создавать изображения SVG с помощью программы для рисования, например Инкскейп.

❮ Предыдущий Далее ❯


НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА
КОД ИГРЫ

Играть в игру

Лучшие учебники
Учебник HTML
Учебник CSS
Учебник JavaScript
How To Tutorial
Учебник SQL
Учебник Python
Учебник W3.CSS
Учебник Bootstrap
Учебник PHP
Учебник Java
Учебник C++
Учебник jQuery

900 Справочник

900 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Как анимировать SVG с помощью CSS: Учебное пособие с примерами

Примечание редактора : последнее обновление этой статьи состоялось 12 июля 2022 г. и включает дополнительные примеры.

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

По сравнению с громоздкими GIF-файлами и видео, анимации, добавленные на веб-сайты с помощью SVG и CSS, загружаются быстрее. Вы также можете создавать простые анимации, не добавляя еще одну библиотеку JavaScript к странице загрузки вашего веб-сайта.

В этой статье мы узнаем, как создавать легкие масштабируемые анимации с помощью SVG и CSS. Хотя мы будем использовать Sass для демонстраций, CSS также будет работать. Давайте начнем!

  • Распространенные варианты использования анимации SVG с помощью CSS
    • Значки
    • Иллюстрации
  • Как подготовить SVG для анимации
    • Оптимизация кода SVG
    • Создание преднамеренных группировок
    • Остерегайтесь порядка укладки
    • Установить стиль SVG в предпочтительное начальное состояние
  • Применение CSS к SVG
  • Что можно анимировать с помощью CSS?
    • Вращающийся погрузчик
    • Сасс
    • HTML
    • Анимация рисования линий
    • Анимированная иллюстрация
    • Гамбургер-меню
    • Появление и исчезновение текста
    • Волнистый текст SVG
  • Другие инструменты для анимации SVG

Распространенные варианты использования анимации SVG с помощью CSS

Прежде чем мы перейдем к коду, давайте рассмотрим некоторые практические способы использования анимированных SVG.

Иконки

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

Иллюстрации

Иллюстрации — еще один распространенный вариант использования. Они могут быть включены в продукт как пустое состояние, демонстрирующее, что нужно сделать для создания данных на информационной панели. Другие популярные варианты использования включают анимированные смайлики и стикеры. Есть также анимированные точечные иллюстрации, которые помогают украсить целевые страницы.

Как подготовить SVG для анимации

Поскольку проще начать с упрощенного кода SVG, первая часть анимации SVG — это их подготовка. Вы можете сделать это, выполнив следующие шаги:

Оптимизация кода SVG

Когда создается SVG, в нем часто содержится лишний, ненужный код, поэтому важно его оптимизировать. Вы можете использовать такой инструмент, как SVGOMG, который уменьшает размер файла и удаляет все ненужные теги и метаданные.

Создание преднамеренных группировок

При необходимости вы можете создать преднамеренные группировки, открыв SVG в редакторе кода и приняв к сведению элементы , которые используются для группировки элементов SVG. Если вы хотите анимировать группу элементов вместе, оберните их в и назовите их классом или идентификатором.

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

Остерегайтесь порядка штабелирования

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

Установить стиль SVG в предпочтительное начальное состояние

SVG имеют атрибуты представления, похожие на стили CSS, но устанавливаемые непосредственно в SVG. Типичным примером является заливка цветом . Поскольку эти стили установлены в SVG, вы можете предположить, что они имеют большое значение для браузера. Как оказалось, любой CSS или Sass, который мы устанавливаем извне, естественным образом переопределяет стиль SVG без необходимости объявления !important .

Однако помните о том, что установлено в SVG, чтобы вы могли подготовиться к тому, что отображается во время загрузки страницы. Например, страница с медленной загрузкой будет отображать вспышку SVG до применения стилей CSS. Я рекомендую вам оставить ширину и высоту, чтобы избежать этого; Sara Soueidan хорошо объясняет вспышку нестилизованных SVG в своем блоге на эту тему.

Применение CSS к SVG

Теперь, когда мы привели в порядок SVG, давайте рассмотрим несколько вариантов добавления CSS.

При применении CSS к SVG следует учитывать несколько соображений. Одним из ограничений является то, что мы не можем использовать внешнюю таблицу стилей для применения стилей к SVG, связанному извне.

Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия

Подробнее →

Встраивание кода SVG в HTML делает элемент SVG и его содержимое частью дерева DOM документа, поэтому на них влияет CSS документа. Этот метод мой любимый, потому что он отделяет стили от разметки.

При рассмотрении других вариантов ниже мы увидим, что все они взаимосвязаны. Если вы используете Rails, есть некоторые драгоценные камни, которые могут автоматически встраивать SVG в представления. Таким образом, в вашем коде вы можете просто сослаться на внешний SVG, и тогда он будет встроен при компиляции. Дополнительным преимуществом этого метода является то, что встраивание SVG означает, что на один HTTP-запрос меньше, что повышает производительность:

Мы можем добавить стили CSS в тег