كيفية استيراد وتعديل ملفات SVG في Figma، Canva، أو WordPress؟

لديك الآن ملف SVG. وماذا بعد؟

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

ملف SVG من PixelToPath ليس صورة ثابتة. إنه مجموعة من المسارات: كل شكل له تعبئة، وربما حدود. تغيير اللون الأزرق للشعار إلى العنابي، عزل الرمز، أو تكبيره لقصة (Story) بحجم 1080x1920: كل هذا يتم في الأداة التي تستخدمها بالفعل، دون الحاجة للعودة إلى Illustrator.

لماذا تحب أدوات Figma و Canva و WordPress هذه الصيغة

تصبح ملفات PNG و JPG بمجرد استيرادها صوراً نقطية (bitmaps). إعادة تلوين شعار PNG في Figma تعني وضع طبقة فوقه، وليس تغيير لون المسار. لن يوفر Canva لوحات ألوان. وسيقدم WordPress ملفاً ثقيلاً وضبابياً على شاشات Retina. ملف SVG يحل هذه المشاكل الثلاث دفعة واحدة.

بشكل عملي، يوفر لك ملف SVG الصادر من PixelToPath ما يلي:

• مسارات قابلة للتعديل: لون واحد لكل شكل، قابل للتعديل في Figma (التعبئة) أو Canva (لوحات الألوان)
• ملف خفيف، أقل بكثير من حد الـ 3 ميغابايت في Canva، وأسرع في التحميل على موقع WordPress من ملف PNG بدقة @2x
• نفس مستوى الوضوح كأيقونة مفضلة (favicon)، أو كغلاف على LinkedIn، أو كلافتة إعلانية (kakemono): ملف واحد فقط
• مخرج نهائي يمكنك إرساله للعميل: يفتحه في الأداة التي يمتلكها، وليس بالضرورة في Creative Cloud

Figma: استيراد ملف SVG وتغيير الألوان

يستورد Figma ملف SVG كمجموعة من المتجهات، وليس كصورة. وهذا هو بيت القصيد: يظل كل شكل طبقة يمكنك إعادة تلوينها، نقلها، أو إخفاؤها.

1. قم بتنزيل ملف .svg من PixelToPath وافتح ملفك في Figma.
2. اسحب الملف من متصفح الملفات مباشرة إلى مساحة العمل (canvas). طريقة أخرى: ملف ← استيراد، أو اختصار Ctrl+Shift+K (أو Cmd+Shift+K في Mac) لوضع ملف SVG.
3. تظهر الطبقة كمجموعة. انقر نقراً مزدوجاً للدخول إليها، أو انقر بزر الماوس الأيمن ← فك التجميع (Shift+Ctrl+G / Shift+Cmd+G) إذا كنت تريد التعامل مع الأشكال واحداً تلو الآخر.
4. حدد مساراً. في اللوحة اليمنى، في قسم التعبئة (Fill)، انقر على لوحة الألوان: الرمز السداسي (hex)، لوحة الألوان، أداة القطارة. سيتغير الشكل بالكامل مع بقاء الحواف حادة.
5. بالنسبة للشعار أحادي اللون، حدد جميع الأشكال في المجموعة وطبّق لوناً واحداً. ثم قم بتصديره كـ SVG أو PNG أو PDF من قسم التصدير (Export) إذا لم يعد المخرج النهائي بحاجة ليكون متجهاً.

إذا عرض Figma صورة مسطحة بدلاً من طبقات متجهة، فهذا يعني أن الملف كان يتضمن صورة نقطية (PNG مضمن). ليس هذا هو الحال مع تصديرات PixelToPath باستخدام الإعداد المسبق "أبيض وأسود" أو "ملصق". أعد تحويل الصورة الأصلية باستخدام أحد هذين الوضعين، وليس وضع "صورة".

Canva: إدراج ملف SVG وإعادة التلوين

يقبل Canva ملفات SVG في النسختين المجانية والاحترافية. تعمل إعادة التلوين عندما يكون الملف بسيطاً: مساحات لونية مسطحة، عُقد قليلة، وبدون تدرجات لونية. هذا بالضبط ما ينتجه PixelToPath في وضع "ملصق" أو "أبيض وأسود".

1. في Canva، افتح تصميماً. من اللوحة اليسرى ← التحميلات ← تحميل الملفات. اختر ملف .svg الخاص بك (أقل من 3 ميغابايت؛ تصدير PixelToPath أقل من ذلك بكثير).
2. بمجرد وجود الملف في التحميلات، اسحبه إلى الصفحة. قم بتغيير حجمه من خلال المقابض: يظل المتجه حاداً، حتى في صيغة القصة (story) أو A4.
3. انقر على ملف SVG. في شريط الأدوات، ستظهر لوحات ألوان، واحدة لكل لون في الملف. انقر على إحدى لوحات الألوان، ثم اختر اللون الجديد: سيقوم Canva بتطبيقه على جميع الأشكال التي تحمل ذلك اللون.
4. إذا لم تظهر أي لوحة ألوان، فإن ملف SVG معقد جداً (تدرجات، ألوان كثيرة جداً، مسارات من نوع "صورة"). عُد إلى PixelToPath، انتقل إلى وضع "ملصق" أو "أبيض وأسود"، أعد التصدير، ثم أعد الاستيراد.

