ToolBox ProБлогEnglish

Просмотр SVG

Просматривайте SVG-код как изображение с зумом и предпросмотром в реальном времени. Вставьте код или перетащите файл. Бесплатный онлайн-просмотрщик SVG.

Всё работает в вашем браузере — данные не отправляются на сервер.

Зачем использовать просмотрщик и оптимизатор SVG?

SVG файлы часто содержат ненужные метаданные, комментарии и пробелы, которые увеличивают размер файла. Наш просмотрщик SVG позволяет визуально просматривать код SVG, оптимизировать его путём удаления ненужных атрибутов и минификации, а также конвертировать в data URI для прямого встраивания в CSS — всё в одном инструменте.

Ключевые возможности

  • Живой предпросмотр SVG с отрендеренным выводом
  • Оптимизация SVG: удаление комментариев, метаданных, лишних пробелов
  • Конвертация SVG в data URI для CSS background-image
  • Копирование оптимизированного SVG кода или data URI
  • Отображение размеров SVG, сравнение оригинального и оптимизированного размера, экономия

Как это работает

  1. Вставьте код SVG или загрузите SVG файл
  2. Увидьте предпросмотр и информацию SVG (размеры, размер файла)
  3. Просмотрите оптимизированный SVG и вывод data URI
  4. Скопируйте оптимизированный SVG или data URI для использования в проектах

Технические детали

Этот инструмент использует DOMParser для парсинга и валидации кода SVG. Оптимизация выполняется на стороне клиента с использованием регулярных выражений для удаления ненужного контента. Конвертация data URI кодирует SVG с использованием URL-безопасного процентного кодирования для максимальной совместимости с CSS и HTML.

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

Что делает оптимизация SVG?

Оптимизация SVG удаляет ненужный контент, такой как XML комментарии, объявления, доктайпы, метаданные редактора, избыточные пробелы и пустые атрибуты. Это уменьшает размер файла без изменения визуального вывода.

Что такое data URI и зачем его использовать?

Data URI кодирует SVG как URL-безопасную строку, которую можно встроить напрямую в CSS с помощью background-image или в HTML теги img. Это устраняет дополнительные HTTP запросы для маленьких иконок и графики.

Похожие инструменты

Выбор цвета и конвертер

Выбирайте цвета и конвертируйте между форматами HEX, RGB, HSL и HSV

Конвертер HEX в RGB

Конвертируйте HEX-коды цветов в значения RGB и RGBA

Конвертер RGB в HEX

Конвертируйте значения RGB в HEX-коды

Генератор цветовых палитр

Создавайте цветовые палитры из базового цвета — комплементарные, аналоговые, триадные и другие

Проверка контрастности WCAG

Проверяйте коэффициенты контрастности цветов на соответствие WCAG AA и AAA

Генератор хеш-цвета

Генерируйте согласованные, детерминированные цвета из любой текстовой строки

← На главную