كيفية اختيار أبعاد البكسل عند تصدير SVG إلى PNG

افصل بين إحداثيات SVG وبكسلات PNG

يصف SVG الأشكال والمسارات والنص والعناصر الأخرى بواسطة الإحداثيات وتعليمات الرسم. تحدد قيم viewBox الأربع نقطة الأصلية وعرض مستطيل داخلي وارتفاعه. وهي تساعد على تعيين الرسم داخل مساحة العرض، لكنها لا تفرض عدد البكسلات التي يجب أن يحتويها PNG. يمكن عرض ملف SVG نفسه كأيقونة صغيرة أو رسم في دليل أو مخطط كبير في عرض تقديمي من دون تغيير viewBox.

أما PNG فيحفظ النتيجة المرسومة على شبكة ثابتة. وعند تكبيره لاحقاً لا يعيد حساب المنحنيات كما يفعل SVG، بل يستوفي البكسلات الموجودة. لذلك قد يكون تحويل viewBox مقاسها 100 في 100 آلياً إلى PNG مقاسه 100 في 100 بكسل صغيراً جداً لموضع كبير، أو غير ضروري لصورة مصغرة. قبل التحويل، دوّن أكبر حجم عرض وأي تكبير متوقع والحاجة إلى شاشات مرتفعة الكثافة.

• تعامل مع viewBox بوصفها إحداثيات داخلية.
• سجّل أكبر حجم عرض فعلي قبل التصدير.

خطط انطلاقاً من الاستخدام الفعلي

ابدأ بالعرض والارتفاع اللذين ستظهر بهما الصورة فعلياً. قد يستفيد رسم بعرض 200 بكسل CSS من مصدر نقطي أكبر على شاشة كثيفة، لكن معامل التكبير المناسب يتوقف على المنتج والأجهزة وشروط التسليم. تمنح الأبعاد الأكبر هامشاً عند أخذ العينات، لكنها تزيد عادة حجم الملف وكلفة المعالجة. اختبر خياراً معقولاً بدلاً من اختيار أعلى قيمة متاحة من دون فحص.

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

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

• حدد مقاسات مستقلة للويب والتطبيق والمستند والعرض التقديمي.
• جهّز أكثر من مخرج عندما تختلف الوجهات كثيراً.

افحص نسبة الأبعاد والمساحة الداخلية معاً

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

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

• اجعل مستطيل الإخراج متوافقاً مع نسبة المصدر.
• قيّم اللوحة والحدود الفعلية للأشكال بصورة منفصلة.

اختبر الخطوط الرفيعة والنص والموارد المرتبطة

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

تعتمد بعض ملفات SVG على خطوط أو صور خارجية أو أوراق أنماط أو أقنعة أو مؤثرات تكون متاحة في معاينة ولا تكون متاحة للمحول. يغيّر الخط البديل التفاف النص والنسب، وتختفي الصورة التي لا يتم تحميلها. قارن PNG بعرض موثوق للمصدر. افحص كل حرف في الشعار النصي، وراجع الصور والتدرجات والأقنعة والظلال في الرسم. لا تعوض أبعاد البكسل الصحيحة مورداً مفقوداً.

• قيّم الخطوط والحروف بحجم العرض الفعلي.
• تأكد من ظهور الخطوط والصور المرتبطة كما ينبغي.

تحقق من PNG الذي تم تنزيله في السياق الحقيقي

ابدأ بمعالجة ملف SVG ممثل عبر أداة التحويل من SVG إلى PNG باستخدام الأبعاد المختارة. نزّل النتيجة وافتحها في عارض آخر لتأكيد العرض والارتفاع الفعليين. افحص النسبة والفراغ والقص والألوان والنص واتساق الخطوط. وإذا كانت الشفافية مطلوبة، فضع PNG فوق خلفيتين فاتحة وداكنة لكشف مساحة بيضاء غير متوقعة أو هالات حول الحواف. لا تغني معاينة المحول عن فحص الملف المحفوظ.

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

قبل معالجة مجموعة كاملة، اختبر ملف SVG ثانياً يحتوي تفاصيل مختلفة. قد يتصرف رسم كثيف النص ورمز بسيط بصورة مختلفة عند الأبعاد نفسها. دوّن الحجم والخلفية والمواضع التي تم فحصها. يساعد اختبار أخير في متصفح أو عارض ممثل على فصل خطأ التصدير عن الاستيفاء الذي تنفذه بيئة العرض، ويمنع تكرار العمل بلا حاجة.

• أكد أبعاد البكسل في الملف الذي تم تنزيله فعلاً.
• اختبر المخرج نفسه في أصغر وجهة وأكبرها.