طريقة استخدام PNG إلى SVG
- أفلت سبرايت بصيغة PNG أو GIF أو WebP.
- اختر وضع الإخراج: مسار لكل لون (الأصغر)، أو مستطيلات مدمجة، أو مستطيل لكل بكسل.
- اضبط حجم العرض؛ يبقى الـ viewBox بالبكسل، لذا يتدرّج SVG بسلاسة في كل الأحوال.
- أضف خلفية مُصمَتة إن أردت.
- نزّل ملف .svg أو انسخ الكود.
ما الذي تحصل عليه
- SVG مع shape-rendering="crispEdges"
- مقارنة حجم الملف لكل وضع
- كود SVG المصدري قابل للنسخ
نصائح من تجربتنا في صنع الألعاب بها
- وضع المسارات هو الأصغر عادةً، وهو ما تحتاجه للويب والأيقونات وآلات القص بالليزر.
- وضع المستطيلات هو الأسهل للتعديل يدويًا أو للتحريك بـ CSS، لأن كل كتلة عنصر مستقل.
- أبقِ السبرايت صغيرًا. سبرايت 64×64 يتحوّل فورًا، أما صورة شبيهة بالفوتوغرافية بآلاف الألوان فتنتج SVG ضخمًا.
- البكسلات شبه الشفافة تتحوّل إلى fill-opacity، فتنجو الظلال الناعمة من التحويل.
حالات الاستخدام
- استخدام السبرايت كأيقونات أو شعارات حادة على موقع ويب
- طباعة فن البكسل بأحجام كبيرة (ملصقات جدارية، ستيكرات، منتجات)
- استيراد فن البكسل إلى Figma أو Illustrator أو Inkscape
- القص بالليزر وقص الفينيل من تصاميم البكسل
الأسئلة الشائعة
هل التحويل بلا فقدان؟
نعم. كل بكسل يغطيه شكل واحد بالضبط بلونه وقيمة ألفا الدقيقة. حوّل SVG إلى صورة نقطية بالحجم الأصلي وستستعيد ملف PNG الأصلي.
لماذا لا نتتبّع الصورة ببساطة؟
أدوات التتبّع تنعّم الحواف وتحوّلها إلى منحنيات، وهذا يفسد فن البكسل. هذا المحوّل يحافظ على حواف حادة بزاوية 90° على شبكة البكسل.
أي وضع ينتج أصغر ملف؟
المسارات. المستطيلات ذات اللون الواحد تتشارك عنصر path واحدًا بأوامر نسبية قصيرة. تعرض الأداة حجم كل وضع لتقارن بينها.
هل سيبدو ضبابيًا عند التكبير؟
لا. يستخدم SVG الخاصية shape-rendering="crispEdges" وإحداثيات صحيحة، فتبقى الحواف حادة بأي تكبير.
هل هناك حد للحجم؟
حتى 512×512 بكسل. الصور الأكبر تنتج ملفات SVG أضخم من أن تكون مفيدة.
هل تُرفع صورتي؟
لا، يتم التحويل داخل متصفحك.