Back

Предпросмотр и инспектор SVG

Вставьте или перетащите SVG и увидите его сразу отрисованным, вместе с панелью статистики, охватывающей размеры, viewBox, разбивку по элементам, уникальные цвета и флаги безопасности. Предпросмотр выполняется в изолированном iframe с отключёнными скриптами и доступом same-origin, поэтому вредоносные SVG не могут выполнить код. Экспортируйте изображение как SVG или PNG, переключайте белый, чёрный или прозрачный фон в шахматку или переходите в режим просмотра кода, чтобы изучить разметку.

Спецификации

Типичные сценарии использования

  • Быстро оценить SVG-иконку или иллюстрацию перед встраиванием
  • Проверить ненадёжный SVG на наличие скриптов или обработчиков событий
  • Проверить viewBox и собственные размеры SVG
  • Подсчитать уникальные цвета в SVG (полезно для извлечения палитры или оптимизации)
  • Преобразовать SVG в PNG на цветном или прозрачном фоне
  • Изучить разбивку по элементам, чтобы заметить неожиданное использование <script> или <foreignObject>

Возможности

  • Изолированный предпросмотр — SVG отрисовывается в iframe с sandbox="", так что скрипты и обработчики событий не могут выполниться
  • Переключатель фона: белый, чёрный или прозрачный шахматный узор
  • Панель статистики: размеры, viewBox, соотношение сторон, размер в байтах, количество элементов, главные элементы, уникальные цвета
  • Флаги безопасности подсвечивают SVG, содержащие <script>, обработчики событий, внешние ссылки или анимации
  • Экспорт в SVG или PNG высокой чёткости (2×) — выбранный фон запекается в PNG-экспорт
  • Полноэкранный предпросмотр для изучения деталей
  • Просмотр исходника с подсветкой синтаксиса
  • Копирование нормализованного SVG в буфер обмена

Примеры

Простая иконка

Попробовать →

Иконка галочки в круге, нарисованная обводкой

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>

Градиентная заливка

Попробовать →

Прямоугольник, заполненный линейным градиентом

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#0ea5e9"/></linearGradient></defs><rect width="100" height="100" fill="url(#g)"/></svg>

SVG с анимацией

Попробовать →

Пульсирующий круг с SMIL-анимацией — загорается флаг Анимации

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100"><circle cx="50" cy="50" r="20" fill="#ef4444"><animate attributeName="r" from="20" to="40" dur="1s" repeatCount="indefinite"/></circle></svg>

Советы

  • Предпочитайте viewBox фиксированным width/height, чтобы изображение корректно масштабировалось
  • Если загораются значки Скрипты или Обработчики событий, SVG выполнит код при встраивании — удалите их, прежде чем ему доверять
  • Шахматный фон помогает заметить непреднамеренную прозрачность; переключитесь на белый или чёрный, чтобы увидеть вид на разных страницах
  • PNG-экспорт рендерится с разрешением 2×; используйте экспорт SVG, чтобы сохранить векторное качество
  • Внешние ссылки (http://-hrefs) не загружаются в изолированном предпросмотре — это намеренно
← Вернуться ко всем инструментам