الجواب القصير
افتح SVG إلى صورة، وأفلِت الملف فيها، وسمِّ مقاساً. وإن لم يقل لك شيءٌ أيَّ مقاس تستعمل، فـ 1024 بكسلاً على الضلع الأطول افتراضٌ جيد: كبيرٌ بما يكفي لكل شيء تقريباً وصغيرٌ بما يكفي للإرسال بالبريد. واترك الصيغة على PNG، واترك الخلفية على شفافة، وخذ الملف.
وكلُّ ما دون ذلك هو ما تفعله حين لا يكفي ذلك الافتراض — حين يُحدَّد لك رقم، أو حين يكون ذاهباً إلى الطباعة، أو حين يعود بشكل خاطئ.
لماذا المقاسُ قرارُك لا قرارُ الملف
ملفُّ JPEG شبكةُ بكسلات مقيسة؛ فسؤالُ كم مقاسُه له جواب. أما SVG فليست صورةً أصلاً، بل مجموعةُ تعليمات — ارسم دائرةً هنا، وهذا المسارَ بذلك اللون — والتعليماتُ ليس لها مقاس. فالمتصفحُ يستطيع تنفيذها عند 16 بكسلاً أو عند 4000 والنتيجةُ حادّةٌ بالتساوي في الحالين، لأنه لا يقيس شيئاً. بل يرسم من جديد.
ولهذا لا يستطيع التحويلُ اختيارَ رقم لك، ولهذا لا يكلّفك اختيارُ رقم كبير شيئاً. وهذا هو العمل الوحيد على الصور الذي يكون فيه «كبّرها» مجانياً.
ومعظمُ ملفات SVG يحمل فعلاً خاصيتَي width وheight، والأداةُ ستعرضهما — لكنه افتراضٌ لا حدّ. فالأيقونةُ التي تقول width="24" لا تقول إلا أن من رسمها كان في ذهنه شريطُ أدوات عرضه 24 بكسلاً.
من أين يأتي الرقم فعلاً
لموقع ويب. خذ المقاس الذي تشغله الصورةُ على الصفحة ببكسلات CSS واضربه في كثافة بكسلات الشاشات التي تعنيك. فالشعارُ في مساحة عرضها 200 بكسل يحتاج ملفاً بـ 400 بكسل لحاسوب Retina محمول و600 لهاتف حديث. وذلك هو كلُّ ما تعنيه @2x و@3x، وهو سببُ أن أداةً تكتبها توفّر عليك إجراء الحساب ثلاث مرات.
لأيقونة تطبيق أو صفحة متجر أو فافيكون. الرقمُ منشورٌ وليس ثمّة ما يُحسَب: ما تقوله صفحةُ المتجر، بالضبط. وللفافيكون، لا تحوّل إلى بكسلات أصلاً — اصنع ملفَّ ico.، وهو يحمل عدة مقاسات في ملف واحد، لأن لسانَ المتصفح والعلامةَ المرجعية واختصارَ Windows كلَّها تطلب مقاسات مختلفة.
للطباعة. اضرب المقاس الفيزيائي بالبوصة في دقّة الطابعة. فالشعارُ الذاهب إلى بطاقة عمل بعرض بوصتين عند 300 DPI هو 600 بكسل؛ والشعارُ نفسه عبر صفحة A4، عند 8.3 بوصة، نحو 2500. والمطابعُ تطلب 300 DPI بداهةً، وللافتة كبيرة تُرى من عبر غرفة تكفي 150.
لمعاينة اجتماعية أو صورة OG. المنصّةُ تسمّي إطاراً — 1200 × 630 لمعظم معاينات الروابط — والإطارُ بشكل مختلف عن شعارك. وذلك ما وُجِد له إعدادُ «الحشو»: الرسمُ موسَّطاً بنسبه هو، ولونُ خلفية يملأ الباقي، بدل شعارٍ ممطوط يقول للجميع إنك لم تفحص.
ومتى انطبق اثنان من هذه، فاستعمل الأكبر. فملفُّ PNG أكبرُ مما يلزم تنزيلٌ أكبر قليلاً؛ والصغيرُ جداً لا يمكن إصلاحه لاحقاً، للسبب المذكور في القسم التالي.
لا يمكنك الرجوع
التحويلُ إلى بكسلات باتجاه واحد. فمتى صار الرسمُ ملفَّ PNG صار بكسلات كأي صورة أخرى، وتكبيرُه بعد ذلك لا بدّ أن يخترع تفصيلاً لم يُقَس قط — النتيجةُ الطريّة الملطّخة نفسها التي تحصل عليها من تكبير صورة فوتوغرافية.
فاحتفظ بملف SVG. فهو النسخةُ الأصل، وهو الملفُّ الأصغر دائماً تقريباً، وكلُّ مقاس مستقبلي يخرج منه مثالياً. وملفُّ PNG تصديرٌ لاستعمال واحد بعينه، ومتى احتجت مقاساً آخر فالحركةُ الصحيحة أن تصدّر من جديد لا أن تغيّر حجم ما صدّرته.
وثمّة برمجيةٌ تدّعي تحويل PNG رجوعاً إلى SVG. وما تفعله هو التتبّع: تخمينُ أيُّ منحنيات قد تفسّر شبكةَ بكسلات. وهي تعمل على وجه مقبول في رسومٍ مسطّحة ذات لونين وتنتج هراءً باهظاً في كل ما عداها، ولا تسترجع أبداً ما كان في الرسم الأصلي.
ثلاثةُ أشياء تتغيّر لحظةَ صيرورته بكسلات
ملفُّ SVG المحوَّل إلى بكسلات الذي يبدو خطأً يبدو خطأً دائماً تقريباً لسبب من هذه الثلاثة، والثلاثةُ جديرةٌ بالمعرفة قبل أن تصدّر لا بعده.
النصُّ يُرسَم بأي خطّ يكون على الجهاز. فملفُّ SVG الذي فيه نصٌّ لا يحوي الخطّ — بل يسمّي واحداً ويترك للراسم أن يجده. فإن لم يكن الخطُّ مثبَّتاً، استُعمِل بديل، وللبديل أشكالُ حروف مختلفة وعروضٌ مختلفة، فقد يتدفّق النصُّ من جديد أو يفيض. والملفُّ الذي يجلب خطّه من عنوان ويب يلقى أسوأ: فملفُّ SVG المحوَّلُ إلى بكسلات عبر <img> غيرُ مسموح له بجلب أي شيء أصلاً، فلا يصل شيء.
والعلاجُ هو الذي يعرفه كلُّ مصمّم أصلاً: حوّل النصّ إلى خطوط خارجية قبل تصدير ملف SVG (يسمّيه Illustrator إنشاءَ خطوط خارجية، ويسمّيه Figma تسطيحاً، ويسمّيه Inkscape كائناً إلى مسار). فتصير الحروفُ هندسةً، ويكفّ الخطُّ عن الأهمية، وتبدو الصورةُ هي هي على كل جهاز. وافعله على نسخة — فالنصُّ المحوَّل إلى خطوط خارجية لم يعد قابلاً للتحرير نصّاً.
والخطوطُ الشعرية تصير رمادية أو تختفي. فالحدُّ الذي يخرج أقلَّ من بكسل واحد عند مقاسك المختار لا يمكن رسمُه خطّاً مصمتاً، فيُرسَم خافتاً. ولهذا يبدو شعارٌ رقيقٌ محوَّلٌ عند 64 بكسلاً باهتاً بينما يبدو الملفُّ نفسه عند 512 مثالياً. فإن كان المقاسُ الصغير هو المطلوب، فالجوابُ رسمٌ مبسَّطٌ بحدود أثقل لا إعدادُ تصدير آخر — وهو السببُ نفسه في أن الفافيكون رمزٌ لا كلمةٌ مرسومة.
والحركةُ تتوقّف. فملفُّ SVG المتحرّك يتحوّل إلى صورة ساكنة واحدة: أيّاً كان الإطارُ الأول. وليس ثمّة إعدادُ تصدير يغيّر هذا. فإن كنت تحتاج الحركة، فأنت تحتاج ملفَّ GIF أو فيديو، مصنوعاً بطريقة أخرى.
الشفافية، وأيَّ صيغة تختار
PNG إلا أن يكون لك سبب. فهي بلا خسارة، وتحفظ الشفافية، واللونُ المسطّح ذو الحواف الحادّة — وهو معظمُ ما يتكوّن منه رسم — يُضغَط فيها جيداً. والشعارُ المحوَّل إلى بكسلات ملفُّ PNG أصغر عادةً مما كان سيكونه ملفَّ JPEG، وأنظفُ كذلك.
وJPEG ليس فيها شفافيةٌ أصلاً. فكلُّ بكسل شفاف لا بدّ أن يصير لوناً ما، وإن لم يختر لك شيءٌ واحداً صار أسود — ومن هناك تأتي نتيجةُ الشعار على مربّع أسود التي يظنّها الناسُ عطباً. وهي كذلك ذاتُ خسارة على الوجه الذي يظهر أسوأ ما يظهر في هذا النوع من الصور بالضبط: حلقةٌ من البقع حول كل حافّة حادّة. استعملها حين يصرّ عليها شيء.
وWebP تفعل كل ما تفعله PNG، في ملف أصغر، ويقرؤها كلُّ متصفح حديث. والسببُ في تجنّبها هو ما يحدث بعد المتصفح: فالبرمجياتُ الأقدم وبعضُ المطابع وعددٌ لا بأس به من استمارات الرفع ما زالت لا تفتح واحدة.
واختيارُ لون خلفية مع PNG شيءٌ عاديٌّ تماماً أن تريده كذلك. فالشفافيةُ لا تنفع إلا حين يكون ما تحطّ عليه الصورةُ لوناً لا تستطيع توقّعه؛ ومتى علمت أصلاً أنها صفحةٌ بيضاء، فالتسطيحُ على الأبيض يتجنّب صنفاً كاملاً من المفاجآت.
حين يخرج التصديرُ فارغاً أو خطأً
لا شيء إلا فراغ. عادةً خاصيةُ xmlns ناقصةٌ على العنصر الجذر. فالملفُّ بدونها ليس SVG في نظر وسم الصورة، ويُرسَم لا شيئاً. وفتحُ الملف في متصفح هو الفحصُ السريع: فإن لم يعرض المتصفحُ شيئاً هو الآخر، فالمشكلةُ في الملف لا في المحوِّل.
الرسمُ صغيرٌ في الزاوية العليا اليسرى. فللملف width وheight ولا viewBox له، فليس ثمّة نظامُ إحداثيات ليُقاس ويحتفظ الرسمُ بوحداته الأصلية على لوحة أكبر. والمحوِّلُ الجيد يضع لك viewBox؛ فإن لم يفعل محوِّلك، فإضافةُ viewBox="0 0 العرض الارتفاع" إلى العنصر الجذر باليد تصلحه، والملفُّ نصٌّ سادة فتستطيع.
جزءٌ من الصورة ناقص. فشيءٌ في الملف كان يشير إلى عنوان بدل أن يحوي الرسم — صورةٌ مضمَّنة مخزَّنةٌ رابطاً، أو ورقةُ أنماط، أو خطّ. والمحوِّلُ الذي يرفض جلب تلك يفعل الصواب، وهو الرفضُ نفسه الذي يمنع ملفَّ SVG نزّلته من مكان ما من أن يبلّغ عنك من صنعه. فأعد التصدير من برنامج الرسم والصورُ مضمَّنة.
يرفض مقاساً كبيراً جداً. فالمتصفحاتُ تحدّ كم تكبر اللوحة، وهي لا تتفق على أين: فبعد نحو 16,000 بكسل على الضلع لا يعود شيء، و Safari على iPhone أو iPad يستسلم أبكر بكثير، عند نحو 4096 × 4096. والأداةُ التي تحذّرك تنقذك من ملف فارغ، لأن ذلك ما ينتجه المتصفح حين ينفد منه بدل رسالة خطأ.
لا شيء من هذا يحتاج رفعاً
تحويلُ SVG إلى بكسلات شيءٌ يفعله كلُّ متصفح آلافَ المرات في اليوم — وهو الآليةُ نفسها التي ترسم أيقونةً على صفحة ويب. فليس ثمّة سببٌ تقني لأن يسافر رسمُك إلى خادم ويعود ملفَّ PNG، والأداةُ هنا لا ترسله إلى أي مكان: Content-Security-Policy الخاصةُ بالصفحة تسمّي كل عنوان يحقّ لها الاتصال به، ولا واحدٌ منها يخصّ هذا الموقع.
وذلك يهمّ أكثر من المعتاد مع SVG، لأن SVG مستندٌ لا صورة. فهي تستطيع أن تحوي سكربتاً وعنواناً بعيداً، والشعارُ الذي أرسلته إليك وكالةٌ ملفٌّ لم تكتبه أنت. وهي مرسومةً عبر وسم صورة تكون في ما تسمّيه المواصفةُ الوضعَ الساكن الآمن: فالسكربتُ لا يستطيع العمل والعنوانُ لا يُتَّصَل به قط. والمتصفحُ هو من يفرض ذلك، لا الموقع.
حمّل الصفحة، واقطع الاتصال بالإنترنت، وحوّل شيئاً رغم ذلك إن كنت تفضّل أن تتحقّق على أن يُقال لك. هل رفع الملفات إلى المحوِّلات على الإنترنت آمن؟ يعرض ثلاثة فحوص أخرى تستطيع إجراءها على أي أداة.