SSSVG: понятный SVG на 24 живых примерах

SVG часто выглядит сложнее, чем он есть: несколько букв в path, четыре числа в viewBox, ссылка на непонятный id. Предлагаю разбирать его не по случайным фрагментам кода, а по одному наблюдаемому изменению: двигаем точку, меняем атрибут, смотрим на результат.

SSSVG от fffuel устроен именно как визуальный интерактивный справочник по выбранным частям SVG: фигурам, координатам, контурам, группам, маскам, заливкам, фильтрам и тексту. Ниже мы сначала попробуем эти идеи в своей мастерской, а затем разберём, где они пригодятся в реальной вёрстке.

Что такое SSSVG и как им пользоваться

В оригинальном SSSVG рядом с объяснениями расположены рисунки, параметры и примеры разметки; это справочник, а не библиотека, которую нужно устанавливать в проект. Начните с атрибута, который непонятен, измените только его и сравните рисунок с кодом.

Справочник охватывает популярные и интересные части спецификации, но не заявлен как её полная замена (описание SSSVG). Для точного поведения атрибутов полезно параллельно держать под рукой спецификацию SVG, а для первого знакомства можно пройти мастерскую ниже.

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

Живая SVG-мастерская: 24 примера

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

Кнопка «Скачать SVG» сохраняет текущий пример, а не заранее подготовленную картинку. Фон предпросмотра и учебные направляющие в файл не входят: так удобнее использовать результат в собственном макете.

Все настройки этой мастерской живут в памяти страницы и сбрасываются после её перезагрузки. Мы не принимаем произвольную SVG-разметку и не загружаем пользовательские файлы: доступные поля меняют только параметры подготовленных примеров.

Координаты, viewBox и базовые фигуры

Значение viewBox="0 0 400 280" описывает прямоугольник во внутренних координатах: минимальные X и Y, затем ширину и высоту; эти числа не обязаны совпадать с размером элемента в CSS-пикселях (MDN: viewBox). Попробуйте уменьшить внутреннюю ширину, не меняя внешнее окно мастерской.

Способ размещения задаёт preserveAspectRatio: xMidYMid meet сохраняет пропорции и помещает весь viewBox, xMidYMid slice заполняет окно с возможным обрезанием, а none допускает неравномерное масштабирование (MDN: preserveAspectRatio). Сравните три режима на одном круге, чтобы различие стало очевидным.

Для круга нужны cx, cy и r, для эллипса два радиуса rx и ry, а у прямоугольника x и y обозначают левый верхний угол (SSSVG: базовые фигуры). Не начинайте с длинного path, если нужный результат получается одной простой фигурой.

polyline рисует ломаную, а polygon замыкает последнюю вершину на первую; список points в обоих случаях состоит из пар координат (SSSVG: polyline и polygon). В мастерской для открытой ломаной явно указано fill="none", чтобы заливка не мешала читать линию.

Исследовать viewBox ↑ · Изменить вершины фигуры ↑

Path без угадывания: линии, кривые и дуги

path описывает контур последовательностью команд в атрибуте d; прописные команды используют абсолютные координаты, строчные обычно задают смещения от текущей точки (MDN: команды path). Удобнее читать такую запись небольшими фрагментами, а не пытаться понять всю строку сразу.

Управляющая точка Безье не обязана лежать на кривой: она влияет на направление касательной; у квадратичной кривой такая точка одна, у кубической две (MDN: кривые Безье). Включите направляющие и понаблюдайте именно за направлением начала и конца линии.

<path d="M45 220 Q200 35 355 220"
      fill="none" stroke="#155959" stroke-width="7"/>

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

Для дуги A слишком маленькие радиусы могут быть автоматически увеличены, чтобы дуга соединила заданные точки; поэтому иногда ползунок радиуса ведёт себя не так, как ожидается (MDN: эллиптические дуги). В нашем примере начальные радиусы подобраны так, чтобы удобно сравнить варианты флагов.

Потянуть квадратичную кривую ↑ · Исследовать две управляющие точки ↑ · Проверить флаги дуги ↑

Группы, transform и повторное использование

g объединяет элементы, позволяет задать общие наследуемые свойства и преобразования, а собственный атрибут потомка может переопределить унаследованное значение (SSSVG: g). Попробуйте перекрасить группу: круг с отдельной золотой заливкой останется золотым.

Порядок операций в transform важен, потому что преобразования затрагивают систему координат: перестановка переноса и поворота меняет результат (SSSVG: transform). В нашем стенде серый контур остаётся на исходном месте, чтобы было с чем сравнить.

defs хранит определения без непосредственного отображения, use создаёт экземпляр по ссылке, а symbol позволяет определить переиспользуемую графику с собственным viewBox (SSSVG: defs, use, symbol). Для набора однотипных значков начните с одной геометрии и двух экземпляров разного размера.

