Оптимизируйте SVG в своем конвейере CI с помощью REST API (установка SVGO не требуется)

SVG-иконки, экспортированные из Figma, в 3-5 раз больше, чем нужно. Встраивание инструментов дизайна метаданные, пусто <defs> блоки, атрибуты, специфичные для редактора, и подробные данные пути, которые браузеры никогда не используют. Значок размером 24 пикселя, размер которого должен составлять 800 байт, поставляется в комплекте. в 3200 байт. Умножьте это на 50 иконок в дизайн-системе, и вы отправите 120 КБ. ненужных данных SVG при каждой загрузке страницы.

Стандартное решение — SVGO, инструмент Node.js, который устраняет это раздувание. Но SVGO приносит Более 30 зависимостей npm для вашего проекта или среды CI. Если ваш интерфейс построен с Go, Rust, Python или простым HTML, установка Node.js и npm исключительно для минимизации SVG. это перебор.

API-интерфейс оптимизатора SVG botoi выполняет ту же работу с помощью одного HTTP-запроса. Никаких установок, никаких зависимостей, никаких конфликтов версий. Отправьте необработанный SVG и получите оптимизированную версию. с размерными метриками.

Одна команда завитка для оптимизации SVG

Отправьте строку SVG в /v1/svg/optimize конечная точка:

curl -s -X POST https://api.botoi.com/v1/svg/optimize \\
  -H "Content-Type: application/json" \\
  -d '{
    "svg": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><!-- Figma metadata --><defs></defs><g id=\\"Layer_1\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\\" fill=\\"#1a73e8\\"/></g></svg>"
  }'

API возвращает оптимизированный SVG вместе с данными о размере до/после:

{
  "success": true,
  "data": {
    "optimized": "<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z\\" fill=\\"#1a73e8\\"/></svg>",
    "original_size": 12450,
    "optimized_size": 5180,
    "savings_percent": 58.4
  }
}

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

Рабочий процесс GitHub Actions для автоматической оптимизации

Этот рабочий процесс выполняется при каждом запросе на внесение изменений, изменяющем файлы SVG. Он находит измененным SVG, оптимизирует каждый из них через API и передает результаты обратно в PR. филиал. Рецензенты видят оптимизированные SVG без каких-либо действий вручную.

Создавать .github/workflows/optimize-svgs.yml в вашем репозитории:

name: Optimize SVGs

on:
  pull_request:
    paths:
      - '**/*.svg'

jobs:
  optimize-svgs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Find changed SVG files
        id: changed
        run: |
          FILES=\$(git diff --name-only --diff-filter=ACM origin/\${{ github.base_ref }} HEAD -- '*.svg')
          echo "files=\$FILES" >> \$GITHUB_OUTPUT
          echo "Found SVGs: \$FILES"

      - name: Optimize SVGs
        if: steps.changed.outputs.files != ''
        run: |
          TOTAL_SAVED=0
          for FILE in \${{ steps.changed.outputs.files }}; do
            SVG_CONTENT=\$(cat "\$FILE")
            PAYLOAD=\$(jq -n --arg svg "\$SVG_CONTENT" '{"svg": \$svg}')

            RESPONSE=\$(curl -s -X POST https://api.botoi.com/v1/svg/optimize \\
              -H "Content-Type: application/json" \\
              -H "Authorization: Bearer \${{ secrets.BOTOI_API_KEY }}" \\
              -d "\$PAYLOAD")

            SUCCESS=\$(echo "\$RESPONSE" | jq -r '.success')
            if [ "\$SUCCESS" = "true" ]; then
              echo "\$RESPONSE" | jq -r '.data.optimized' > "\$FILE"
              SAVINGS=\$(echo "\$RESPONSE" | jq -r '.data.savings_percent')
              ORIGINAL=\$(echo "\$RESPONSE" | jq -r '.data.original_size')
              OPTIMIZED=\$(echo "\$RESPONSE" | jq -r '.data.optimized_size')
              echo "Optimized \$FILE: \$ORIGINAL -> \$OPTIMIZED bytes (\$SAVINGS% saved)"
              TOTAL_SAVED=\$((TOTAL_SAVED + ORIGINAL - OPTIMIZED))
            else
              echo "::warning::Failed to optimize \$FILE"
            fi
          done
          echo "Total bytes saved: \$TOTAL_SAVED"

      - name: Commit optimized SVGs
        run: |
          git config user.name "github-actions[bot]"
          git config user.email "github-actions[bot]@users.noreply.github.com"
          git add '*.svg'
          git diff --cached --quiet || git commit -m "chore: optimize SVG assets"
          git push

