SVG إلى PNG: تحويل المتجه إلى صورة نقطية دون فقدان الجودة

تاريخ آخر تحديث: June 28, 2026

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

إجابة سريعة: هل يجب عليك تحويل SVG إلى PNG؟

احتفظ بـ SVG كمصدر وقم بتصدير PNG فقط عندما لا يتمكن نظام مستهدف من استخدام بيانات المتجهات (vector data). تتطلب عملاء البريد الإلكتروني، وحقول الصور في أنظمة إدارة المحتوى القديمة، وبعض منصات الإعلانات، وعدد قليل من مسارات الطباعة ملفاً نقطياً ثابتاً. بالنسبة لأيقونة الويب، أو أيقونة الموقع المفضل (favicon)، أو أي شيء قابل للتوسع، ابقَ في SVG. عندما تقوم بالتحويل، قم بتصيير PNG عند ضعف أقصى عرض للعرض ليبقى حادًا على الشاشات عالية الكثافة (high-DPI screens)، وحافظ على قناة ألفا للشفافية، وأرشفة ملف .svg الأصلي بجانب التصدير.

ما الفرق الفعلي بين SVG و PNG؟

SVG هو ملف نصي مليء بعناصر <path> و <rect> و <circle>. يقوم المتصفح أو المُصيّّر (renderer) برسم هذه الأشكال عند أي دقة تطلبها، لذا تأتي أيقونة بحجم 16px وشعار رئيسي (hero) بحجم 1600px من نفس المصدر دون فقدان الجودة. يحدد مواصفات SVG2 هذا النموذج، بما في ذلك viewBox الذي يحدد مساحة الإحداثيات.

أما PNG فهو حاوية نقطية (raster container). يخزن شبكة بكسلات دقيقة بالإضافة إلى قناة ألفا اختيارية للشفافية، ويدعم الضغط غير الفاقد للمعلومات (lossless compression). يغطي مرجع تنسيق PNG في libpng.org هيكل الكتل (chunk structure) بعمق. لا "يعرف" ملف PNG أبداً أنه جاء من ملف متجه؛ بل يعرف فقط عرضه وارتفاعه الخاصين به.

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

كيف يعمل التحويل إلى صورة نقطية (rasterization) فعلياً؟

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

هذا الرقم وحده يقرر كل شيء. إذا قمت بتصيير نفس SVG عند 128px سيبدو حادًا بحجم أيقونة الموقع المفضل ومغبرًا على شاشة 4K. وإذا قمت بتصييره عند 2048px فسيبدو حادًا في كل مكان لكن الملف سيكون أثقل. لا يملك SVG "دقة" يمكن أن تضيع؛ أنت ببساطة تختار عدد البكسلات التي يجب تضمينها.

لقد حولت أيقونة واحدة إلى ثلاثة عروض لاختبار ذلك: كان التصدير بحجم 64px هو 4 KB ونظيفًا على شريط الأدوات، وكان التصدير بحجم 512px هو 24 KB وبدا صحيحاً عند 2x، وكان التصدير بحجم 2048px هو 142 KB ولا يمكن تمييزه عن المتجه بالحجم الكامل. كان مصدر SVG يبلغ 1.2 KB طوال الوقت. الدرس المستفاد هو أن حجم PNG، وليس SVG، هو ما تقوم بضبطه.

التخفيف من الحواف (Anti-aliasing) هو الجزء الآخر من العمل. حيث يلتقي حافة قطرية أو منحنية بشبكة البكسلات، يقوم المُصيّّر بدمج لون الحافة مع الخلفية حتى لا تبدو الخطوط مسننة. ولهذا السبب يمكن أن يبدو خط بحجم 1px ضبابيًا إذا قمت بالتصيير صغيراً جداً، ولأن الخلفيات الشفافة مهمة: التخفيف من الحواف يمزج ضد أي شيء يقع خلف الشكل.

متى يجب عليك الاحتفاظ بـ SVG بدلاً من ذلك؟

احتفظ بـ SVG عندما يتعين على الصورة أن تتوسع أو تبقى صغيرة. هذه الحالات نادراً ما تحتاج إلى PNG:

• أيقونات الويب ورموز واجهة المستخدم، حيث يتم تصيير نفس الأصل عند 16px وعند 48px.
• الشعارات في رأس الموقع التي تعيد تغيير حجمها مع مساحة العرض (viewport).
• المخططات والرسوم البيانية التي يجب أن يظل نصها حادًا عند التكبير.
• أي مكان قد تقوم فيه بإعادة تحرير العمل الفني لاحقاً.

تتعامل المتصفحات الحديثة مع SVG مضمن، كمصدر <img>، وكخلفية CSS دون مشاكل. يؤكد مرجع أنواع الصور من MDN دعم SVG الواسع عبر المحركات الحالية. إذا كان سبب تحويلك الوحيد هو "PNG يبدو أكثر أمانًا"، فأنت عادةً ما تضيف وزن ملف لا شيء.

متى تحتاج فعلاً إلى PNG؟

