Просмотрщик SVG

SVG-ввод
0 символов
Локальный предпросмотр, не вставляйте скрипты из ненадёжных источников

Онлайн просмотрщик SVG. Вставьте код SVG, чтобы мгновенно отрендерить и посмотреть векторное изображение в реальном времени. Поддерживает копирование и скачивание .svg файлов. Локальная обработка — безопасно.

Похожие

Конвертация изображений

Сжатие изображений

Изменение размера изображения

Обрезка изображений

Редактор изображений

Генератор ICO

Что такое SVG?

SVG (Scalable Vector Graphics, масштабируемая векторная графика) — это формат изображений, описывающий геометрические фигуры на XML. В отличие от JPG и PNG, которые являются растровыми (матрица пикселей), SVG использует теги <rect>, <circle>, <path> и другие для описания математических путей фигур, поэтому изображение не размывается при масштабировании любого размера.

**Для каких сценариев подходит SVG?** Логотипы, UI-иконки, блок-схемы, маркеры карт, диаграммы, анимационные декорации, переиспользуемые иллюстрации — в этих сценариях высоки требования к чёткости, возможности изменения цвета, масштабируемости и управления через CSS, поэтому SVG — естественный выбор.

**Отличие от Canvas:** Canvas — это императивный API для рисования, после отрисовки всё становится пикселями; SVG — это декларативные DOM-узлы, атрибуты и CSS-стили которых можно изменять в любой момент, а также привязывать события. Поэтому для иконок, UI и интерактивных сценариев используйте SVG, а для игр, частиц и пиксель-арта — Canvas.

**Типичная структура:** &lt;svg&gt; корневой узел, &lt;g&gt; группировка, &lt;path&gt; путь (чаще всего используется, содержит атрибут d), градиенты (&lt;linearGradient&gt;/&lt;radialGradient&gt;), фильтры (&lt;filter&gt;), анимация (SMIL/CSS/JS).

**Как посмотреть?** С помощью этого инструмента вставьте исходный код SVG в редактор — справа отрендерится в реальном времени. Благодаря перетаскиваемому разделителю за несколько секунд можно проверить корректность кода SVG и соответствие отображения ожиданиям.

Варианты использования

  • Фронтенд-разработчикам нужно быстро посмотреть результат рендеринга кода SVG-иконок
  • Проверка отображения SVG после копирования из Figma, Sketch и других дизайнерских инструментов
  • Просмотр изменений в реальном времени при отладке путей, цветов или атрибута viewBox SVG
  • Проверка и валидация SVG-кода перед интеграцией в код проекта

Как использовать

  1. Вставьте исходный код SVG в левый редактор или нажмите «Загрузить пример» для демонстрации
  2. Справа мгновенно отобразится результат рендеринга векторного изображения, при редактировании кода предпросмотр обновляется в реальном времени
  3. После проверки нажмите кнопку копирования, чтобы скопировать код, или скачайте как .svg файл с пользовательским именем

Функции

  • Предпросмотр в реальном времени: вставляйте или редактируйте SVG-код — векторное изображение рендерится мгновенно, WYSIWYG
  • Разделённый интерфейс: на десктопе перетаскиванием регулируется ширина панелей, на мобильных — переключение между вводом и предпросмотром через вкладки
  • Экспорт в один клик: копирование исходного кода SVG в буфер обмена или скачивание как стандартный .svg файл с пользовательским именем
  • Локальная обработка: весь парсинг и рендеринг SVG выполняется в браузере, код не загружается на сервер — безопаснее
  • Прозрачный фон: шахматный фон позволяет чётко видеть прозрачные области и детали краёв SVG
  • Подсчёт символов: реальное время отображает количество символов в коде, встроенные примеры для быстрого старта

Часто задаваемые вопросы

Как посмотреть эффект SVG-кода онлайн?

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

Как скачать и сохранить просмотренный SVG?