Рабочий процесс обрабатывает только те SVG, которые были изменены в текущем PR, сохраняя вызовы API. до минимума. --diff-filter=ACM флаговые ловушки добавлены, скопированы и измененные файлы, пропуская удаления.

До и после: сравнение размеров в реальном мире

Вот результаты запуска API на SVG-файлах, экспортированных из Figma, для типичного примера. набор иконок и иллюстраций веб-приложения:

Средняя экономия по этим файлам: 59,4%. Наибольшую выгоду приносит иллюстрация SVG, содержащие встроенные метаданные и подробные определения путей. Простые иконки по-прежнему увидите сокращение на 55-65%, поскольку Figma экспортирует десятичную точность и атрибуты, которые браузеры игнорируют.

Скрипт пакетной оптимизации

Для локального использования или интеграции в другие системы CI (GitLab CI, CircleCI, Jenkins), этот сценарий оболочки оптимизирует каждый SVG в каталоге:

Запустите его в своем каталоге ресурсов:

chmod +x optimize-svgs.sh
./optimize-svgs.sh src/assets/icons

Установите BOTOI_API_KEY переменная среды для обхода анонимного ограничение скорости 5 запросов в минуту. Без ключа скрипт приостанавливается между просит не превышать лимит.

Альтернатива: перехватчик предварительной фиксации

Если вы предпочитаете оптимизировать SVG-файлы до того, как они попадут в ваш репозиторий, используйте Git. хук предварительной фиксации. Этот подход улавливает раздутые SVG на машине разработчика. вместо в CI:

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

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

API нацелен на данные, которые не оказывают визуального влияния на отображаемый SVG:

• Метаданные редактора: Figma, Illustrator и Sketch встраивают специальные инструменты атрибуты (data-name, sketch:type), которые браузеры пропускают.
• XML-комментарии: Инструменты дизайна добавляют комментарии, например <!-- Generator: Adobe Illustrator 28.0 --> которые не служат никакой цели в производстве.
• Пустые группы и определения: Экспортированные SVG-файлы содержат пустые <g> и <defs> элементы, оставшиеся от слоя структуры в инструменте проектирования.
• Избыточные атрибуты: Значения по умолчанию, такие как fill-opacity="1" и stroke-miterlimit="4" соответствуют настройкам браузера по умолчанию и могут быть удалены.
• Повышенная точность: Координаты пути с 8 десятичными знаками (12.34567890) округлить до 2 (12.35) без видимого разница в разрешении экрана.

Когда оптимизировать SVG в другом месте

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

• SVG со встроенными шрифтами: Если ваш SVG содержит <text> элементы с пользовательскими шрифтами, преобразуйте текст в контуры в инструменте дизайна, прежде чем оптимизация. API не создает подмножества и не встраивает шрифты.
• Анимированные SVG: SMIL-анимация и CSS-анимация внутри SVG сохранены, но проверьте выходные данные, чтобы убедиться, что атрибуты синхронизации остаются нетронутыми.
• SVG-файлы размером более 2 МБ: Обычно они содержат растровые изображения в кодировке Base64. Извлеките их как отдельные файлы PNG/JPEG и вместо этого укажите на них ссылку.