شعار SVG المتحرك: الصيغة التي لا يصدّرها أحد تقريباً
إذا كان شعارك المتحرك سيوضع في موقع إلكتروني، فصيغة GIF خيار خاطئ منذ سنوات. شعار SVG المتحرك أصغر حجماً، وأوضح على كل كثافات الشاشات، وشفافيته حقيقية بدل البكسل الظاهر أو المخفي في GIF.
لماذا هو أصغر
يخزّن GIF الحركة كصور: صورة لكل إطار بعدد ألوان محدود. أما SVG فيخزّن التصميم مرة واحدة ويصف التأثير كتعليمات: تدرج لوني وقناع وحركة CSS تحرّكه. فتكلّف الحركة بضع مئات من البايتات بدل عشرات الإطارات.
في شعارنا التجريبي: 58 كيلوبايت لـ SVG مقابل 109 لـ GIF — مع بقاء SVG مستقلاً عن الدقة، فهو الملف الذي يظل سليماً على شاشات الريتينا.
فرق الشفافية
شفافية GIF بت واحد: البكسل إما ظاهر تماماً أو مخفي تماماً. لذلك يستحيل في GIF تنفيذ توهّج يتلاشى تدريجياً فوق خلفية شفافة، إذ ينتهي التلاشي بحافة حادة. أما SVG فيحمل شفافية كاملة بـ 8 بت، فيتلاشى التوهج إلى العدم فعلاً.
أين يصلح وأين لا يصلح
| السياق | SVG المتحرك |
|---|---|
ترويسة موقع، مضمَّناً أو داخل <img> | نعم — الخيار الأفضل |
| شاشات عالية الكثافة | نعم — مستقل عن الدقة |
| توقيع البريد الإلكتروني | لا — استخدم GIF |
| سلاك وديسكورد وتيمز | لا — استخدم GIF |
| بعض برامج التصميم | متفاوت — بعضها لا يفك ترميز الصورة المضمَّنة |
تفصيلة واحدة تحدد الحجم
الصورة المضمَّنة هي الملف نفسه. بصيغة PNG يصل شعارنا التجريبي إلى 127 كيلوبايت — أكبر من GIF فتضيع الفائدة. وبصيغة WebP بجودة 0.9 ينزل إلى 57 كيلوبايت بالشفافية نفسها. فإذا خرج ملف SVG أكبر من GIF الذي حلّ محله، فصيغة الصورة الحاملة هي السبب.
ليست كل التأثيرات قابلة للتحويل
التأثيرات الهندسية — تدرج يعبر التصميم، نبض، تحريك — تُترجم إلى شيفرة بسهولة. أما التأثيرات التي تعمل على مستوى البكسل، كالجسيمات وتشويه الغليتش، فلا بد من إنتاجها كإطارات. والتطبيق يوضح ذلك صراحة بدل تصدير ملف معطوب بصمت.
الأسئلة الشائعة
هل يمكن تحريك SVG دون جافاسكربت؟
نعم. الحركة عبارة عن CSS keyframes داخل ملف SVG نفسه، فتعمل داخل وسم img أو كخلفية CSS أو مضمَّنة في الصفحة، دون أي شيفرة برمجية.
هل SVG المتحرك أصغر من GIF؟
في التأثيرات القابلة للوصف هندسياً — اللمعان والتدرجات والنبض والتحريك — نعم غالباً، لأن الصورة تُخزَّن مرة واحدة بدل مرة لكل إطار. شعارنا التجريبي 58 كيلوبايت بـ SVG مقابل 109 بـ GIF.
هل يعمل SVG المتحرك في البريد الإلكتروني؟
لا. برامج البريد لا تشغّل حركة CSS، وكثير منها يحذف SVG بالكامل. استخدم GIF للبريد وSVG للويب.