تحويل SVG إلى PNG

حوّل الرسومات المتجهة إلى بكسلات بالمقاس الذي تحتاجه بالضبط — 100px أو 4000px، حادة دائمًا، مع الحفاظ على الشفافية، ودون تخزين أي شيء.

لا يُخزَّن أبدًا
لا طابور ولا انتظار
دون تسجيل ودون علامة مائية

كيف تعمل الأداة

أضف ملفات SVG

أفلِت أي عدد من ملفات .svg على الصفحة.

اختر مقاس الناتج

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

التنزيل

احفظ الملفات واحدًا تلو الآخر أو في ملف ZIP.

تثبيت دقة لم تكن مثبتة أصلًا

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

النص هو أكثر ما يسوء فيه هذا الأمر، والسبب يستحق الفهم. يقول ملف SVG «اكتب هذا النص بخط Helvetica Neue»؛ فإن لم يكن هذا الخط موجودًا على الجهاز الذي يعرضه، يُستبدل به خط آخر ويتغير التخطيط — فالعنوان الذي كان يتسع لمربعه يتجاوزه الآن. وخط الويب المشار إليه برابط لا يُحمَّل هنا إطلاقًا، لأن ملف SVG الذي يُعرض كصورة معزول عمدًا ولا يستطيع الاتصال بالشبكة. والحل هو ما يتعلمه كل مصمم في النهاية: حوّل النص إلى مسارات (outlines) قبل التصدير، فتصبح أشكال الحروف مسارات لا تحتاج إلى أي خط.

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

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

عندما تحتاج إلى شيء آخر

تعرض أداتا resvg وrsvg-convert ملفات SVG من سطر الأوامر مع مجموعة خطوط حقيقية متاحة، فيظهر النص بخطه المقصود بدلًا من بديل — والأمر rsvg-convert -w 512 in.svg -o out.png هو كل ما تحتاجه. أما Inkscape --export-type=png --export-dpi=300 فهو أكمل تطبيق للمواصفة على الإطلاق، ويتعامل مع المرشحات وأنماط المزج التي تقرّبها أدوات العرض الأخف.

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

الأسئلة الشائعة

ما المقاس الذي أختاره؟

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

هل تُحفظ الشفافية؟

نعم — خلفيات SVG شفافة ما لم يرسم الملف خلفية، ويحافظ PNG على ذلك.

لماذا يظهر ملف SVG بشكل مختلف عنه في برنامج التصميم؟

طريقة العرض هنا هي نفسها التي تعرض الشعار على موقعك. والخطوط المشار إليها بالاسم تُعرض بالخطوط المتوفرة لديك.

هل تُحمَّل الصور الخارجية داخل ملف SVG؟

الصور المضمّنة (data URI) تُعرض؛ أما الإشارات إلى روابط خارجية فلا تُجلب — فالتحويل لا يتصل بأي شيء خارجي.

هل تُخزَّن ملفاتي في أي مكان؟

لا — لا يُخزَّن أي شيء في أي مرحلة.

معلومة مفيدة: ملفات SVG التي تعتمد على صور خارجية أو خطوط ويب تُعرض بدونها. والرسوم المتحركة البرمجية في SVG تُعرض بحالتها الأولى.

أضِف هذه الأداة إلى موقعك

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