Нажмите кнопку скачивания в правом верхнем углу области предпросмотра, укажите имя файла и сохраните как стандартный .svg файл. Также можно нажать кнопку копирования, чтобы скопировать исходный код SVG в буфер обмена и вставить в код проекта.

Отправляется ли SVG-код на сервер? Это безопасно?

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

Поддерживается ли SVG-код, скопированный из дизайнерских программ?

Да. SVG-код, скопированный из Figma, Sketch, Adobe Illustrator и других дизайнерских программ, можно вставлять напрямую для предпросмотра. Рекомендуется сначала проверить результат рендеринга, а затем интегрировать в проект.

Почему предпросмотр SVG не отображается? Распространённые причины?

Распространённые причины: ① отсутствие объявления пространства имён xmlns="http://www.w3.org/2000/svg"; ② незакрытые теги в коде; ③ неправильное экранирование специальных символов; ④ синтаксические ошибки в самом SVG. Проверьте эти пункты.

Можно ли задать собственное имя для скачиваемого SVG?

Да. После нажатия кнопки скачивания появится поле для ввода имени файла. Укажите желаемое имя (по умолчанию image.svg), нажмите Enter или подтвердите — файл скачается. Инструмент автоматически добавит расширение .svg.

Глоссарий

viewBox
Внутренняя система координат SVG, указывается в формате «x y width height». Распространённое «0 0 24 24» означает ширину и высоту в 24 единицы. Фактический отображаемый размер SVG контролируется атрибутами width/height или внешним CSS.
Пространство имён XML (namespace)
Чтобы браузер правильно распознал SVG как SVG-документ, необходимо объявить xmlns="http://www.w3.org/2000/svg". Отсутствие namespace — самая частая причина, по которой SVG не отображается в HTML.MDN — Пространство имён SVG
Атрибут d пути path
Набор команд пути, состоящих из букв M/L/C/Q/H/V/Z и координат. M=переместиться, L=провести линию, C=кубическая кривая Безье, Q=квадратичная кривая Безье, Z=замкнуть путь. Сложные иконки часто выражаются всего одним элементом path с атрибутом d.
currentColor
CSS-ключевое слово, ссылающееся на свойство color текущего элемента. Если в SVG установить fill или stroke как currentColor, изменение color во внешнем CSS изменит цвет иконки — это распространённый приём в дизайн-системах.

Справочник часто используемых элементов SVG

ЭлементТипНазначение
<svg>Корневой узелКонтейнер для всех SVG, обязательный
<rect>Базовая фигураПрямоугольник, прямоугольник со скруглёнными углами
<circle> / <ellipse>Базовая фигураОкружность / Эллипс
<line> / <polyline>Базовая фигураПрямая линия / Ломаная линия
<polygon> / <path>ПутьМногоугольник / Произвольная кривая (атрибут d)
<text> / <tspan>ТекстВстроенный текст SVG
<g>ГруппировкаГруппировка узлов для применения единых преобразований
<defs> / <symbol>ОпределенияПереиспользуемые фигуры и градиенты
<linearGradient> / <radialGradient>ГрадиентЛинейная / Радиальная градиентная заливка
<use>Повторное использованиеСсылка на элемент из defs
<filter>ФильтрРазмытие, тени и другие продвинутые эффекты

Сравнение SVG и растровых форматов

ПараметрSVG (вектор)PNG (растр)JPG (растр)
Способ представленияXML описывает геометрические путиМатрица пикселейМатрица пикселей (DCT-сжатие)
Эффект при увеличенииНе размывается при любом масштабеРазмывается при увеличенииРазмывается, заметны артефакты сжатия
Размер файлаЗависит от сложности путей, логотипы обычно < 10КБСредний (без потерь)Небольшой (с потерями)
Прозрачный фон✅✅❌
Поддержка анимации✅ SMIL / CSS / JS❌ (нужен APNG)❌
Изменение цвета через CSS✅ currentColor / переменные fill❌❌
Подходящие сценарииИконки, логотипы, UI-векторыМатериалы с прозрачным фоном, скриншотыФотографии, большие градиенты

Authoritative References