تحويل SVG إلى PNG

SVG إلى PNG

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

كيفية تصدير SVG بصيغة PNG

  1. 1

    حمّل SVG

    ارفع ملفا أو الصق ترميز SVG مباشرة. يعرض المتصفح CSS المضمن وكتل <style>.

  2. 2

    اضبط التحجيم

    اختر عامل تحجيم من 1x إلى 10x. يأتي حجم الناتج من عرض SVG أو ارتفاعه أو viewBox قبل التحجيم.

  3. 3

    راجع المعاينة الشفافة

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

  4. 4

    نزّل ملف PNG

    احفظ image.png من canvas داخل المتصفح. لا يُرفع ترميز SVG إلى أي خادم.

أحجام مخرجات شائعة وأماكن استخدامها

الوجهة حجم PNG المعتاد ملاحظات
أصل أيقونة تطبيق (iOS/Android) 1024 × 1024 استخدم SVG مربعا؛ غالبا ما تطلب المتاجر خلفية غير شفافة
بطاقة OG أو بطاقة اجتماعية 1200 × 630 ضع خلفية العلامة داخل SVG قبل التصدير
ترويسة README أو توثيق عرض 1280-1600 أبقِ الشفافية حتى تعمل مع سمات GitHub الفاتحة والداكنة
عنصر لشريحة أو عرض تقديمي عرض 1920 صدّر عند 2x إذا كان سيُعرض على شاشة كبيرة أو سيُكبّر
ترويسة بريد إلكتروني أو صورة رئيسية عرض 600-1200 اضغط النتيجة واجعلها دون 200 KB متى أمكن

لماذا قد يبدو SVG مختلفا بعد التصدير

  • أبعاد كسرية. التصدير عند 33.5 px يفرض تقريبا على مستوى جزء من البكسل. استخدم أرقاما صحيحة، ويفضل مضاعفات 8.
  • خطوط مفقودة. إذا أشار SVG إلى خط غير متاح في المتصفح، فسيستبدله المتصفح وقد يتغير التباعد. حوّل النص إلى مسارات للحصول على تصدير أكثر ثباتا.
  • مراجع خارجية. قد تُحظر <image href="..."> التي تشير إلى عنوان بعيد أو تجعل canvas غير قابل للتصدير. ضمّن الأصل بصيغة base64 قبل التحويل.
  • المرشحات والظلال. تُحسب مرشحات التمويه والظل المسقط بوحدات المستخدم، لذلك قد تبدو الظلال أنعم في تصدير 3x. عدّل قيم المرشح في SVG المصدر عند الحاجة.
  • لا يوجد حجم صريح. إذا لم يتضمن SVG عرضا أو ارتفاعا أو viewBox، تستخدم الأداة 300 × 150 px قبل تطبيق عامل التحجيم.

نصائح سريعة

  • صدّر عند 2x أو 3x للشاشات عالية الكثافة، ثم دع CSS أو التخطيط يعرض PNG بحجم أصغر.
  • حافظ على الشفافية للأيقونات والشعارات؛ أضف مستطيلا إلى SVG أولا إذا كانت الوجهة تحتاج إلى لون مصمت.
  • مرّر PNG عبر ضاغط صور لإزالة البيانات الوصفية وإعادة ترتيب اللوحة.
  • للأعمال الفنية الكبيرة جدا، خفّض عامل التحجيم قبل التنزيل لأن PNG يخزن كل بكسل.

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

تستخدم الأداة عامل تحجيم. اضبط عرض SVG أو ارتفاعه أو viewBox أولا، ثم اختر التحجيم الذي يعطي حجم PNG المطلوب.

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

SVG تعليمات رسم، أما PNG فهو شبكة بكسلات. تصدير 4000 × 4000 px يخزن 16 مليون بكسل مع بيانات RGBA، لذلك يمكن أن يقلل خفض التحجيم الحجم كثيرا.

لا. تتم قراءة الملف أو الترميز الملصق وعرضه محليا عبر HTML canvas داخل متصفحك.

أدوات ذات صلة