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 змінює суцільні заливки й обведення та успадковує колір, коли SVG вбудовано в сторінку; попередній перегляд як зображення використовує власний колірний контекст.