كيفية تغيير حجم SVG دون فقدان الجودة

«غيّر حجم SVG» جملة تحتمل معنيين لا علاقة بينهما. الأول أن تعرض الملف بحجم أكبر مع بقاء محتواه كما هو. والثاني أن تكبّر الرسم نفسه فتكبر معه المسافات والسماكات. الخلط بينهما هو مصدر معظم النتائج المخيبة.

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

ما يحمله الملف من قياسات

في أعلى ملف SVG عادة قيمتان. الأولى viewBox، وهي مستطيل بوحدات المستخدم يحدد ما يُرى من الرسم. والثانية width وheight، وهما الحجم الذي يُعرض به ذلك المستطيل.

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

لوحة الرسم ليست الرسم

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

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

احكم بالنتيجة المرئية لا بالرقم في الزاوية. إن أردت أن يكبر الشكل نفسه فحرّك الأشياء وغيّر مقاساتها، وإن أردت أن يتغير الإطار فقط فلا تلمس المسارات.

السماكة تكبر مع الرسم

سماكة الخط في SVG بوحدات المستخدم، لا بالبكسل. الرقم فيها يقاس بنفس مسطرة المسار، فيكبر معه.

أيقونة 24 × 24 وحدة معروضة عند 2,400 بكسل كُبّرت مئة مرة. مسار سماكته وحدة واحدة سيُرسم بعرض 100 بكسل. ليس خطأً في المحرر، بل نتيجة مباشرة للمقياس. الحل عملي: خفّض قيمة السماكة إلى 0.1 وحدة إن أردت سماكة بصرية ثابتة عند 10 بكسلات، أو ثبّت الرقم واقبل أن التصميم نفسه يتغير.

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

النص لا يتحرك بنفس المنطق

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

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

الصورة المدمجة استثناء صريح

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

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

تسلسل آمن للتكبير

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

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

قيمة عملية للمقاسات المطبوعة: ورق A4 عند 300 بكسل في البوصة يساوي 2,480 × 3,508 بكسل. هذا هو الحجم الذي تحتاجه لصورة مسطّحة، أما ملف متجهي فلا يحتاج رقماً كهذا لأن دقته تُحسب عند العرض.

أين ينتهي هذا الدليل

لا يوجد هنا خوارزمية تكبير جديدة ولا معجزة إعادة بناء. الكلام كله عن قياسات ووحدات وسمات، وهذا ما يفسر النتائج ويجعلها متوقعة.

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