يوصي Canva باستخدام ملف تعريف SVG 1.1، مع تجميع الأشكال ذات اللون نفسه، وبدون أي نسيج (texture). إعدادات الشعار المسبقة في PixelToPath تحترم بالفعل هذه القيود. لا حاجة للمرور بـ Illustrator "لتجهيز" الملف.

WordPress: السماح برفع SVG دون فتح ثغرة أمنية

يرفض WordPress ملفات SVG افتراضياً، وهذا ليس عبثاً. ملف SVG هو عبارة عن XML: يمكن أن يحتوي على JavaScript، كيانات خارجية، أو حمولة XSS. يمكن لزائر، أو لحساب محرر مخترق، يقوم برفع ملف SVG خبيث أن ينفذ تعليمات برمجية في لوحة الإدارة. ومن هنا جاء الحظر. يجب السماح بالصيغة وتنظيف الملف.

لا تقم فقط بإضافة image/svg+xml في ملف functions.php. بدون تنظيف الملف، فإنك تفتح ثغرة أمنية. الطريقة الآمنة: إضافة (plugin) يتم تحديثها باستمرار تقوم بإزالة السكريبتات وأحداث onload وكيانات XML. تُعد إضافة Safe SVG (من تطوير 10up) خياراً ممتازاً مع أكثر من مليون تثبيت.

1. في لوحة إدارة WordPress: إضافات ← أضف جديداً. ابحث عن Safe SVG (المطور: 10up). قم بتثبيتها وتفعيلها.
2. اذهب إلى الإعدادات ← وسائط. اقتصر رفع SVG على المديرين (أو الأدوار الموثوقة). لا تفتح المجال لجميع حسابات الكُتّاب إذا كان للموقع عدة مساهمين.
3. وسائط ← أضف جديداً. قم برفع ملف .svg من PixelToPath. تقوم الإضافة بتنظيفه عند الاستيراد وتعرض معاينة في المكتبة، وهو ما لا يفعله WordPress بشكل أصلي.
4. في مقال أو صفحة، أدرج مكوّن "صورة" واختر ملف SVG. بالنسبة لشعار الترويسة، استخدم "تخصيص" / "هوية الموقع"، أو مكوّن "صورة" في قالب المظهر (محرر الموقع).
5. طريقة المطورين: لا تستخدم مكتبة الوسائط. ضع الملف في المجلد الخاص بالقالب (assets/logo.svg) وقم بالإشارة إليه في القالب، أو قم بتضمينه مباشرة (inline) لتنسيقه باستخدام CSS. لا يوجد رفع للملفات، وبالتالي لا توجد مساحة هجوم عبر مكتبة الوسائط.

يمكن لإضافة Safe SVG أيضاً تقييد من لديه صلاحية الرفع. حافظ على تحديث الإضافة: تنظيف الملف هو الرقابة الحقيقية، وليس مجرد تحديد خيار "السماح بـ SVG".

أي ملف SVG من PixelToPath يجب استخدامه في هذه الأدوات؟

تقبل الأداة ما تقدمه لها. إعداد مسبق سيء ستظهر عيوبه عند الاستيراد: أشكال كثيرة جداً، ألوان غير قابلة للتعديل، أو ملف مرفوض.

• شعار، أيقونة، أو حروف: "أبيض وأسود" أو "ملصق". هذه مساحات لونية مسطحة، يمكن لـ Figma و Canva إعادة تلوينها بنقرة واحدة.
• تجنب وضع "صورة" إذا كنت تنوي تعديل الألوان. يُنشئ هذا الوضع عدداً كبيراً من الأشكال الصغيرة؛ وغالباً لن يعرض Canva أي لوحة ألوان مفيدة.
• قم بقص الصورة الأصلية قبل تحويلها: خلفية أقل، وعُقد أقل، وملف SVG أوضح في طبقات Figma.
• نسخة لكل استخدام: ملف SVG أحادي اللون لـ Figma (الهوية البصرية)، ملف SVG ملون لـ Canva (لمنشور)، ونفس الملف المنظف لـ WordPress (الترويسة).

أين يغير سير العمل هذا يومياتك

بمجرد دخول ملف SVG إلى الأداة، تتوقف عن إعادة التحويل في كل مرة تحتاج فيها لنسخة جديدة:

• الهوية البصرية في Figma: يصبح ملف PNG الخاص بالعميل مكوّناً يمكنك إعادة تلوينه (لون أساسي، معكوس، أحادي اللون) دون إعادة رسمه
• منشورات Canva: ملف SVG واحد، ستة ألوان للحملة، قصص (stories) ومنشورات دوارة (carousels) فائقة الدقة
• شعار WordPress: ملف واحد في الترويسة، حاد الوضوح على الجوال وشاشات Retina، وأخف من ملف PNG القديم
• تسليمات العمل المستقل (Freelance): تقوم بتسليم العميل ملف SVG مع دليل استخدام Figma / Canva. لن يبقى العميل عالقاً
• أيقونات الواجهة: قم باستيرادها إلى Figma دفعة واحدة، قم بمحاذاتها على شبكة 24 بكسل، ثم قم بتصدير المجموعة

احتفظ بملفات PNG للصور الفوتوغرافية. لكل شيء يجب أن يتغير لونه أو يظل حاداً، فإن ثنائي PixelToPath + Figma / Canva / WordPress يفي بالغرض.