كيفية تغيير ألوان ونصوص ومسارات SVG عبر الإنترنت

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

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

التعبئة والحدود والشفافية

هذه ثلاث سمات مستقلة تماماً. التعبئة تملأ داخل الشكل، والحدود ترسم حافته، والشفافية تتحكم في مزج الكل مع ما تحته.

غيّر تعبئة شكل من الأحمر #FF0000 إلى الأخضر #00FF00 فلن يتحرك أي عقد، ولن يتغير أي حد. القيمة #FF0000 هي rgb(255, 0, 0)، والقيمة #336699 هي rgb(51, 102, 153). لم يتغير إلا رقم واحد في الوصف، وما بقي هو الهندسة نفسها. هذا هو الفرق بين تعديل اللون وإعادة رسم الشكل.

الحدود مستقلة بالمثل. مسار سماكته وحدتان عند تكبير عشر مرات يُرسم بعرض 20 بكسلاً، والمحرر لا يعيد حساب الرقم، بل يعيد رسمه بالحجم الأكبر. ولذلك تصبح سماكة تبدو مناسبة في التحرير سميكة جداً في صفحة كبيرة.

الشفافية ليست لوناً أفتح

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

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

النص بين الحياة والمسار

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

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

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

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

تحرير المسار دون كسر الشكل

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

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

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

ما لا ينبغي توقعه

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

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

ترتيب مقترح للجلسة

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

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