تحويل PNG إلى SVG: تتبّع الشعارات والأيقونات والرسوم الخطية

ملف PNG صورة نقطية: شبكة ثابتة من البكسلات، لكل منها لون وقيمة شفافية اختيارية. شعار بأبعاد 500 × 500 px يضم 250,000 مربع بالضبط ولا شيء غيرها، لذلك لا يمكن عند تكبيره إلى حجم ملصق إلا تكبير كل مربع أو طمس الفراغات بينها. أما SVG فصورة متجهة، أي ملف نصي يسرد أشكالًا مثل <path> و<circle> و<rect> مع إحداثيات وألوان تعبئة. يعيد المتصفح أو آلة القص رسم هذه الأشكال بالحجم الذي يحتاجه، ولهذا يبقى الشعار المتجه واضحًا على شاشة الهاتف وعلى لافتة معرض.

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

بعض المحولات تتجاوز الجزء الصعب. فهي تكتب ملف SVG صالحًا يحتوي عنصر <image> واحدًا مع PNG الأصلي مضمّنًا كنص base64، ما يجعل الملف أكبر من PNG بنحو الثلث. يُفتح الناتج كـ SVG ويجتاز فحص نوع الملف، لكنه يظل صورة بكسلات داخل غلاف متجه: كبّره وسترى الحواف المسننة نفسها، ولن تجد آلة القص أي مسارات تتبعها. افتح أي ملف SVG في محرر نصوص وابحث عن data:image/png؛ إن وُجدت هذه السلسلة فلم يتم تحويل أي شيء إلى متجهات.

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

الصور الفوتوغرافية هي الحالة المعاكسة. الصورة الشخصية أو صورة المنتج فيها آلاف الدرجات الدقيقة المتداخلة، وليس في الصيغة المتجهة طريقة فعالة لوصفها. اطلب 16 لونًا من أداة التتبع فتحصل على رسم مبسّط بتدرجات ظاهرة؛ واطلب 64 فتحصل على عشرات الآلاف من الأشكال الصغيرة في ملف أكبر بكثير من PNG، ومع ذلك لا يبدو كصورة فوتوغرافية. وتتحول التدرجات الناعمة والظلال والتوهجات بالطريقة نفسها إلى أكوام من الشرائط الرقيقة. والنص الصغير نقطة ضعف ثالثة: عند 10–12 px يمزج تنعيم الحواف كل حرف مع خلفيته، ولا تستطيع الأداة التمييز بين "e" و"o".

الدقة أهم من أي إعداد. تلائم الأداة كل منحنى مع درج البكسلات على طول الحافة، وكلما كان الدرج أدق كان المنحنى أصدق. إن صدّرت PNG بنفسك من Figma أو Canva أو Photoshop أو عرض تقديمي، فصدّره مجددًا بضعفي أو ثلاثة أضعاف حجم العرض؛ شعار بعرض 1500–2000 px يمنح الأداة مادة وافرة. لا تكبّر PNG صغيرًا بمكبّر يعمل بالذكاء الاصطناعي أولًا إلا إذا بدت النتيجة نظيفة عند تكبير 100 %، لأن ملمس الحواف المخترع يُتتبع بالأمانة نفسها كالحواف الحقيقية.

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

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

تطرح كل أداة تتبع الأسئلة الثلاثة نفسها، حتى لو اختلفت التسميات. الأول: كم لونًا نبقي. في محول PNG إلى SVG يختار وضع الألوان بين ملوّن وتدرّج الرمادي وأبيض وأسود، ويحدد عدد الألوان عدد العناقيد التي تُصنَّف إليها البكسلات، من 2 إلى 64. اجعله مطابقًا للعدد الذي دوّنته. فرفعه كثيرًا يجعل الأداة تفصل بكسلات الحواف المنعّمة في ألوان رقيقة مستقلة، فيظهر هالة باهتة حول كل شكل؛ وخفضه كثيرًا يدمج لونين من ألوان العلامة في لون واحد.

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

السؤال الثالث ينطبق على التتبع بالأبيض والأسود فقط: أين تُرسم الحدود بين الحبر والورق. تمتد العتبة من 1 إلى 254 والقيمة الافتراضية 128. تصبح البكسلات الأغمق من العتبة سوداء، والأفتح فارغة. لتوقيع بقلم حبر أزرق رفيع ارفعها نحو 160–180 لتبقى الخطوط الباهتة؛ ولرسم بقلم عريض على ورق رمادي قليلًا اخفضها نحو 100 كي لا تتحول خامة الورق إلى بقع. غيّر إعدادًا واحدًا في كل مرة وقارن، لأن التأثيرات تتداخل.

