كيفية تعديل ملفات SVG عبر الإنترنت في المتصفح

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

هذا ما يقدمه محرر المتجهات: يفتح SVG و PDF وملفات .ai، ويحرر هندسة Bézier، ويصدّر عبر تنزيل المتصفح. لا حساب، ولا مكتبة مستندات عندنا؛ الحفظ والتصدير يسلّمان الملف إلى متصفحك.

ما الذي يفتحه المحرر بالفعل

داخل الملف يعمل المحرر على العقد ومنحنيات التحكم، وعلى الأشكال الأساسية والنصوص والتدرجات والطبقات، وعلى عمليات الدمج والقص. التصدير يشمل SVG و PDF و PNG و JPEG و WebP.

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

EPS خارج المعادلة. المحرر لا يستورده ولا يصدّره، وهذا غياب في هذه البنية لا خلل ينتظر إصلاحاً.

من الفتح إلى التنزيل

المحرك تطبيق WebAssembly كبير، فيُنزّل عند أول تشغيل فقط. لا شيء يُنزّل قبل أن تضغط زر التشغيل؛ بعد ذلك اختر ملفك من جهازك.

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

لا حفظ تلقائي ولا نسخة سحابية. حين تغلق التبويب تنتهي الجلسة، وما لم تكن قد نزّلت الملف فالعمل ضائع. اجعل التنزيل عادة بعد كل تعديل مهم، لا بعد التعديل الأخير وحده.

حدود تصادفها في أول جلسة

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

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

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

إعدادات تستحق ضبطها قبل أول حركة

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

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

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

أخطاء تتكرر

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

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

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

ابدأ بملف صغير

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

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