تحسين SVGs في مسار 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 مبالغة.

تقوم واجهة برمجة تطبيقات محسن botoi SVG بنفس العمل مع طلب 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)، وتعيد النتائج إلى العلاقات العامة فرع. يرى المراجعون صور 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 التي تم تغييرها في العلاقات العامة الحالية، مع الاحتفاظ باستدعاءات واجهة برمجة التطبيقات (API). إلى الحد الأدنى. ال --diff-filter=ACM تمت إضافة مصيد العلم ونسخه و الملفات المعدلة أثناء تخطي عمليات الحذف.

قبل وبعد: مقارنة حجم العالم الحقيقي

فيما يلي نتائج تشغيل واجهة برمجة التطبيقات (API) على ملفات SVG المصدرة من Figma لملف نموذجي مجموعة أيقونات تطبيق الويب والرسوم التوضيحية:

متوسط ​​التوفير عبر هذه الملفات: 59.4%. أكبر المكاسب تأتي من التوضيح ملفات SVG التي تحتوي على بيانات التعريف المضمنة وتعريفات المسار المطولة. أيقونات بسيطة لا تزال راجع التخفيضات بنسبة 55-65% لأن Figma يصدر دقة عشرية وسمات ذلك تجاهل المتصفحات.

دفعة البرنامج النصي الأمثل

للاستخدام المحلي أو التكامل مع أنظمة CI الأخرى (GitLab CI، وCircleCI، وJenkins)، يعمل برنامج Shell النصي هذا على تحسين كل 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 منفصلة وقم بالإشارة إليها بدلاً من ذلك.