كيف يمكنني تحويل SVG إلى PNG دون فقدان الخطوط؟
لماذا تكون مخرجات SVG إلى PNG بحجم مضاعف 2x، ولماذا يقوم متصفح الويب بإسقاط الخطوط الخارجية والصور المرتبطة بصمت أثناء العرض.
لا تحتوي SVG على بكسلات. إنها XML: مسارات، تعبئات، viewBox وربما عنصر <text> يسمي خطًا لا يحتوي عليه الملف فعليًا. تحويلها إلى PNG يعني اختيار شبكة بكسل ورسم تلك الأشكال عليها، لذا هناك شيئين يقرران ما إذا كنت تحب النتيجة. عدد البكسلات التي طلبتها، وما الذي كان مسموحًا للعارض بتحميله أثناء الرسم.
نقوم بتشغيل ذلك العرض داخل متصفحك. يتم إدخال الملف في عنوان URL blob، ويقوم عنصر <img> بتحميله، ثم يقوم المتصفح برسمه على OffscreenCanvas ويكتب الترميز PNG باستخدام مشفر WebAssembly. لا تحتوي هذه التطبيق على مسارات API ولا إجراءات خادم، لذا لا يجلس شعار غير مُصدَر في سلة مؤقتة لشخص ما في انتظار عملية الحذف. معظم محولات SVG إلى PNG تقوم بالتحميل أولاً وتعد بالتنظيف لاحقًا. تطبيقنا لا يرسل البايتات إلى أي مكان، وهو الهدف الكامل من نموذج الخصوصية.
ماذا يحدث فعليًا عندما يقوم المتصفح بتحويل SVG إلى صورة نقطية؟
يتم تسليم SVG الخاص بك إلى عنصر <img>، وتلك التفاصيل تدفع كل شيء آخر في هذه الصفحة. يتم تحميل SVG كصورة في وضع معالجة مقيد حيث لا يتم تنفيذ السكربتات ولا يتم جلب المراجع الخارجية، وهو ما تحدده قواعد توافق SVG 2 كأوضاع معالجة آمنة. بمجرد أن يتم حل التحميل، نقوم برسمه باستخدام drawImage على OffscreenCanvas، ثم نقرأ البكسلات مرة أخرى، ونقوم بالترميز باستخدام @jsquash/png ثم نقوم بتشغيل oxipng على المستوى 3 على البايتات. تلك الخطوة بلا فقد. تبقى القناة الشفافة طوال الرحلة، لذا يخرج الشعار الشفاف شفافًا.
ما هو الحجم الذي سيكون عليه PNG فعليًا؟
يقوم محولنا بالرسم بحجم مضاعف لحجم SVG الأصلي. SVG بحجم 500x500 يخرج بحجم 1000x1000. يشتريك المضاعف ملفًا بجودة شاشة ريتينا مجانًا، وهو أيضًا الشيء الذي يتعثر فيه الناس عندما تتطلب المواصفات عدد بكسلات دقيق. إذا كان المتصفح يبلغ عن عدم وجود حجم أصلي قابل للاستخدام، فإننا نستبدل 1024x1024 قبل المضاعفة، لذا يصل PNG إلى 2048x2048. تغطي مواصفات CSS Images لماذا يمكن أن يختفي حجم في المقام الأول: عنصر مستبدل بدون عرض أو ارتفاع أصلي يتراجع إلى حجم كائن افتراضي، و viewBox بمفرده يوفر نسبة بدون حجم مرفق. لذا قم بتعيين العرض والارتفاع على الجذر <svg> ليكون نصف هدفك. 256 في، 512 خارج.
| ما يعلنه الجذر <svg> | PNG الذي نكتبه |
|---|---|
| width="500" height="500" | 1000 x 1000 |
| width="256" height="256" | 512 x 512 |
| width="64" height="64" (أيقونة) | 128 x 128، عادةً صغيرة جدًا |
| لا يوجد حجم أصلي قابل للاستخدام | 2048 x 2048 (1024 بديل، مضاعف) |
لماذا خرج نصي بالخط الخاطئ؟
هذه هي الشكوى الأكثر شيوعًا وليست خطأ في المحول. تعتبر قاعدة @font-face التي تشير إلى عنوان URL .woff2 مرجعًا خارجيًا، لذا فإن الوضع الآمن يمنع ذلك التحميل قبل أن يبدأ. الخطوط المحملة بواسطة الصفحة حول الصورة لا تصل إلى الداخل أيضًا، لأن SVG في <img> هو مستند منفصل يقوم بحل الخطوط الخاصة به. ما تحصل عليه هو ما يمكن للجهاز مطابقته من قائمة عائلات الخطوط، والتي على جهاز كمبيوتر المراجع تعني بديلًا لم تختاره أبدًا. الحل هو التوقف عن شحن النص كنص. يسميه Illustrator Type > Create Outlines. يسميه Inkscape Path > Object to Path. كلاهما يحول كل حرف إلى مسار، وينمو الملف قليلاً ويتوقف العرض عن الاعتماد على الجهاز.
لماذا الصورة داخل SVG الخاص بي مفقودة؟
نفس القاعدة، عرض مختلف. إذا كان SVG الخاص بك يسحب صورة نقطية من خلال عنصر <image> بعنوان URL https مطلق، فلن يتم جلب ذلك العنوان، وسيعود PNG مع ثقب حيث يجب أن تكون الصورة. يعمل data: URI بشكل جيد، لأنه لا يوجد طلب شبكة متبقي ليتم حظره. هناك سبب ثانٍ للتضمين: صورة نقطية عبر أصل مختلف مرسومة في لوحة تلوثها، وقراءة البكسلات مرة أخرى تؤدي إلى ظهور SecurityError. على الأقل، يعلن هذا الفشل عن نفسه. المرجع المحظور صامت، وهو ما يكلف الناس بعد ظهر يوم. افتح الملف في محرر نصوص وابحث عن http قبل أن تقوم بالتحويل.
هل يمكنني تحويل PNG مرة أخرى إلى SVG؟
لا، ونحن لا نتظاهر بخلاف ذلك. يقوم محولنا بفك تشفير SVG ولا يمكنه ترميزه: تكتب المشفرات في البناء JPEG و PNG و WebP و AVIF و PDF، ولا يوجد أي من 24 زوجًا عبر 11 تنسيقًا له SVG كهدف. الانتقال من البكسلات مرة أخرى إلى المسارات هو تتبع، آلة تخمن أين تنتمي الحواف، وعلامة نصية تم تتبعها نادرًا ما تكون قريبة بما يكفي للشحن. أعد تصدير من الأصل إذا كنت لا تزال تملكه. إذا كنت بحاجة حقًا إلى الصورة النقطية بحجم أكبر، فإن موسعنا يعمل باستخدام Real-ESRGAN ويكتب دائمًا PNG: لقد أخذ ملفًا بحجم 400x269 إلى 1600x1076 بمعدل 4x.
كيف يمكنني تحويل SVG إلى مجموعة أيقونات؟
يأخذ مولد الأيقونات SVG مباشرة، وهو ما لا تقبله الضاغط، و مغير الحجم و القصاصات: تلك الثلاثة تقبل فقط JPEG و PNG و WebP و AVIF و GIF. يقوم برسم SVG الخاص بك على لوحة مربعة بحجم أكبر بعد أبعاده أو 512 بكسل، أيهما يفوز، لذا فإن أيقونة بحجم 64x64 لا تزال تحصل على لوحة بحجم 512 لتقليل الحجم منها. تخرج سبعة ملفات: favicon.ico تحتوي على 16 و 32 و 48، favicon-16x16.png، favicon-32x32.png، صورة apple-touch-icon.png بحجم 180 بكسل، android-chrome-192x192.png، android-chrome-512x512.png و site.webmanifest. لماذا لا يزال ذلك .ico يكسب 4.6 KB هو جدل منفصل. ملف واحد في كل مرة، حد 10 MB. المحول هو أداة الدفعة: 10 ملفات و 50 MB لكل عملية.
هل يجب أن أضغط PNG بعد ذلك؟
عادةً، ويكون الوضع أكثر أهمية من أي شريط تمرير. على PNG شفاف بحجم 942.4 KB بحجم 900x606، كانت المسار بلا فقد (oxipng المستوى 3) بحجم 383.9 KB. هذا قطع بنسبة 59%، وكل بكسل مطابق تمامًا للإدخال. أخذ المسار الخاص باللوحة (imagequant) نفس الملف إلى 98.3 KB، قطع بنسبة 90%، عن طريق تقليله إلى 256 لونًا. تعتبر فنون المتجهات المسطحة أفضل حالة لوضع اللوحة، حيث لا يحتوي الشعار الذي يحتوي على ستة تعبئات على شيء مثل 256 لونًا للتخلي عنه. كما أن الضغط يزيل جميع البيانات الوصفية. قم بتشغيل كلاهما في الضاغط واحتفظ بما يظل جيدًا.
قم بذلك بعد ذلك: افتح SVG في محرر نصوص، وابحث عن http لالتقاط الخطوط والصور المرتبطة، وحدد أي نص حي، ثم قم بتعيين العرض والارتفاع على الجذر <svg> ليكون نصف حجم الهدف الخاص بك وألقِ به على /convert/svg-to-png. إذا كان PNG موجهًا إلى صفحة ويب، أرسله مباشرة إلى الضاغط، و أرقام PNG مقابل WebP لملف يحتوي على شفافية تخبرك ما إذا كنت بحاجة لتغيير التنسيق على الإطلاق. إذا كان موجهًا إلى مستند، فإن ملاحظاتنا حول JPG إلى PDF تغطي حجم الصفحة التي ينتهي بها الأمر الصورة المحولة.