الشعار يصل في ملفين: logo.svg في 3 كيلو بايت و logo.png في 40 كيلو بايت. كلاهما يبدوان متماثلين في علامة تبويب المتصفح. قم بتفجيرهما لملء شاشة جهاز عرض وسيظل واحد فقط حادًا. حاول تحميلها إلى ملف تعريف اجتماعي ويتم قبول الملف الآخر فقط. وإذا كان كل ما لديك هو PNG، الأدوات التي تعد بـ "؛ تحويل PNG إلى SVG"؛ قم بإعادة شيء يعد SVG من الناحية الفنية ولكن ليس الملف الذي كان المصمم الخاص بك سيصنعه.
يشرح هذا الدليل الفرق بين التنسيقين من حيث ما يخزنه كل ملف، ومتى يتم استخدامه، وماذا يحدث عند عرض SVG إلى وحدات بكسل، وما الذي يمكن أو لا يمكن استرداده من تتبع PNG إلى أشكال متجهة. يتضمن أرقامًا حقيقية من محرك التتبع الموجود خلف محولات Toolz، ويقع أسفل محور أدوات الصورة.
ليرة تركية؛DR: SVG هو تنسيق متجه: فهو يخزن الأشكال كهندسة، لذلك يتم قياسه إلى أي حجم دون تشويش وهو مثالي للشعارات والأيقونات والرسوم البيانية. PNG هو تنسيق نقطي: فهو يخزن شبكة ثابتة من وحدات البكسل، دون فقدان البيانات، والتي تناسب لقطات الشاشة والأعمال الفنية التفصيلية وفي أي مكان يقبل الصور فقط. الانتقال من SVG إلى PNG دقيق بالحجم الذي تختاره؛ استخدم محول SVG إلى PNG في 2x أو 4x للإخراج الحاد. الانتقال من PNG إلى SVG هو التتبع، الذي يعيد بناء الأشكال من وحدات البكسل ولا يستعيد التصميم الأصلي. إنه يعمل مع الشعارات المسطحة وفن الخط، ويفشل في الصور. تعمل جميع التحويلات هنا من جانب العميل، ولا يتم تحميل أي شيء، مجانًا، ولا يوجد تسجيل.
ما الفرق بين SVG وPNG؟
تصف SVG الصورة بأنها تعليمات لرسمها، بينما تقوم PNG بتخزين الرسم النهائي على شكل بكسل. كل شيء آخر يتعلق بالتنسيقين يتبع هذا الاختلاف الوحيد.
ملف SVG، محدد بواسطة W3C في رسومات المتجهات القابلة للتطوير (SVG) 2، هو نص XML. يسرد المسارات والدوائر والمستطيلات والتدرجات والنص، ولكل منها إحداثيات وألوان. لا شيء فيه يوضح عدد وحدات البكسل الموجودة في الصورة. عندما يعرضها المتصفح، يحدد العارض وحدات البكسل التي يغطيها كل شكل بالحجم الذي يظهر على الشاشة، ولهذا السبب يكون نفس الملف واضحًا على الهاتف وعلى شاشة بدقة 5K.
ملف PNG، محدد بواسطة W3C كـ رسومات الشبكة المحمولة وتم نشرها باسم ISO/IEC 15948، وهي عبارة عن شبكة من وحدات البكسل الملونة المضغوطة باستخدام DEFLATE. الضغط بدون فقدان، لذا فإن وحدات البكسل التي تقوم بفك تشفيرها هي بالضبط وحدات البكسل التي تم حفظها. يمكن لـ PNG أن يحمل قناة ألفا كاملة وما يصل إلى 16 بت لكل قناة. ما لا يمكنه فعله هو إضافة التفاصيل: 512 x 512 PNG الموضح في 2048 x 2048 يحتوي على كل بكسل ممتد عبر كتلة 4 x 4، وتتحول الحواف إلى ناعمة أو ممتلئة.
فيما يلي نفس الشارة البسيطة لمصدر SVG
<svg xmlns="http://www.w3.org/2000/svg" width="240" height="80" viewBox="0 0 240 80">
<rect x="4" y="4" width="232" height="72" rx="16" fill="#1d4ed8"/>
<text x="120" y="52" font-family="Arial, sans-serif" font-size="32"
text-anchor="middle" fill="#ffffff">TOOLZ</text>
</svg>
هذه الأسطر الأربعة من العلامات هي الصورة بأكملها، وتبقى أربعة أسطر سواء عرضتها بعرض 240 بكسل أو 24000. نسخة PNG من نفس الشارة عند 240 x 80 تحمل 19200 بكسل، وعند 960 x 320 تحمل 307200 بكسل.
SVG vs PNG: ما هو التنسيق الذي يجب أن أستخدمه؟
استخدم SVG لأي شيء مصنوع من أشكال يجب قياسها، وPNG لأي شيء مصنوع من وحدات البكسل أو متجه إلى مكان يقبل الصور النقطية فقط. هذا الجدول يضعهم جنبًا إلى جنب:
| ملكية | SVG | PNG |
|---|---|---|
| نموذج الصورة | المتجه: المسارات والأشكال والنص | النقطية: شبكة بكسل ثابتة |
| معيار | W3C SVG 2 | W3C PNG، إسو/آي إي سي 15948 |
| التحجيم | حاد بأي حجم | يطمس أو يحجب عند تكبيره |
| ضغط | نص؛ gzip على الخادم | انكماش بلا خسارة |
| الشفافية | نعم | نعم ألفا كامل |
| حجم الملف للشعار | عادة بضعة كيلو بايت | ينمو بأبعاد البكسل |
| حجم الملف للصورة | غير عملي | كبيرة ولكنها معقولة |
| قابل للتحرير بعد التصدير | نعم، الأشكال والألوان في محرر المتجهات | بكسل فقط بكسل |
| النص بالداخل | يمكن أن تظل قابلة للتحديد والبحث | خبز في بكسل |
| يمكن أن تحتوي على نصوص برمجية | نعم، وهو مصدر قلق أمني | لا |
| مقبولة من خلال التحميلات الاجتماعية والتطبيقات المكتبية والبريد الإلكتروني | في كثير من الأحيان لا | دائما تقريبا |
| الأفضل ل | الشعارات والأيقونات والرسوم البيانية والرسوم البيانية والرسوم التوضيحية لواجهة المستخدم | لقطات شاشة، فن تفصيلي، أصول ذات حجم ثابت |
قاعدة عملية: احتفظ بـ SVG باعتباره سيدك لأي ناقل، وقم بتصدير PNG منه بالأحجام التي تحتاجها كل وجهة. لا تحتفظ أبدًا بـ PNG الخاص بالشعار فقط، لأن تحويل وحدات البكسل مرة أخرى إلى أشكال يعد ضياعًا بطريقة لا يؤدي فيها تحويل الأشكال إلى وحدات بكسل.
بالنسبة للصور الفوتوغرافية، لا يعد أي من التنسيقين هو الاختيار الصحيح للتسليم. الصورة في PNG كبيرة، والصورة في SVG هي إما PNG ملفوفة بتنسيق XML أو تقريب متتبع. تم تصميم JPEG أو WebP أو AVIF لهذه المهمة؛ ما هو WebP ومتى يتم استخدامه يغطي جانب الصورة.
لماذا ترفض العديد من الأماكن تحميلات SVG؟
لأن SVG هو مستند يمكن أن يحتوي على محتوى نشط، وليس مجرد صورة. تسمح مواصفات SVG <script> العناصر وسمات معالج الأحداث مثل onloadروابط للموارد الخارجية وHTML المضمنة من خلال <foreignObject>. قد ينتهي الأمر بالموقع الذي يقبل تحميل SVG ثم يخدمه لاحقًا من المجال الخاص به إلى تشغيل JavaScript لشخص آخر '؛s لكل زائر يفتح الملف مباشرة.
يعد تطهير SVG بأمان أمرًا ممكنًا ولكن بطريقة خادعة، لذلك تتخذ العديد من الأنظمة الأساسية طريقًا أبسط: صور الملفات الشخصية وقوائم السوق وشبكات الإعلانات والعديد من مكتبات وسائط CMS ومعظم عملاء البريد الإلكتروني يقبلون التنسيقات النقطية فقط. تتمتع مستندات Office وتطبيقات الدردشة بدعم غير مكتمل أيضًا.
هذا هو السبب الأكثر شيوعًا لتحويل SVG إلى PNG. المتصفح الذي يرسم SVG كصورة هو الحالة الآمنة، حيث يتم تحميل SVG من خلال ملف <img> لا يُسمح للعنصر أو على اللوحة القماشية بتشغيل البرامج النصية أو جلب الملفات الخارجية. تعرض محولات Toolz ملفات SVG بهذه الطريقة تمامًا، مما يجعل تحويل ملف من مصدر غير معروف أمرًا آمنًا.
كيف يمكنك تحويل SVG إلى PNG دون فقدان الجودة؟
قم بعرض SVG بحجم البكسل الذي تحتاجه، أو أكبر، ولا تقم أبدًا بتوسيع نطاق PNG بعد ذلك. نظرًا لأن SVG عبارة عن هندسة، فإن رسمها بسرعة 4x يكون دقيقًا مثل رسمها بسرعة 1x؛ كل فقدان الجودة في هذا الاتجاه يأتي من اختيار مخرجات صغيرة جدًا.
ال محول SVG إلى PNG يعمل على تحديد الحجم بهذا الترتيب:
- إذا تم تعيين الجذر SVG
widthوheight، يتم استخدامها، مع وحدات مثلmm،pt،inوcmتم التحويل إلى بكسلات CSS. - إذا كان لديه فقط
viewBoxيتم استخدام عرض وارتفاع viewBox. - إذا لم يكن لديه أي منهما، فسيتم رسمه عند 1024 x 1024.
- إذا كان الجانب الأطول لا يزال أقل من 512 بكسل، فسيتم تكبير الرسم بالتناسب حتى يصبح هذا الجانب 512، لأن أيقونة 24 x 24 المرسومة بحجمها المعلن تكون صغيرة جدًا بحيث لا يمكن استخدامها.
- يقوم خيار مقياس SVG بعد ذلك بضرب النتيجة في 1 أو 2 أو 4.
خذ الشارة أعلاه، والتي تعلن width="240" height="80". أطول جانب هو أقل من 512، لذلك تم تكبيره إلى 512 x 171. عند 2x، يخرج PNG عند 1024x342، مع ترك الزوايا غير المطلية شفافة. تشير الملاحظة الموجودة أسفل النتيجة إلى الحجم ومن أين أتت، لذلك لا يوجد تخمين.
اختر 2x للشاشات، حيث تستخدم معظم الهواتف وأجهزة الكمبيوتر المحمولة 2x أو أكثر من بكسلات الجهاز لكل بكسل CSS، و4x للطباعة أو شاشات العرض الكبيرة. سقف الإخراج هو 100 ميجابكسل أو 16384 بكسل على الجانب، ويتم رفض ملفات SVG التي يزيد حجمها عن 50 ميجابايت؛ مقياس أصغر يصلح الحالة الأولى.
لا يبقى نوعان من المحتوى قيد العرض. يتم استبعاد الصور وخطوط الويب المرتبطة بعنوان URL، لأن SVG المرسوم كصورة لا يمكنه جلب أي شيء خارج الملف، لذلك يعود النص إلى خط النظام؛ يؤدي تحويل النص إلى مخططات تفصيلية في محرر المتجهات الخاص بك قبل التصدير إلى تجنب ذلك. ويصبح SVG المتحرك إطارًا ثابتًا واحدًا.
هل يجب علي تحويل SVG إلى PNG أو JPG أو PDF؟
قم بالتحويل إلى PNG افتراضيًا، وإلى JPG فقط عندما ترفض الوجهة PNG أو تحتاج إلى ملف أصغر لرسم يشبه الصورة، وإلى PDF عندما تحتاج إلى مستند للطباعة أو البريد الإلكتروني.
| هدف | الشفافية | مقاس | ما تخسره | يستخدم ل |
|---|---|---|---|---|
| PNG | أبقى | متوسط | قابلية التوسع | التحميلات والشرائح وأصول التطبيقات وأي شيء بخلفية شفافة |
| JPG | مليئة باللون الأبيض | الأصغر للفن المعقد | قابلية التوسع والشفافية وبعض حدة الحواف | النماذج التي تأخذ فقط JPG ومرفقات البريد الإلكتروني |
| PDF (نقط) | تظهر المناطق الشفافة الصفحة البيضاء | أكبر | قابلية التوسع، نص قابل للتحديد، روابط قابلة للنقر | أوراق إثبات، طباعة مخطط، إرسال الأعمال الفنية إلى غير المصممين |
ال محول SVG إلى JPG يملأ المناطق الشفافة باللون الأبيض، لأن JPEG لا يحتوي على قناة ألفا، ويطبق شريط تمرير الجودة. الحواف الواضحة على اللون المسطح هي بالضبط المكان الذي يترك فيه ضغط JPEG رنينًا باهتًا، لذلك عادةً ما يبدو الشعار أفضل مثل PNG.
ال محول SVG إلى PDF يستحق تحذيرًا واضحًا. إنه نقطي: يتم رسم كل SVG إلى وحدات البكسل، وتخزينه كـ PNG، ووضعه على الصفحة. لا يحتوي ملف PDF على أشكال متجهة، ولا يمكن تحديد النص، والتكبير/التصغير يظهر وحدات البكسل بشكل كافٍ. لا يزال خيار المقياس مفيدًا، نظرًا لأن حجم الصفحة يظل ثابتًا بينما يقوم 2x و4x بحزم المزيد من وحدات البكسل فيه (72 أو 144 أو 288 بكسل لكل بوصة مع ملاءمة الصورة). إذا طلبت المطبعة ملف PDF متجهًا، لكل ايزو 32000 يمكن لملف PDF أن يحمل مسارات متجهة حقيقية، ولكنك تحتاج إلى محرر متجه وتصدير #39؛s لذلك، وليس محول صور.
ماذا يفعل تحويل PNG إلى SVG؟
يؤدي تحويل PNG إلى SVG إلى تتبع الصورة: فهو يجمع وحدات البكسل في مناطق ذات ألوان متشابهة ويناسب الخطوط العريضة حول كل منطقة، مما ينتج عنه مسارات متجهة مملوءة. لا يجد ملف المتجه الأصلي، لأن PNG لا يحتوي على سجل للأشكال التي صنعته. كل حافة في الإخراج هي تقدير مأخوذ من وحدات البكسل.
التتبع وراء PNG إلى SVG و JPG إلى SVG يوجد في Toolz imagetracerjs، يعمل في عامل ويب في الخلفية بحيث تظل الصفحة سريعة الاستجابة. يعمل في خطوتين:
- تقليل اللون. يتم تقليل الصورة إلى لوحة صغيرة، الرقم الذي تختاره تحت الألوان: 2 أو 8 أو 16.
- تركيب الحافة. بالنسبة لكل طبقة لون، يسير جهاز التتبع على حدود كل منطقة متصلة ويناسب الخطوط المستقيمة والمنحنيات معها، مما ينتج عنه مسار واحد مملوء لكل منطقة.
يحصل كل مسار أيضًا على مخطط تفصيلي بدقة 1 بكسل بلونه الخاص. بدونها، تترك الأشكال المجاورة فجوات شعرية حيث لا تلتقي حوافها تمامًا، وتظهر الخلفية كدرزات بيضاء رفيعة.
تتحكم التفاصيل في مدى قرب اتباع هذه الخطوط العريضة لوحدات البكسل
| تفاصيل | التسامح الخط والمنحنى | انخفضت البقع أدناه | طمس مسبق | نتيجة |
|---|---|---|---|---|
| منخفض | 2 بكسل | 16 نقطة | طفيف | ملفات أكثر سلاسة وبساطة وأصغر |
| متوسطة (افتراضية) | 1 بكسل | 8 نقاط | لا أحد | متوازن |
| عالي | 0.5 بكسل | 2 نقطة | لا أحد | يتبع وحدات البكسل عن كثب، ويحافظ على الأشكال الصغيرة، وأثقل |
تتم كتابة SVG المتتبع مع width و height اضبط على حجم الصورة الأصلية و viewBox في وحدات البكسل المتتبعة، يتم فتحه بالحجم الذي تتوقعه ويتم قياسه بشكل نظيف أينما وضعته.
ما الذي يمكن أن يفعله التتبع بشكل جيد، وأين يفشل؟
يعمل التتبع بشكل جيد على الصور التي كانت تشبه المتجهات في البداية: اللون المسطح، والحواف الصلبة، والقليل من الألوان. إنه يفشل في أي شيء ذي درجات متواصلة، لأن الصورة ليس لها حواف للعثور عليها، بل تدرجات فقط.
| مصدر | كيف يتتبع | الإعدادات المقترحة |
|---|---|---|
| شعار مسطح، من 2 إلى 6 ألوان | أشكال نظيفة، ملف صغير | 8 ألوان متوسطة |
| فن الخط بالأبيض والأسود والتوقيعات والطوابع | نظيف جدا | لونين متوسط أو مرتفع |
| أيقونات مع التدرج | التدرج يتحول إلى العصابات | 16 لونًا، متوسطًا، ثم يتم تبسيطه في المحرر |
| الرسم الممسوح ضوئيًا على الورق | يصبح نسيج الورق بقعًا | 2 لون، منخفض |
| شعار JPG مع التحف الضغط | بقع على طول الحواف، وخلفية مرسومة كشكل | تفاصيل منخفضة؛ حذف شكل الخلفية بعد ذلك |
| لقطة شاشة مع النص | تصبح الحروف الخطوط العريضة | احتفظ بها كـ PNG |
| صورة | أشكال ملصقة مبقعة، ملف ضخم | لا تتبع |
صف الصور الفوتوغرافية ليس مسألة ذوق. عند اختبار محرك Toolz، استغرقت الصورة الصاخبة بقوة 2000 بكسل والتي تم تتبعها بـ 16 لونًا 28 ثانية وأنتجت محرك SVG بسعة 46 ميجابايت، وهو أثقل بعدة مرات من الصورة التي جاءت منها وما زال أسوأ بشكل واضح. تمنح الضوضاء المتتبع آلاف المناطق الصغيرة، ويصبح كل منها مسارًا خاصًا به بإحداثياته الخاصة.
هذا الاختبار هو السبب وراء قيام المحول بقياس أي صورة أطول من 1200 بكسل على جانب ما وصولاً إلى 1200 بكسل قبل التتبع. ينتهي التتبع بعد ذلك بالثواني بدلاً من الدقائق، ولأن الإخراج يحافظ على العرض والارتفاع الأصليين، لا يتغير شيء يتعلق بكيفية وضع SVG. يتم إيقاف التتبع الذي لا يزال قيد التشغيل بعد دقيقتين برسالة تشير إلى ألوان أقل أو تفاصيل أقل، بدلاً من ترك علامة التبويب مشغولة إلى أجل غير مسمى.
تضيف مصادر JPG مشكلتين محددتين. يترك ضغط JPEG كتلًا باهتة حول الحواف الحادة، والتي يمكن أن يحولها المتتبع إلى أشكال ضالة؛ التفاصيل المنخفضة تطمس قليلاً وتسقط البقع لمواجهتها. ولا تتمتع JPG بالشفافية، لذا يصبح المربع الأبيض حول الشعار شكلاً مملوءًا آخر خلف العمل الفني. في محرر المتجهات، حدد هذا الشكل واحذفه.
كيف يمكنني الحصول على SVG نظيف من شعار PNG؟
ابدأ بأبسط الإعدادات التي تحافظ على التصميم، وانظر إلى المعاينة، وأضف الألوان أو التفاصيل فقط عندما يكون هناك شيء مفقود. نادرًا ما تعمل الإعدادات الأثقل على إصلاح الأثر السيئ؛ يضيفون المزيد من المسارات إليه.
تسلسل موثوق:
- استخدم أكبر وأنظف مصدر لديك. يتفوق تصدير PNG على لقطة الشاشة، وتتفوق لقطة الشاشة على صورة النسخة المطبوعة.
- احسب الألوان الموجودة في الشعار واختر الخيار الأقرب عنده أو فوقه. العلامة ذات اللونين تريد 2، والعلامة ذات الخمسة ألوان تريد 8.
- تتبع في المتوسطة. تحقق من المعاينة وحجم الملف الموضح تحت النتيجة.
- إذا كانت هناك بقع أو حواف خشنة، قم بالتتبع عند مستوى منخفض. إذا اختفت التفاصيل الرقيقة، قم بالتتبع عند الارتفاع.
- افتح النتيجة في محرر المتجهات للخطوة الأخيرة: احذف شكل الخلفية إذا كان هناك واحد، وقم بدمج الأشكال التي يجب أن تكون واحدًا، واستبدل أي نص تم تتبعه بنص حقيقي بالخط الصحيح.
عندما يكون حجم الملف الموضح بعد التتبع أكبر من PNG، تعامل مع ذلك كإشارة. بالنسبة للشعار، فهذا يعني عادةً أنه يتم تتبع الضوضاء؛ بالنسبة لأي شيء آخر، فهذا يعني عادةً أن الصورة يجب أن تظل نقطية.
إذا كان التتبع متجهًا إلى آلة قطع أو نقاش ليزر أو برنامج تطريز، فغالبًا ما يكون اللونان هما الحل الصحيح حتى بالنسبة للتصميم الملون، نظرًا لأن هذه الآلات تعمل من الخطوط العريضة بدلاً من التعبئة.
هل يمكنني التحويل بين هذه التنسيقات في مكان واحد؟
نعم. الجنرال محول الصور يقبل SVG مع JPG، JFIF، PNG، WebP، AVIF، GIF، BMP، ICO، HEIC، TIFF، PSD، CR2، DNG وPDF، ويكتب JPG، PNG، WebP، GIF، ICO، PDF أو SVG. يؤدي اختيار SVG كهدف إلى تتبع أي مصدر نقطي بنفس إعدادات الألوان والتفاصيل؛ يؤدي اختيار هدف نقطي لمصدر SVG إلى إظهار خيار مقياس SVG.
تقبل الصفحات الزوجية المخصصة فقط تنسيق المصدر الخاص بها، مما يحافظ على الخيارات التي تظهر على الشاشة ذات صلة: تعرض صفحات SVG المقياس، وتعرض صفحات التتبع الألوان والتفاصيل.
لا يتم تقديم مجموعة واحدة: PDF إلى SVG. يرفض المحول ذلك برسالة، والمسار الذي يقترحه هو خطوتين: تحويل صفحة PDF إلى PNG أولاً، ثم تتبع PNG. إذا جاء ملف PDF من برنامج متجه، فإن تصدير SVG من هذا البرنامج يحافظ على المسارات الحقيقية وهو الخيار الأفضل.
يمكن أن يصبح SVG أيضًا رمزًا مفضلاً. يؤدي عرضه على ICO إلى إنتاج صور PNG مربعة بحجم كل رمز، ويعني الحد الأدنى 512 بكسل أن الرمز الصغير SVG لا يزال يوفر إدخالاً نظيفًا بحجم 256 بكسل. أحجام Favicon وما يدخل داخل ملف ICO يغطي الأحجام التي يجب تضمينها.
هل تحويلات SVG وPNG خاصة؟
نعم. يتم عرض جميع العناصر وترميزها وتتبعها من جانب العميل، داخل علامة تبويب المتصفح، لذلك لا يتم تحميل أي ملف. يتم تنزيل خطوة فك تشفير SVG والتتبع فقط عندما يحتاج الملف إليهما، مما يبقي الصفحة مضاءة عندما تقوم بالتحويل فقط بين التنسيقات النقطية.
الحدود، في مكان واحد: ملفات SVG تصل سعتها إلى 50 ميجابايت، تعرض مخرجات تصل إلى 100 ميجابكسل و16384 بكسل في الجانب، ومصادر نقطية تصل إلى 100 ميجابكسل، وتتبع ما يصل إلى 1200 بكسل على الجانب الأطول، وسقف لمدة دقيقتين لكل أثر. الأدوات مجانية، بدون تسجيل، مع حد يومي للتحويلات.
