Экспорт CAD-чертежа в SVG (.svg)
W3C СтандартScalable Vector Graphics (SVG): это формат векторных изображений на основе XML для двумерной графики с поддержкой интерактивности, стилей CSS и анимации.
Конвертировать из SVG в PNG
Бесплатный конвертер из SVG в PNG прямо в браузере. Конвертируйте файлы мгновенно на Вашем устройстве.
Сжатие SVG онлайн
Конфиденциально - файлы никогда не покидают ваше устройство
Анализ и метаданные
Операционные системы и анализаторы файлов идентифицируют файлы SVG по начальной двоичной последовательности байтов:
Сигнатура заголовка на уровне байтов (Magic Bytes)
Операционные системы и анализаторы файлов идентифицируют файлы SVG по начальной двоичной последовательности байтов:
HEX-СИГНАТУРА (СМЕЩЕНИЕ 0):
3C 73 76 67ПРЕДСТАВЛЕНИЕ ASCII: <svg
Стандартизация: W3C Recommendation (SVG 1.1 / SVG 2)
Технические спецификации
| Архитектура контейнера | Текстовый документ разметки на основе XML, задающий геометрию двумерных векторных изображений |
| Сжатие | Текстовое сжатие Gzip / Brotli (SVGZ использует сжатие gzip) |
| Порядок байтов (Endianness) | Не применимо (текстовый поток символов UTF-8 / UTF-16) |
| Цветовые пространства | sRGB, CSS Color Module 4 (Display P3, lab, lch) |
| Каналы и структура | Векторные фигуры неограниченного разрешения, кривые Безье, типографика и маски прозрачности |
| Максимальные размеры | Независимость от разрешения (бесконечно масштабируется под любую область просмотра без пикселизации) |
| Прозрачность | Альфа-прозрачность с переменной непрозрачностью и режимы наложения CSS |
| Потоковая передача и прогрессивная загрузка | XML-парсер браузера поддерживает поэтапный разбор текстового потока. |
Техническая матрица сравнения: SVG с конкурентами
| Технический атрибут | SVG (Текущий) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Модель рендеринга | Векторный DOM с сохранением состояния | Растровый холст с немедленной отрисовкой | Фиксированный контейнер страниц с сохранением состояния | Растровая сетка пикселей |
| Стили и CSS | Полная поддержка стилей через классы и переменные CSS | Требует перерисовки через API canvas JavaScript | Отсутствие динамических стилей CSS | Фиксированные пиксели растра |
| Бесконечная масштабируемость | Да (математические векторные кривые) | Требует ручного масштабирования разрешения | Да (векторные элементы) | Нет (пикселизируется при увеличении) |
| Интерактивность | Нативные события DOM (наведение, щелчок, анимация) | Требуются математические вычисления для ручного определения попадания указателя. | Статический документ | Требует карты изображения или холста |
Распространенные сценарии повреждения и руководство по восстановлению в HEX
Браузер отображает ошибку синтаксического анализа XML: незакрытый токен или несовпадающий тег.
Первопричина: Неправильный синтаксис XML, пропущенные закрывающие теги или неэкранированные амперсанды ('&' вместо '&').
Восстановление: Проверьте с помощью XML-линтера (xmllint file.svg) и исправьте несбалансированные теги.
Анализ безопасности и векторы атак на парсер
Поскольку SVG представляет собой исполняемый XML, поддерживающий теги '<script>' и внешние сущности, он представляет серьезные риски XSS и SSRF при отображении ненадежных файлов SVG.
Известные векторы атак
- Хранимый межсайтовый скриптинг (XSS) через внедренные теги '<script>' или обработчики событий 'onload='.
- Атаки с использованием внешних сущностей XML (XXE), считывающие локальные файлы сервера при парсинге на серверной стороне.
- Расширение сущностей XML «Миллиард смехов» (Billion Laughs), вызывающее отказ в обслуживании.
Лучшие практики защиты: Всегда очищайте SVG с помощью DOMPurify перед встраиванием или отдавайте SVG с заголовком «Content-Security-Policy: default-src 'none'» либо как тег «<img>», который автоматически отключает скрипты.
История происхождения и ключевые этапы
Ключевые преимущества и плюсы
- Бесконечная независимость от разрешения: четкие линии и типографика при любом масштабе отображения или печати.
- Чрезвычайно малый размер файлов для логотипов, иконок и элементов пользовательского интерфейса.
- Полная поддержка скриптов и стилей с помощью CSS и JavaScript внутри DOM браузера.
Технические ограничения и минусы
- Не подходит для фотографий или сложных изображений с непрерывным тоном.
- Сложные векторные контуры с тысячами узлов могут замедлять отрисовку на процессоре и увеличивать расход заряда батареи.
- Поскольку SVG основан на XML, он может содержать скрипты; перед отображением недоверенных файлов необходима тщательная очистка.
Интересные технические факты
- Поскольку SVG представляет собой обычный XML-текст, его сжатие с помощью Gzip (с получением файла .svgz) часто уменьшает размер на 70: 80%.
- Атрибут viewBox задает абстрактную систему координат, которая динамически сопоставляется с физическими пикселями экрана.
- В первых версиях веб-браузеров не было встроенной поддержки SVG, поэтому Adobe распространяла плагин Adobe SVG Viewer до появления встроенной поддержки в браузерах примерно в 2011 году.
Часто задаваемые технические вопросы
Могут ли файлы SVG содержать вредоносный код?
Да. Поскольку SVG: это валидный XML, он может содержать встроенный JavaScript ('<script>'), который выполняется, если SVG загружается напрямую в браузере или открывается в инлайн-элементе '<svg>'. Передача SVG через тег '<img>' автоматически нейтрализует выполнение скриптов.
Когда следует использовать SVG вместо PNG?
Используйте SVG для иконок, логотипов, графиков, иллюстраций и типографики, для которых важны четкое масштабирование на экранах любого размера и малый размер файлов. Используйте PNG или WebP для фотографий.
Как можно оптимизировать большие или сложные файлы SVG?
Вы можете очистить векторные пути, удалив избыточные метаданные, комментарии редактора (из Inkscape или Illustrator), невидимые группы и неиспользуемые объявления пространств имен с помощью таких инструментов, как SVGO, или выполнив сжатие SVG.
Связанные конвертации для SVG
Конвертация векторных файлов SVG в растровые изображения PNG преобразует масштабируемую графику на основе кода в сетку с фиксированными пикселями для универсальной совместимости с приложениями.
Инкапсуляция растровых изображений PNG в векторный контейнер SVG XML для адаптивного масштабирования в Интернете и интеграции в векторные макеты.
Преобразуйте устаревшие 16-битные записи команд векторной графики Windows GDI в современные масштабируемые контуры SVG без потери разрешения.
Конвертируйте 32-битную графику Windows Enhanced Metafile в чистые, адаптивные векторы SVG для веб-сайтов и дизайнерского ПО.
Конвертация чертежа DXF в формат SVG преобразует сложные инженерные векторные данные в легковесную XML-графику для интернет-браузеров и векторных редакторов.
Конвертация масштабируемой векторной графики в формат обмена чертежами преобразует готовые для интернета визуальные векторы в точные математические координаты, необходимые программному обеспечению для автоматизированного проектирования.
Поделитесь логотипом или иллюстрацией SVG в виде одностраничного PDF-файла. Его масштабируемые контуры превращаются в изображение с фиксированным разрешением, поэтому масштабирование не восстановит векторную детализацию.