Просмотрщик SVG-кода онлайн — инспекция и превью SVG-разметки

Что такое SVG?

SVG (Scalable Vector Graphics) — это формат изображений на основе XML, который описывает фигуры математически, а не хранит данные пикселей. В отличие от JPEG или PNG, SVG-графика остаётся идеально чёткой при любом масштабе — от крошечного favicon до огромного баннера. Именно поэтому SVG стал стандартом для иконок, логотипов, иллюстраций и UI-графики в вебе.

Как выглядит SVG-код?

SVG — это просто XML. Пример простого красного круга:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Реальные SVG-файлы из Figma, Illustrator или Sketch обычно содержат десятки элементов <path> с длинными строками координат и часто сжаты в одну нечитаемую строку. Именно здесь онлайн-просмотрщик SVG становится незаменимым.

Зачем нужен просмотрщик SVG-кода?

• Мгновенный визуальный просмотр: Вставьте SVG-код и сразу увидите векторное изображение.
• Отладка сломанного SVG: Код и превью рядом помогают быстро найти проблему.
• Форматирование минифицированного SVG: Превращает однострочный код в читаемую, правильно отступленную разметку.
• Копирование чистого кода: Получите отформатированный код, готовый к встраиванию в HTML.
• Изучение синтаксиса SVG: Вставьте любую иконку и изучайте, как построены фигуры.

Основные элементы SVG

• <svg> — корневой элемент с атрибутом viewBox
• <path d="..."> — произвольные фигуры через команды координат
• <circle cx cy r> — окружность по центру и радиусу
• <rect x y width height> — прямоугольник
• <g> — группировка элементов для общих стилей

Встраивание SVG в HTML

Лучший способ для иконок — встроенный SVG (inline). Он стилизуется через CSS и не требует дополнительных HTTP-запросов:

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M..." fill="currentColor"/>
</svg>

Используйте fill="currentColor" вместо жёстко прописанных цветов — это позволяет иконке наследовать CSS-свойство color и автоматически адаптироваться к тёмной теме и состояниям наведения.