У скачиваемых примеров есть ссылки вида href="#…" и url(#…), поэтому при переносе нескольких копий в один HTML-документ следите за уникальностью идентификаторов и соответствием ссылок. В мастерской определения и ссылки генерируются вместе с отдельным префиксом.

Сравнить порядок transform ↑ · Изменить четыре экземпляра сразу ↑ · Проверить symbol ↑

ClipPath и mask: скрыть или сделать прозрачным

clipPath ограничивает видимую область геометрией, а mask может оставлять содержимое частично видимым (SSSVG: clipPath и mask). Сравните круговое окно с плавным исчезновением одной и той же композиции.

Правило «белое показывает, чёрное скрывает» относится к яркостной маске luminance, где учитываются и яркость, и альфа-канал; у маски alpha важна только прозрачность, поэтому непрозрачный чёрный тоже показывает содержимое (MDN: mask-type). Именно это различие вынесено в отдельный переключатель мастерской.

Сначала оставьте переход «чёрный → белый» и смените luminance на alpha. Затем включите переход «прозрачный → белый»: сравнение даст гораздо более полезную интуицию, чем запоминание двух картинок.

Подвигать окно clipPath ↑ · Сравнить luminance и alpha ↑

Узоры, линейные и радиальные градиенты

pattern описывает повторяемый фрагмент; patternUnits="userSpaceOnUse" задаёт размеры плитки в пользовательских координатах, а patternTransform преобразует узор (SSSVG: pattern). Изменяйте шаг точек отдельно от их радиуса: это две разные характеристики.

linearGradient и radialGradient определяют заливки с цветовыми стопами; положение стопа задаёт offset, цвет задаёт stop-color, а прозрачность можно менять через stop-opacity (SSSVG: градиенты). В мастерской линейный пример показывает распределение стопов, а радиальный позволяет сравнить центр и фокус.

Соберите небольшую заливку и скачайте её как SVG, затем откройте файл отдельно. Так можно проверить, что результат не зависит от фона предпросмотра или оформления статьи.

Собрать узор ↑ · Изменить цветовые стопы ↑ · Передвинуть фокус ↑

Фильтры, обводка и наконечники стрелок

У заливки и обводки собственные параметры: stroke-width меняет толщину, stroke-linecap форму концов, а stroke-dasharray и stroke-dashoffset задают штрихи и их смещение (SSSVG: fill и stroke). Попробуйте отключить заливку и работать только с контуром.

filter объединяет примитивы обработки изображения, причём его собственная область ограничивает результат; по умолчанию это x="-10%", y="-10%", ширина и высота 120% (MDN: filter). В учебном примере область расширена сильнее, чтобы удобнее было экспериментировать с размытой границей.

marker позволяет поставить графический наконечник на линию, а markerUnits="strokeWidth" связывает его размер с толщиной обводки; userSpaceOnUse использует пользовательские единицы (SSSVG: marker). Сравните оба режима, увеличивая толщину одной и той же линии.

Настроить обводку ↑ · Сравнить размытие и тень ↑ · Собрать стрелку ↑

Как забрать пример в свой проект

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

• Отдельный файл: для статичной иллюстрации можно начать с обычного <img src="example.svg" alt="Смысл изображения">; подберите описание под назначение картинки.
• Инлайн-разметка: вставляйте содержимое поля «Ваш SVG», если хотите работать с внутренними элементами непосредственно в документе.
• Несколько экземпляров: проверьте уникальность id, а не только внешний вид первого примера.
• Изменение размеров: сначала проверьте viewBox и preserveAspectRatio, затем внешние размеры блока.

text добавляет текст в SVG, text-anchor управляет привязкой строки, а tspan позволяет отдельно оформить её часть (SSSVG: text и tspan). В нашем последнем примере попробуйте короткую и длинную подпись, затем уменьшите окно: длинная строка специально не скрывается многоточием.

Не превращайте произвольный SVG из непроверенного источника в инлайн-разметку без проверки. В этой мастерской текст экранируется и не интерпретируется как разметка; полноценного редактора загружаемых SVG здесь нет.

Проверить текст и выравнивание ↑

Когда справочник полезен и чего от него не ждать

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

Пройдите короткую практику: увеличьте круг через viewBox, получите S-образную кривую, поменяйте порядок transform, сравните две маски и скачайте стрелку. После этого возвращайтесь к оригинальному SSSVG уже с конкретными вопросами, а не с ощущением, что SVG состоит из случайных чисел.

Если хочется продолжить эксперименты с интерфейсами, на сайте есть мастерская Storybook, примеры Animista и сжатие изображений в браузере. Можно переходить к ним после того, как проверили нужные SVG-приёмы на этой странице.