SVG-просмотрщик
Онлайн SVG-редактор с предпросмотром
Что такое SVG-просмотрщик?
SVG-просмотрщик — это онлайн-инструмент для редактирования SVG-кода и предпросмотра в реальном времени. Он позволяет вводить или вставлять SVG-код напрямую и мгновенно видеть результат рендеринга. SVG (Scalable Vector Graphics) — это векторный графический формат на основе XML, широко используемый в веб-дизайне, создании иконок и визуализации данных.
Этот инструмент поддерживает предпросмотр в реальном времени, просмотр исходного кода, скачивание SVG-файлов и многое другое.
SVG одновременно изображение и код: он может содержать paths, text, filters, animation, external references и styles. Viewer помогает быстро проверить форму, viewBox, масштабирование и markup, но SVG из неизвестных источников нужно обрабатывать осторожно. Перед вставкой на сайт стоит проверить размеры, accessibility labels, sanitization и наличие scripts, links или внешних ресурсов.Как использовать
Как использовать
- Введите или вставьте SVG-код в левый редактор
- Правая панель отображает рендеринг SVG в реальном времени
- Нажмите кнопку «Источник», чтобы увидеть отформатированный код SVG
- Нажмите кнопку «Скачать», чтобы сохранить SVG в файл
- Нажмите кнопку «Копировать SVG», чтобы скопировать код в буфер обмена
Безопасность SVG
- По возможности вставляйте SVG только из проверенных источников: файл может содержать скрипты, внешние ссылки или неожиданные стили.
- Перед сохранением или встраиванием проверьте viewBox, размеры, заливки, обводки и отображение текста при целевом размере.
Применение
Технический принцип
SVG-исходник разбирается с помощью new DOMParser().parseFromString(source, 'image/svg+xml'), который возвращает Document, построенный по правилам XML, а не по мягкому HTML-парсеру. Парсер проверяет корректность формата, выводит узел <parsererror> при недопустимой разметке и предоставляет SVG-дерево скриптам и CSS точно так же, как остальную часть DOM. Такие элементы, как <path>, <circle>, <rect>, <g>, <text>, <defs>, <linearGradient> и <filter>, являются узлами первого класса с собственными атрибутами и целевыми объектами событий. Система координат управляется атрибутом viewBox. viewBox="minX minY width height" определяет внутреннее координатное пространство, а preserveAspectRatio (по умолчанию xMidYMid meet) решает, как это пространство отображается в область рендеринга: meet сохраняет весь viewBox с добавлением полей, slice заполняет область с обрезкой, а none растягивает неравномерно. Команды путей внутри d используют M (moveTo), L (lineTo), C (кубическая кривая Безье), Q (квадратичная), A (эллиптическая дуга) и Z (замыкание пути); каждая команда имеет абсолютную форму в верхнем регистре и относительную — в нижнем. Безопасность SVG требует явной обработки, поскольку формат является исполняемым: <script>, foreignObject с HTML-содержимым, xlink:href на внешние URL, onload и другие обработчики событий могут выполнять JavaScript в контексте страницы, если SVG вставлен инлайн. DOMPurify с профилем SVG или серверный санитайзер — стандартное средство защиты при принятии сторонних SVG. Растеризация в PNG выполняется путём отрисовки SVG (загруженного как HTMLImageElement из Blob URL) на холсте с помощью drawImage, после чего вызывается canvas.toBlob('image/png') для скачивания.
- Парсер: new DOMParser().parseFromString(source, 'image/svg+xml') возвращает строгий XML-документ с узлом <parsererror> при ошибке
- viewBox: "minX minY width height" задаёт внутреннее координатное пространство; preserveAspectRatio xMidYMid meet/slice управляет подгонкой и обрезкой
- Команды путей: M moveTo, L lineTo, C кубическая кривая Безье, Q квадратичная, A дуга, Z замыкание; верхний регистр = абсолютные, нижний = относительные
- Поверхность атаки: инлайн <script>, foreignObject, xlink:href на внешние URL и обработчики onload/onclick выполняются как JavaScript
- Санитизация: DOMPurify с USE_PROFILES: { svg: true } удаляет скрипты и обработчики событий перед вставкой стороннего SVG
- Экспорт в PNG: загрузка SVG в HTMLImageElement через Blob URL, drawImage на холст, canvas.toBlob('image/png') для скачивания
- Минимальные требования браузера: SVG 1.1 во всех современных браузерах с 2011 года; функции SVG 2 (улучшения текста на пути) реализованы частично
Примеры
Круг
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="#2563eb" />
</svg>Прямоугольник
<svg width="120" height="80" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="60" rx="8" fill="#10b981" />
</svg>Звезда
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,5 61,35 95,35 68,57 79,91 50,70 21,91 32,57 5,35 39,35" fill="#f59e0b" />
</svg>Часто задаваемые вопросы
Что делает этот просмотрщик?
Отрисовывает вставленную SVG-разметку, позволяет масштабировать и панорамировать, показывает исходный код с подсветкой синтаксиса, сообщает размеры изображения и viewBox. Удобно для разбора чужих SVG, отладки путей и предпросмотра иконок перед добавлением их в проект.
Загружается ли SVG на сервер?
Нет. Страница парсит и отрисовывает SVG локально в браузере — SVG это просто разметка, и браузер уже умеет её отображать. Вставленный код не покидает вашу машину.
Почему мой SVG выглядит здесь не так, как в дизайнерских программах?
SVG отрисовывается в зависимости от user agent. Браузеры, Figma, Illustrator и Inkscape по-разному интерпретируют некоторые крайние случаи (рендеринг текста, фильтры, mesh-градиенты, clip-path). Просмотрщик показывает то, что делает браузер, — то есть именно то, что увидят ваши пользователи в HTML.
Можно ли редактировать SVG прямо здесь?
Можно править исходник слева и заново отрисовывать. Для визуального редактирования (перетаскивание точек, изменение путей) используйте полноценный SVG-редактор: Inkscape, Figma или Boxy SVG. Эта страница — просмотрщик с возможностью быстрых текстовых правок.
Как добавить этот SVG в проект?
Скопируйте исходник. Большинство фронтенд-фреймворков принимают inline SVG напрямую в JSX/HTML. Для использования в качестве фона положите файл в папку с ассетами и подключите через url(...). Для использования как иконочного шрифта пропустите через сборочный шаг — svgo плюс генератор спрайтов.
Почему мой SVG такой большой?
Многие экспортированные SVG содержат метаданные редактора (XMP от Adobe Illustrator, namespace :inkscape: у Inkscape), неиспользуемые defs, комментарии и многословные данные путей. Прогоните через SVGO (онлайн или CLI) — обычно файл уменьшается на 30–70% без визуальных изменений.
Загружаются ли внешние ресурсы?
Большинство просмотрщиков в целях безопасности блокируют внешние загрузки (нет подгрузки внешних URL в <image href> или <use href>). Встраивайте растровые изображения как data:-URI и преобразуйте <use> с внешним href во внутренние копии, если ваш SVG от них зависит.