تحويل SVG إلى PNG

ما أداةُ تحويل SVG إلى PNG؟

ملفُّ SVG رسمٌ موصوفٌ تعليماتٍ: خطوطًا ومنحنياتٍ وتعبئاتٍ ونصًّا، وليس فيه بكسلٌ واحد. وملفُّ PNG شبكةُ بكسلات. والتحويلُ أن تختار حجمًا وتطلب من محرّكٍ أن يرسم تلك التعليمات بذلك الحجم، ولهذا يعطي ملفُّ SVG الواحد أيقونةً حادّةً من اثنتين وثلاثين بكسلًا ولافتةً حادّةً من أربعة آلافٍ وستةٍ وتسعين.

ويعني ذلك أيضًا أن الحجم قرارٌ لا خاصيةٌ تقرؤها من الملف. فبعضُ ملفات SVG يصرّح بحجمه، وكثيرٌ منها لا يفعل، وما يقع في الحال الثانية هو الفرق بين محوّلٍ يعمل وآخر يخذلك صامتًا. وهذه الأداةُ تريك في أي الحالين أنت قبل التحويل.

وكلُّ ذلك يجري في متصفحك. فالملفُّ يُقرأ محليًّا، والرسمُ يرسّمه المحرّكُ نفسه الذي يرسم SVG في أي صفحة، وملفُّ PNG يخرج من canvas. ولا يُرفع شيء، فلا حدَّ لحجمٍ يفرضه رفع، ولا نسخةَ من عملك على خادم أحد.

كيف تستعملها؟

1. اختر ملف SVG. يُقرأ في متصفحك بدل أن يُرسل إلى مكان. واللوحةُ تحته تخبرك في الحال بالحجم الذي يطلبه الملف، وتقول أي قاعدةٍ أعطت ذلك الرقم، فملفُّ SVG قد يصرّح بحجم، وقد يلمّح إلى شكلٍ فقط، وقد لا يقول شيئًا البتة.
2. اضبط الحجم الذي تريده حقًّا. اكتب عرضًا أو ارتفاعًا، أو استعمل أزرار التكبير لضعفين أو أربعةٍ أو ثمانية من حجم الملف. والنسبةُ محفوظةٌ ما لم تُطفئها. ولأن حجم الوجهة يُكتب داخل الرسم قبل ترسيمه، فتصديرٌ بثمانية أضعافٍ فيه ثمانيةُ أضعاف التفصيل، لا صورةٌ صغيرةٌ مكبَّرة.
3. اقرأ ما لن ينجو ثم نزّل. تسرد اللوحةُ كلَّ ما في الملف مما يأبى المتصفحُ تحميله حين يُستعمل SVG صورةً، والخطوطَ التي يتوقع الملفُّ وجودها في جهازك. فإن خلت تلك القائمة طابق ملفُّ PNG ما تراه في محرّرك المتّجهي.

لماذا تعطيك محوّلاتٌ كثيرة مربعًا من مئةٍ وخمسين بكسلًا

هذه أكثرُ شكوى تتكرر في تحويل SVG، وليست عيبًا في المحوّلات. فمواصفةُ SVG تفرّق بين أمرين يتشابه لفظهما. فالنسبةُ الذاتية هي شكلُ الرسم، ويعطيكها viewBox. وأما الحجمُ الذاتي فقياسٌ حقيقيٌّ بالبكسل، ولا يعطيه إلا width وheight بقيمتين مطلقتين.

فملفٌّ يبدأ بـviewBox قيمته صفر صفر 1024 1024 وليس فيه width ولا height له شكلٌ معلوم ولا حجم معلوم. فإذا طُلب رسمُه ولا شيء آخر يُستند إليه رجع المتصفحُ إلى حجم الكائن الافتراضي الذي تعرّفه CSS للمحتوى المستبدَل، وهو ثلاثمئة في مئةٍ وخمسين بكسلًا، وأدخل الشكلَ فيه. فالرسمُ المربع يخرج مئةً وخمسين في مئةٍ وخمسين، واللافتةُ بنسبة أربعةٍ إلى واحد تخرج ثلاثمئة في خمسةٍ وسبعين. ولم يكن الأصلُ قط مئةً وخمسين بكسلًا من شيء، والأرجحُ أن صاحبه أراد ألفًا وأربعةً وعشرين، غير أن شيئًا في الملف لم يقل ذلك.