قم بالتحويل عندما يرفض الوجهة المتجهات أو عندما تريد نسخة نقطية محمولة ومجمدة:

• رسائل البريد الإلكتروني بصيغة HTML، حيث يقوم معظم العملاء بإزالة SVG بالكامل أو حظره.
• حقول أنظمة إدارة المحتوى القديمة أو الأدوات الخارجية التي تقبل فقط التحميلات النقطية.
• مسارات الطباعة أو PDF التي تتوقع صورة ثابتة عند DPI معروف.
• المشاركة إلى منصات تعيد ترميز التحميلات وقد تشوه SVG.
• مجموعات أيقونات الموقع المفضل (favicon)، التي لا تزال تتوقع تحويلات PNG بجانب أي SVG.

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

كيف تقوم بتحويل SVG إلى PNG عبر سطر الأوامر؟

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

يُعد rsvg-convert (librsvg) هو المُصيّّر الأكثر قابلية للتنبؤ الذي استخدمته. إنه يحترم viewBox، ويتعامل مع الخطوط بشكل نظيف، ويحافظ على الشفافية افتراضياً.

## تثبيت librsvg
brew install librsvg            # macOS
sudo apt install librsvg2-bin   # Debian/Ubuntu

## التصدير عند 2x من عرض العرض، خلفية شفافة
rsvg-convert -w 1024 -h 1024 input.svg -o output.png

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

## خلفية شفافة، حجم ثابت
magick -background none input.svg -resize 1024x1024 output.png

sharp (Node.js) هو ما أعتمد عليه في نصوص البناء (build scripts). إنه سريع، ويجري تدفق البيانات بشكل جيد، ويتناسب مع مسار نظام التصميم.

import sharp from "sharp";

await sharp("input.svg", { density: 384 })
  .resize(1024, 1024)
  .png()
  .toFile("output.png");

يعد خيار density مهمًا في sharp: فهو يحدد DPI الداخلي المستخدم قبل تغيير الحجم، والقيمة الأعلى تمنع الخطوط الرفيعة من الاختفاء في التصديرات الصغيرة.

كيف تحافظ على الشفافية عند التحويل؟

يدعم PNG قناة ألفا 8-بت، لذا فإن الشفافية هي ميزة أساسية. السبب في أن التصديرات تعود أحيانًا بمربع أبيض هو أن SVG نفسه، أو المحول (converter)، قد أضاف ملء خلفية معتمة.

تحقق من شيئين. أولاً، تأكد من عدم وجود <rect> يملأ اللوحة بالكامل في ملف SVG. ثانياً، أخبر المُصيّّر صراحةً بعدم رسم أي شيء:

• باستخدام rsvg، احذف أي علامة خلفية وستبقى شفافة.
• باستخدام ImageMagick، مرر -background none قبل الإدخال.
• باستخدام sharp، لا تستدعِ .flatten() ولا تحدد .background().
• باستخدام cairosvg، اضبط لون الخلفية على "لا شيء" (none).

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

ما هو حجم ونمط الألوان الذي يجب أن يكون عليه PNG؟

اختر أبعاد البكسل من أكبر مكان ستظهر فيه الصورة، ثم ضاعفها للوصول إلى دقة Retina. طابق نسبة العرض إلى الارتفاع مع viewBox الخاص بـ SVG حتى لا يتم تمديد أي شيء.

بالنسبة لنمط الألوان، استخدم RGB بـ 8-بت لأعمال الشاشة. يدعم PNG أيضاً النمط المفهرس (palette) و 16-بت لكل قناة، ولكن 8-بت RGB يغطي الشعارات والأيقونات وفن واجهة المستخدم بأصغر ملف منطقي. إذا احتجت لاحقاً إلى أصل ويب أصغر، ينطبق سير عمل ضغط الصور دون فقدان الجودة بعد التصدير، ويمكنك مقارنة الحاويات باستخدام مقارنة JPG و PNG و WebP.

ما الذي يحدث عندما تقوم بالتحويل إلى صورة نقطية بحجم صغير جداً؟

الفشل الكلاسيكي هو التصدير عند 1x ثم تكبير PNG في CSS. نظرًا لأن البكسلات ثابتة بالفعل، يقوم المتصفح باختراع البكسلات المفقودة وتصبح الحواف ناعمة. لا يمكنك استعادة هذا الحدة من PNG؛ يجب عليك إعادة التصيير من SVG.

انتبه لهذه المشاكل المحددة:

• تختفي الخطوط الرفيعة عندما يكون العرض الناتج قريبًا من وزن الخط.
• يتحول النص الصغير إلى كتلة طينية تحت ما يعادل 16px تقريباً.
• تتشتت التفاصيل الدقيقة في ضوضاء على التدرجات اللونية ذات التباين المنخفض.
• تنقطع الزوايا المستديرة بشكل غير متساوٍ بدون تخفيف من الحواف (anti-aliasing).
• إزاحات نصف بكسل تنتج حدود 1px ضبابية.

