Softonic

Сжать SVG

Шаг 1 / 2
Далее

SVG, экспортированный из Figma, Illustrator или Sketch, обычно содержит в 2–5 раз больше разметки, чем нужно: пространства имён редактора, комментарии, пустые группы, избыточные преобразования и координаты с шестью знаками после запятой. Этот инструмент прогоняет ваш SVG через обработку в стиле SVGO, убирая лишнее и сохраняя при этом результат пиксель в пиксель.

Как сжать SVG

  1. 1

    Вставьте или загрузите свой SVG

    Принимает необработанный текст XML или файл .svg.

  2. 2

    Выберите уровень оптимизации

    Безопасный (удалить комментарии и метаданные редактора), агрессивный (свернуть группы, округлить координаты, объединить пути) или настраиваемый.

  3. 3

    Просмотрите разницу

    Сравните количество байтов до и после и просмотрите результат визуализации, чтобы убедиться, что ничего не изменилось визуально.

  4. 4

    Скопируйте или скачайте

    Вставьте оптимизированный SVG прямо в свой код или сохраните как файл.

Что раздувает SVG

Откройте SVG, экспортированный из Figma, в текстовом редакторе, и вы обычно увидите:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."
     xmlns:sketch="..." width="24.000000" height="24.000000"
     viewBox="0 0 24.000000 24.000000" ...>
  <!-- Generator: Figma ... -->
  <title>icon</title>
  <desc>Created with Figma</desc>
  <g id="Page-1" stroke="none" fill="none" fill-rule="evenodd">
    <g id="icon" transform="translate(0.000000, 0.000000)">
      <path d="M12.000000,2.000000 L..." fill="#000000"/>
    </g>
  </g>
</svg>

Почти каждую строку можно удалить. Для отображения нужны только svg, viewBox и path.

Что удаляет оптимизатор

Что удаляется Почему это безопасно
XML-комментарии Никогда не отображаются
Пространства имён редактора (sketch, figma) Не используются браузерами
<title> / <desc> (по желанию) Текст для доступности, сохраните, если он несёт смысл
Пустые группы <g> Не дают визуального эффекта
Значения атрибутов по умолчанию Браузеры в любом случае используют значения по умолчанию
Тождественные преобразования translate(0,0) ничего не делает
Десятичные знаки в координатах 3 знака после запятой на экране выглядят одинаково
Неиспользуемые идентификаторы Сохраняйте только те ID, на которые есть ссылки в других местах

Подводные камни

  • Не удаляйте идентификаторы, на которые ссылаются CSS или url(#...) в заливках, масках и фильтрах. Агрессивный режим может сломать градиенты.
  • Сохраняйте viewBox. Без него SVG не будет адаптивно масштабироваться.
  • Сохраняйте <title>, если вы используете его для доступности (программы чтения с экрана его озвучивают).
  • Избегайте сворачивания экземпляров <use>. Оптимизатор может встроить их и потерять исходный, эталонный шаблон.

Когда сжатие действительно экономит байты

SVG, это текст, а значит, gzip на сервере уже убирает значительную часть избыточности. SVG, который в несжатом виде уменьшается с 4 КБ до 1 КБ, при передаче по сети может сократиться лишь с 1,2 КБ до 0,7 КБ. И всё же это того стоит, к тому же более компактный исходник легче читать.

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

В безопасном режиме, нет. Агрессивный режим может удалить идентификаторы, на которые ссылаются анимации CSS или SMIL. Если в вашем SVG есть анимация, используйте безопасный режим или вручную внесите нужные ID в белый список.

Экспорт Figma/Illustrator обычно сокращается на 50-80%. Рукописный SVG уже компактен и обычно теряет только 10-20%.

По умолчанию да, атрибуты <title>, <desc> и aria-* сохраняются. Вы можете удалить их, если SVG является чисто декоративным, а окружающий HTML предоставляет метку.

Да. Атрибут xmlns сохраняется, поскольку он необходим при вставке SVG непосредственно в HTML. Встроенный SVG обычно является самым быстрым способом доставки небольших иконок.

Сопутствующие инструменты

Палитра цветов Material Design

Просмотрите палитру цветов Material Design. Копируйте любой оттенок (от 50 до A700) в форматах HEX, RGB или HSL одним нажатием.

Изменение размера изображений

Меняйте размер изображений до точных пиксельных размеров или процентов, сохраняя пропорции. Подходит для пакетной подготовки, без загрузки файлов.

WebP в JPG

Конвертируйте изображения WebP в JPG/JPEG прямо в браузере. Выберите качество, объедините прозрачность с цветом фона и скачайте без загрузки файлов на сервер.

Генератор надписей граффити

Создавайте надписи в стилях тег, баббл, блок, трафарет, неон и вайлд. Настраивайте цвета и экспортируйте PNG или SVG прямо в браузере.

Конструктор тир-листов

Создайте приватный тир-лист из текста и локальных изображений. Настройте уровни, распределите элементы мышью или клавиатурой и экспортируйте в JSON, PNG или SVG.

Генератор штрихкодов

Создавайте Code 128, EAN-13, UPC, ITF-14 и еще семь линейных штрихкодов. Данные остаются в браузере, результат можно скачать в SVG или PNG.