لا تكتفِ بالصورة المصغرة. افتح SVG في المتصفح وكبّره إلى 400–800 % عند أضيق منحنى، كتجويف حرف أو رأس نقطة. يُظهر التتبع الجيد أقواسًا ناعمة وزوايا حادة حيث يكون في التصميم زوايا؛ أما الضعيف فيُظهر تموجات وانبعاجات ورؤوسًا مستديرة. ثم افتح الملف في محرر متجهات مثل Inkscape أو Illustrator أو Figma وفعّل عرض المخطط أو العُقد. يحتاج شعار بسيط بلونين عادةً إلى بضع مئات من العُقد؛ فإن أظهر شعارك عدة آلاف فقد تتبعت الأداة التشويش، وسيكون تعديل المسارات أو قصها مرهقًا.

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

الخيار المجاني لسطح المكتب هو Inkscape. استورد ملف PNG، وحدده، ثم افتح Path > Trace Bitmap (Shift+Alt+B). تنتج أوضاع المسح الواحد مثل Brightness cutoff مسارًا أسود واحدًا، وهو مناسب للرسومات الخطية؛ أما أوضاع المسح المتعدد فتتتبع عددًا محددًا من الألوان أو درجات الرمادي على هيئة طبقات متراكبة. يعتمد التتبع بالأبيض والأسود في Inkscape على Potrace، وهي مكتبة تتبع أصدرها Peter Selinger عام 2001. أما Potrace نفسه فبرنامج بسطر الأوامر يقرأ PBM أو PGM أو PPM أو BMP بدلًا من PNG، ويتعامل مع الصور ثنائية اللون فقط، ويكتب SVG أو PDF أو EPS أو DXF، ما يجعله خيارًا جيدًا لبرمجة معالجة دفعات كبيرة من الصور الممسوحة ضوئيًا.

في Adobe Illustrator حلّت أداة Image Trace محل Live Trace القديمة منذ Illustrator CS6. ضع ملف PNG، وافتح Window > Image Trace وابدأ من إعداد مسبق مثل Black and White Logo أو 3 Colors أو 16 Colors، ثم اضبط Paths وCorners وNoise في القسم المتقدم. يبقى التتبع حيًا إلى أن تنقر Expand، فيتحول إلى مسارات عادية قابلة للتعديل. وإن لم يكن أي من البرنامجين مثبتًا لديك، فإن محوّلًا عبر المتصفح ينفذ العملية نفسها: تقليل الألوان، واكتشاف الحواف، وملاءمة المنحنيات؛ كما أن محول الصورة إلى SVG يقبل JPG وWebP وHEIC أيضًا ويمكنه كتابة EPS أو PDF أو DXF بدلًا من SVG.

على الويب، يُعد SVG توصية من W3C منذ عام 2001، وتعرضه كل المتصفحات الحالية في وسم <img> أو كخلفية CSS أو مضمّنًا في HTML، حيث يمكن حتى أن تتغير ألوانه عند تمرير المؤشر. وغالبًا ما يحل شعار متتبَّع واحد وصغير الحجم محل عدة مقاسات PNG لشاشات الريتينا. وفي آلات القص، SVG هو الصيغة التي يتوقعها Cricut Design Space وSilhouette Studio: يصبح كل شكل متتبَّع مسار قص، ويصل التتبع متعدد الألوان على هيئة طبقات منفصلة يمكنك قصها من فينيل بألوان مختلفة. أما قواطع الليزر وبرامج CNC فتفضل عادة DXF، الذي ينتجه PNG إلى DXF بإعدادات التتبع نفسها.

تطلب المطابع أعمالًا متجهة لأن آلة الطباعة أو جهاز رقمنة التطريز أو قاطع اللافتات يحتاج إلى حواف لا بكسلات، وغالبًا يفي SVG المتتبَّع بذلك للملصقات أو القمصان أو اللافتات. ومع ذلك يبقى تقريبًا: المنحنيات مُلاءمة بالتخمين، والألوان متوسطات من البكسلات، والنص محوّل إلى خطوط خارجية. لذا قبل تتبع شعار شركة، اسأل من صممه. فالمصمم أو الوكالة يملكان غالبًا الملف الأصلي AI أو EPS أو PDF أو SVG بمنحنيات دقيقة وألوان مسماة وخطوط، وإرساله لا يستغرق منهم دقيقة. التتبع هو الأداة المناسبة حين يُفقد الأصل، أو حين لا يبقى الشعار إلا على ورقة رسمية ممسوحة، أو حين يكون العمل رسمك الخاص.