الحل في كل حالة هو نفسه: أعد التصدير من SVG بحجم أكبر. لهذا السبب فإن الاحتفاظ بالملف المتجه المصدر ليس خيارياً. إذا كانت نسختك الوحيدة هي PNG بحجم 256px، يمكن أن يساعد تكبير الحجم باستخدام دليل رفع دقة الصور في صورة فوتوغرافية، لكنه لا يستطيع إعادة بناء حواف المتجه الحادة التي أضعتها.

كيف تقوم بتحويل مجلد من ملفات SVGs دفعة واحدة؟

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

mkdir -p png
for svg in icons/*.svg; do
  name=$(basename "$svg" .svg)
  rsvg-convert -w 512 -h 512 "$svg" -o "png/${name}.png"
done

في Node، يتعامل sharp مع الدليل باستخدام Promise.all وهو سريع بما يكفي لبضع مئات من الأيقونات. احتفظ بحجم واحد لكل تشغيل وقم بإنتاج الأحجام الإضافية في تمريرات منفصلة، حتى لا يؤدي ملف فاشل واحد إلى إجهاض المجموعة بأكملها.

هل يمكنك العودة من PNG إلى SVG؟

ليس بأي طريقة صادقة. PNG هو شبكة بكسلات مكتملة. من الممكن تتبعها مرة أخرى إلى مسارات متجهة باستخدام أدوات التتبع الآلي (autotrace tools)، لكن النتيجة هي تقريب: تحصل المنحنيات على نقاط ارتكاز إضافية، ويصبح النص مخططاً تفصيلياً (outlines)، ويتم تخمين التفاصيل الدقيقة. لن يطابق المصدر المتجه الأصلي أبداً.

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

قائمة مراجعة نهائية قبل التصدير

• ملف .svg الأصلي مؤرشف ولم يتم الكتابة فوقه.
• عرض التصدير هو على الأقل ضعف أكبر عرض للعرض.
• نسبة العرض إلى الارتفاع تطابق viewBox الخاص بـ SVG.
• الخلفية شفافة ما لم تقم بتسطيحها عمداً.
• الحواف مخففة من الحواف (anti-aliased) ولا تزال الخطوط الرفيعة مرئية.
• يتم ضغط الملف بعد التصدير إذا كان سيُرسل إلى الويب.

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

الأسئلة المتكررة

متى يجب عليّ تحويل SVG إلى PNG؟

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

كيف أختار دقة PNG؟

طابق حجم العرض عند 1x أو 2x (لـ retina). نظرًا لأن SVG مستقل عن الدقة، فإنك تحوله إلى صورة نقطية عند أي حجم بكسل تحتاجه — قم بالتصيير عند ضعف حجم العرض للحصول على حدة على الشاشات عالية الكثافة.

هل يؤدي تحويل SVG إلى PNG إلى فقدان الجودة؟

لا - أنت تقوم بتحويل المتجه إلى صورة نقطية بالدقة المستهدفة، لذا فإن PNG يكون حادًا بقدر الحجم الذي تصيّر عنده. سيأتي فقدان الجودة فقط من التصيير عند دقة منخفضة جداً. قم بالتصيير عند 2x لـ retina.

ما هو تحويل سطر الأوامر؟

ImageMagick: magick input.svg -density 144 -resize 512x512 output.png. يتحكم -density في دقة التصيير. rsvg-convert أو متصفح غير مرئي (headless browser) هما بديلان لملفات SVG المعقدة. راجع دليل المحول.

هل يمكنني تحرير SVG بعد التحويل إلى PNG؟

لا - بمجرد تحويله إلى صورة نقطية PNG، تصبح الأشكال المتجهة بكسلات وتفقد قابلية التحرير. قم بتحرير SVG (فهو XML قائم على النص) وأعد التصيير. احتفظ بـ SVG كمصدر قابل للتحرير؛ أما PNG فهو مخرج ثابت.

هل يمكنني تحرير SVG؟

نعم - SVG هو XML قائم على النص، لذلك يمكنك تحريره في أي محرر نصوص أو محرر متجهات (Illustrator, Inkscape, Figma). هذه هي الميزة الرئيسية على PNG: يظل SVG قابلاً للتحرير ومستقلاً عن الدقة. قم بتحرير SVG وأعد التصيير إلى PNG كلما احتجت إلى مخرج نقطي ثابت.

حقوق الصور

• فن متجه هندسي تجريدي باللونين الأزرق والأخضر — صورة بواسطة Steve A Johnson على Pexels
• إعداد جهاز كمبيوتر محمول ولوح رسم على مكتب مصمم ملون — صورة بواسطة Alex Andrews على Pexels
• جهاز كمبيوتر محمول على مكتب خشبي في مساحة عمل نظيفة لتصميم الشعارات — صورة بواسطة Tom Swinnen على Pexels
• لقطة مقربة لأيادٍ ترسم بقلم على جهاز لوحي — صورة بواسطة Berna على Pexels

افتح أداة Imagic AI ذات الصلة