وأشدُّ ما يقع هذا في مجموعات الأيقونات، لأن حذف width وheight هناك عرفٌ مقصود: يترك الأيقونة تأخذ حجمها من CSS حيثما استُعملت. وذلك صوابٌ تامٌّ لصفحة ويب، وخطأٌ تامٌّ لمحوّلٍ لا CSS عنده يرجع إليه. والأداةُ تسمّي القاعدة التي انطبقت على ملفك، فيصير الحجمُ الصغير أمرًا تقرّره لا أمرًا تكتشفه بعد فوات الأوان.

ولازمٌ يحسن علمُه: وضعُ width وheight على ملفٍ لا viewBox فيه يقصّ الرسم بدل أن يكبّره، إذ لا نظام إحداثياتٍ يُسقَط على الصندوق الجديد. فإذا كان ملفك كذلك أضافت هذه الأداةُ viewBox مستنبَطًا من الحجم الذي كان يُرسم به فعلًا، فيكبّر التكبيرُ الرسمَ كما تتوقع.

ما لا يستطيع PNG أن يحمله معه

إذا حُمّل SVG عبر عنصر صورة وضعته المواصفةُ في وضع معالجةٍ مقيَّد. فلا تُنفَّذ السكربتات ولا تُحلُّ المراجعُ الخارجية، وذلك في كل المتصفحات لأنه ما توجبه المواصفة لا سياسةٌ اختارها صانعٌ بعينه. والسببُ بيّن: ينبغي ألا تستطيع صورةٌ أن تطلب من الشبكة أو تنفّذ شفرةً لمجرد عرضها.

وعملًا يُفضي ذلك إلى اختفاء أشياء بلا إنذار. فعنصرُ صورةٍ داخل SVG يشير إلى صورةٍ في مكانٍ آخر لا يرسم شيئًا. وورقةُ أنماطٍ تُجلب بقاعدة import لا تصل قط، فيسقط كلُّ ما كانت تنسّقه إلى قيمه الافتراضية. وخطُّ ويبٍ مصرَّحٌ به بمصدرٍ بعيد لا يُجلب. وشكلٌ مُعادٌ من ملف SVG آخر لا يظهر. ولا يرفع شيءٌ من ذلك خطأً في أي موضع، ولهذا تبحث الأداةُ عنها قبل التحويل وتسرد ما وجدت.

والخطوطُ تستحق تنبيهًا خاصًّا لأنها تخفق على وجهٍ آخر. فالخطُّ المسمَّى في الملف غير المحمَّل من مكانٍ يُبحث عنه في الجهاز الذي يرسم، وهو جهازك. فإن كان عندك خرج النصُّ تامًّا، وإلا وضع المتصفحُ غيره، فتتغير عروضُ الحروف، فتنتقل مواضعُ قطع الأسطر ويختلّ التنضيد. وتحويلُ النص إلى مساراتٍ في محرّرك المتّجهي قبل التصدير يزيل المسألة كلها، بثمن أن يكفّ النصُّ عن كونه نصًّا.

وحدّان أصغر. فما في عنصر foreignObject هو HTML لا SVG، ولا يُرسم في هذا الوضع. وملفُّ PNG فيه قناةُ شفافية، فتبقى المناطقُ الشفافة شفافةً بدل أن تبيضّ، وذلك ما تريده غالبًا، وإن حسن علمُه إن كنت ستضع الناتج على خلفيةٍ داكنة.

لماذا هي مجانية؟

لأن حاسوبك هو الذي يعمل. فالملفُّ لا يغادر الصفحة: يُقرأ محليًّا، ويرسّمه محرّكُ الرسم في متصفحك نفسه، ويرمّزه canvas إلى PNG. فلا رفع ولا طابور ولا خادمٌ يدفع عرض نطاق، ولا نسخة من عملك خارج جهازك.

فلا حساب ولا تسجيل ولا علامة مائية ولا سقفَ حجمٍ إلا ما يسع متصفحك في الذاكرة. والمحرّك الذي يقرأ أبعاد الملف ويجد ما سيفقده في المستودع إلى جوار الصفحة، ومعه مئةٌ واثنان وعشرون تحققًا تقابله بمواصفتَي SVG وCSS.