SVG имеет внешний вид изображений, гибкость Canvas и стиль CSS.

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

SVG — это элементы DOM!

SVG можно вручную добавить в HTML без использования JavaScript. Это делается, как и любой другой базовый элемент, путем добавления тега ‹svg›. Он также имеет свои собственные дочерние теги, которые могут обрабатывать основы рисования нужной вам графики.

<html>
  <head>
    <title>SVG Example</title>
  </head>
  <body>
    <svg>
      <circle cx="50" cy="50" r="40" stroke="red" fill="yellow" />
    </svg>
  </body>
</html>

Это создаст желтый круг, расположенный на 50,50 в SVG. Он будет иметь красную обводку и желтую заливку. Он имеет радиус 40. Выглядит это так:

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

<style>
    circle {
        stroke-width: 5;
        stroke: blue;
        r: 20;
    }
</style>

Применив этот стиль, мы теперь получаем круг на странице, который выглядит так.

Конечно, JavaScript также создает элементы DOM и манипулирует ими, поэтому его также можно использовать для работы с SVG. Может быть, мы хотим, чтобы цвет заливки был зеленым при щелчке по кругу. Для этого мы можем использовать следующий код в разделе body. Обратите внимание, что я добавил атрибут id к элементу круга для удобства ссылки на него здесь.

<script>
    document.querySelector("#myCircleButton").addEventListener("click",(e) => {
        console.log(e)
        e.target.style.fill = "green";
    })
</script>

Мы также можем добавить новые элементы, если захотим. Поскольку он является частью DOM, мы можем затем проверить его в инструментах разработчика браузера. Нам не нужно писать всю эту логику для себя, как будет объяснено в следующем разделе.

SVG-библиотеки

Существует множество популярных библиотек, которые помогают нам создавать, стилизовать и управлять SVG на наших веб-страницах.

D3 может быть самой мощной библиотекой SVG, доступной для JavaScript. Его можно использовать для создания широкого спектра визуализаций на основе данных, таких как диаграммы, графики или карты. Это также может помочь при взаимодействии с пользователем. На самом деле, если вы погуглите несколько образцов, вы, вероятно, будете поражены. Вот базовый пример кода того, как мы можем использовать его, чтобы добавить создание круга на веб-страницу.

<html>
  <head>
    <title>SVG Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script>
  </head>
  <body>
    <svg id="svg"></svg>

    <script>

      const svg = d3.select("#svg")
        .attr("width", 100)
        .attr("height", 100);
  
      svg.append("circle")
        .attr("cx", 50)
        .attr("cy", 50)
        .attr("r", 40)
        .attr("fill", "cyan")
        .attr("stroke", "black")
  
    </script>
    </script>
  </body>
</html>

Snap.svg — это библиотека, с которой легко начать работу. Он может читать и управлять существующим SVG с помощью простого интерфейса. Вот быстрый пример HTML-файла, который включает JavaScript для обработки наших шагов SVG.

<html>
  <head>
    <title>SVG Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
  </head>
  <body>
    <svg id="svg"></svg>
    <script>
        const s = Snap("#svg");
        const circle = s.circle(50, 50, 40);
        circle.attr({
            fill: 'cyan',
            stroke: 'magenta',
            strokeWidth: 5
        });
    </script>
  </body>
</html>

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

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

Когда использовать SVG против Canvas — или CSS, или изображение?

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

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

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

Заключение

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

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу