SVG в HTML

Конвертация SVG в HTML онлайн

Выберите файл SVG или вставьте его разметку, чтобы получить встроенный SVG для HTML-страницы. Проверьте результат в предпросмотре, настройте параметры оптимизации и скопируйте код. Разбор, оптимизация и конвертация выполняются локально в вашем браузере: SVG не отправляется на сервер.

Подготовка адаптивного встроенного SVG

Сохраните viewBox, чтобы не потерять систему координат SVG. Если у SVG есть пригодный viewBox, удалите фиксированные ширину и высоту и задайте размер в своем CSS.

Размер SVG и экономия

Показатель «Исходный размер» — это размер SVG, который вы добавили. «Размер оптимизированного SVG» — его размер после обработки с выбранными параметрами: например, после удаления комментариев, округления координат и минификации кода. Размеры указаны в кБ, где 1 кБ равен 1 000 байт. «Экономия» — это уменьшение размера в процентах: при сокращении с 10 до 7 кБ экономия составит 30 %. Если результат больше, например из-за удобочитаемого форматирования, вместо нее показывается «Увеличение размера». Эти цифры сравнивают разметку SVG, а не размер экспорта в JSX, React, CSS Data URI или Base64.

Знаки после запятой и отступы

Параметр «Знаки после запятой» определяет, сколько цифр после запятой сохраняется в координатах и числовых атрибутах. При значении 2 число 12,34567 станет 12,35. Меньшее число знаков может уменьшить размер файла, но исказить мелкие детали; значение по умолчанию (3) — лишь отправная точка, поэтому проверьте предпросмотр. Отступы в 2 или 4 пробела либо табуляция делают код HTML и JSX удобнее для чтения, не меняя изображение. «Минифицировать SVG» убирает лишние пробелы форматирования, чтобы сделать результат компактнее, поэтому при включенной минификации отступы отключены.

HTML, JSX, React и Data URI для SVG

Результат в формате HTML — это встроенная разметка SVG; при скачивании сохраняется файл SVG. JSX адаптирует имена атрибутов и встроенные стили для React. «Компонент React» оборачивает этот код в функцию на TypeScript, которая принимает стандартные пропсы SVG. CSS Data URI создает объявление background-image, а Base64 — закодированный URI изображения SVG. Статистика размера относится к оптимизированному SVG, а не к более объемным закодированным форматам. Прежде чем вставлять несколько копий на одну страницу, проверьте атрибуты id.

Статичные SVG, локальная обработка

Предпросмотр — это изолированное изображение, а не исполняемая разметка страницы. Скрипты, встроенный HTML, анимация, внешние изображения и таблицы стилей удаляются. Поддерживаемые встроенные стили оформления и локальные ссылки на фрагменты сохраняются. Инструмент рассчитан на статичные изображения; неподдерживаемые возможности могут изменить их внешний вид. Значение currentColor меняет сплошные заливки и обводки и при встраивании в страницу наследует ее цвет; в предпросмотре изображение использует собственный цветовой контекст.