هل يحافظ تحويل PNG إلى SVG على الخلفية الشفافة؟

مدخلات شفافة، ومخرجات شفافة

يمكن لصيغتي PNG وWebP تخزين قناة شفافية (alpha) — أي درجة عتامة لكل بكسل. أما JPEG فلا. عندما ترفع PNG أو WebP، تفك أداة التتبّع قناة الشفافية ولا تمنح لونًا إلا للبكسلات التي تزيد عتمتها عن النصف. البكسلات الأقل من ذلك لا تنتمي إلى أي لون ولا تنتج أي مسار، لذا تبقى المساحة الفارغة حول الشعار المقصوص فارغة في ملف SVG. ولا يحتوي عنصر <svg> الناتج على مستطيل خلفية؛ فأي شيء تضعه عليه يظهر من خلاله.

يمكنك التحقق من ذلك في المعاينة: تعرض لوحة النتيجة المسارات المتتبَّعة فوق رقعة شطرنج، وتُظهر المناطق الشفافة رقعة الشطرنج بدلًا من مربع أبيض.

تُعالج البكسلات شبه الشفافة على خطوتين. أولًا، كل بكسل إما ينتمي إلى لون أو لا، عند حد نصف العتامة: فالحافة الناعمة المنعّمة للشعار تُقص هناك، ليقع الحد حيث تكون الحافة مغطاة بالنصف. ثانيًا، يحتفظ كل لون بعتامة حبره، مقيسة داخل أشكاله لا عند الحافة الناعمة. فالحبر المصمت يُكتب معتمًا بالكامل، لذا يبقى النص الأسود على شعار شفاف أسود لا رماديًا فاتحًا. واللون الذي يكون شبه شفاف في الأصل — كظل مُسقط ناعم أو طبقة ملوّنة شفافة — يُكتب بتلك العتامة كقيمة fill-opacity، فيُتتبّع الظل كشكل واحد مسطح شبه شفاف بالتساوي (مثلًا بعتامة 54 %). أما ما لا يستطيع التتبّع الاحتفاظ به فهو التلاشي نفسه: يُستبعد الجزء الخارجي الباهت من الظل، الذي تقل عتمته عن النصف، ويكون للشكل الناتج حافة حادة وعتامة واحدة متساوية بدلًا من تلاشٍ تدريجي.

صورة PNG شفافة لشعار القضاعة الخاص بنا مع إضافة ظل مُسقط ناعم (يسارًا)، وملف SVG المتتبَّع منها فوق رقعة شطرنج (في الوسط) وفوق لون (يمينًا). لا يوجد مربع خلفية، وبقي بياض العينين، وأصبح الظل أشكالًا مسطحة بعتامة 60 %، بحواف حادة حيث كان في PNG تلاشٍ.

لماذا تبقى التفاصيل البيضاء بعد إزالة الخلفية

تعمل «إزالة الخلفية» من حواف الصورة نحو الداخل. فهي تنظر إلى شريط على طول حدود الصورة، وتأخذ اللون أو اللونين اللذين يغطي كلٌّ منهما 15 % منه على الأقل، وبدءًا من الحواف تحدد كل بكسل متصل من تلك الألوان — ومن الألوان القريبة منها — على أنه شفاف. ثم تزيل أيضًا الحافة الناعمة حيث تلتقي تلك الخلفية بالتصميم (البكسلات المجاورة مباشرة للمنطقة المُزالة التي لا تزال قريبة من لون الخلفية) والنقاط الصغيرة التي تلامس حافة الصورة. وكل ما لا يتصل بالحدود لا يُمس — الفراغ الأبيض داخل حرف «A»، واللمعة البيضاء في شارة، والفراغ الأبيض بين خطين.

هذا مقصود: التفصيل الأبيض في الشعار المحاط بتصميم أغمق يبقى بعد الإزالة. وإذا رأيت أدوات أخرى تمحو كل بكسل أبيض، فتلك تقنية مختلفة (الإزالة حسب اللون)، ولهذا قد تُفرغ «إزالة الخلفية» في أماكن أخرى التصميم من داخله.

والوجه الآخر: إذا كانت المنطقة البيضاء المحاطة متصلة بالحدود — لأن في الحد فجوة ولو ببكسل واحد — فإن الإزالة تدخل عبر الفجوة وتزيلها. أصلح الفجوة في الصورة الأصلية، أو اترك الإزالة متوقفة واحذف مسار الخلفية في المحرر بعد ذلك.

تصميم أبيض على خلفية بيضاء

لا تستطيع أداة التتبّع الفصل بين ألوان متطابقة. فالأيقونة البيضاء المصدّرة على لوحة بيضاء هي، بالنسبة لأداة التتبّع، منطقة بيضاء واحدة، والنتيجة إما مستطيل أبيض واحد أو تحويل فارغ لا ينتج أي مسارات فيكتور. أصلح ذلك قبل الرفع:

1. في أي محرر صور، ضع الأيقونة على خلفية مصمتة شديدة التباين (رمادي داكن أو لون لا يظهر في الأيقونة).
2. ارفعها مع تفعيل «إزالة الخلفية». الخلفية متصلة بالحواف، لذا تُزال؛ وتبقى الأيقونة البيضاء.
3. إذا كانت في الأيقونة مناطق شفافة محاطة يجب أن تبقى شفافة، فصدّرها بدلًا من ذلك كصورة PNG بشفافية حقيقية، فلا تحتاج إلى أي خلفية على الإطلاق.

التحقق من الشفافية في النتيجة

• افتح ملف SVG الذي نزّلته في متصفح: تظهر خلفية الصفحة (بيضاء افتراضيًا) من خلال المناطق الشفافة.
• حوّله إلى صورة نقطية بأداة تحويل SVG إلى PNG — الناتج بصيغة RGBA ويحتفظ بالشفافية.
• افتح الملف في محرر نصوص: لا يوجد مسار خلفية بالحجم الكامل ما لم تكن للصورة الأصلية خلفية معتمة وكانت الإزالة متوقفة.

سلوك ذو صلة يستحق المعرفة

• يحكم الإعداد «رسم خطي / استنسل» على كل بكسل بسطوعه كما سيبدو على ورق أبيض: الداكن يصبح حبرًا أسود، والفاتح يصبح ورقًا أبيض، والمناطق الشفافة تبقى شفافة. لذلك يخرج التصميم الأبيض ورقًا أبيض لا حبرًا، وتُستبعد الحافة شبه الشفافة لخط داكن على خلفية شفافة بدلًا من أن تتحول إلى هالة باهتة.
• صورة PNG للمعاينة تحمل علامة مائية وهي نقطية؛ ولا يحمل مسارات الفيكتور والشفافية الحقيقية إلا ملف SVG غير المقفل.