ההבדל בין PNG ל-SVG: מתי להשתמש במה?
מה ההבדל בין PNG ל-SVG? המדריך משווה בין שיטת השחזור, השקיפות, גודל הקובץ, התנהגות בהגדלה ותרחישי שימוש, כדי לדעת באיזה פורמט לבחור לאייקונים, לוגו ותמונות, וכיצד להמיר בין PNG ל-SVG.
ראשית: ההבדל היסודי; רשת פיקסלים מול נתיבים מתמטיים
PNG הוא פורמט רסטר: הוא מחלק את התמונה לפיקסלים ושומר את הצבע של כל נקודה. הגדלה של PNG היא בעצם מתיחה של הפיקסלים, ולכן מופיעים שיניים וטשטוש. SVG הוא גרפיקה וקטורית: הוא מתאר את הצורה בקואורדינטות ובפקודות מתמטיות כמו עקומות בזיר, והדפדפן מצייר מחדש בגודל החדש, ולכן נשאר ברור בכל קנה מידה. זהו מקור כל ההבדלים ביניהם.
בנוגע לשקיפות, PNG תומך בערוץ אלפא ששומר על רקע שקוף, ואילו SVG שקוף מעצם: כל עוד לא מציירים מלבן רקע, מה שמחוצה לצורה נשאר שקוף. ובמענה לשאלה נפוצה, JPG אינו תומך בשקיפות, והלבן שלו הוא צבע שנמצא באמת.
שנית: גודל הקובץ וביצועי הטעינה
לאייקונים וללוגו פשוטים, קובץ SVG הוא בדרך כלל כמה קילובייטים בלבד, וקובץ אחד מתאים לכל צפיות המסך; PNG לעומת זאת צריך לעיתים קרובות גרסאות @2x ו-@3x כדי להישאר חד במסכי Retina, והנפח מכפיל. לתמונות המצב הפוך: לתמונות יש מגוון צבעים עשיר מאוד, ווקטוריזציה שלהן יוצרת כמויות נתיבים, ולכן SVG הופך גדול בהרבה מ-JPG/WEBP, ואין בכך טעם.
מבחינת עיקרון הדחיסה, PNG שומר פיקסלים בדחיסה ללא אובדן, וככל שהתמונה מורכבת יותר הנפח גדל; SVG הוא טקסט פשוט, וחזרה של פקודות נתיב וקואורדינטות נדחסת בו בצורה מצוינת. לכן, למרות ששניהם מוגדרים כלל אובדן, התנהגות הנפח שלהם שונה לחלוטין.
| תרחיש שימוש | פורמט מומלץ | סיבה |
|---|---|---|
| אייקוני אתר / לוגו | SVG | קובץ אחד לכל הרזולוציות, ואפשר לשנות צבע עם CSS |
| תמונות | JPG / WEBP | נפח קטן עם שמירת המראה הצילומי |
| צילומי מסך | PNG | דיוק ברמת הפיקסל ודחיסה ללא אובדן |
| תרשימי נתונים | SVG | הגדלה ברורה ואינטראקטיביות הניתנת לתכנות |
| תמונת פרופיל ברשתות חברתיות | PNG / JPG | רוב הפלטפורמים מקבלים רק תמונות רסטר |
שלישית: מתי להשתמש ב-PNG
- תמונות, תאורה מורכבת וגווני מעברים עדינים;
- צילומי מסך ותמונות ממשק המשתמש הדורשות דיוק ברמת הפיקסל;
- מקרים שבהם הפלטפורמה מקבלת רק תמונות רסטר, למשל העלאת תמונת פרופיל בחלק מהפאנלים;
- גיבוי לתאימות: כאשר סביבות ישנות מאוד אינן תומכות ב-SVG.
רביעית: מתי להשתמש ב-SVG
- אייקוני אתר ולוגו: קובץ אחד לכל הרזולוציות, שנשאר חד במסכי Retina;
- צורות שצריך להחליף צבע בהן עם CSS/JS או להוסיף להן אנימציית קו;
- תרשימי נתונים: ספריות כמו ECharts מפיקות SVG כברירת מחדל;
- דפוס, חריטה בלייזר וחיתוך אותיות: המכשירים קוראים נתיבים וקטוריים.
חמישית: אפשר להמיר PNG ו-SVG זה את זה
כן. מ-PNG ל-SVG: באמצעות כלי המרת PNG ל-SVG של PolySVG או כלי המרת התמונה ל-SVG, מעלים את התמונה ולוחצים יצירה כדי לבצע וקטוריזציה; לאייקונים וללוגו התוצאה מצוינת מאוד, ואילו תמונות מקבלות מראה של איור. ההמרה חינמית, ורקע שקוף של PNG נשמר במלואו. את קובץ ה-SVG שהתקבל אפשר להעביר לעורך להחלפת צבע ולהסרת רקע, וכך נוצר תהליך עבודה מלא. מ-SVG ל-PNG: פותחים את הקובץ בעורך ה-SVG האונליין ומייצאים PNG, ואת הרזולוציה אפשר לבחור בעצמנו; הדבר מתאים להטמעה במסמכים או ליצירת תמונות תצוגה מקדימה.
כדאי לזכור שהמרה מ-PNG ל-SVG אינה שמירה פשוטה בפורמט אחר, אלא תהליך של ציור מחדש של המתארים: חומרים גרפיים מקבלים נתיבים נקיים, ותמונות מצומצמות למשבצות צבע. מומלץ להקדים להמרה תצוגה מקדימה בכלי, כדי לוודא שהסגנון תואם לציפייה לפני ההורדה.
החלטה מהירה: לאייקונים, לוגו ותרשימים בחרו SVG; לתמונות ולצילומי מסך בחרו PNG/JPG/WEBP. אם אתם מתלבטים, לתוכן גרפי עדיפות ל-SVG. להעמקה קראו מהו קובץ SVG ו־שלוש שיטות להמרת תמונה ל-SVG.
שאלות נפוצות
לאייקוני אתר עדיף PNG או SVG?
עדיף SVG: קובץ אחד מתאים לכל צפיות המסך, הנפח קטן ואפשר לשנות את הצבע עם CSS; ל-PNG פונים רק כאשר הפלטפורמה אינה תומכת ב-SVG.
האם PNG שקוף נשאר שקוף אחרי ההמרה ל-SVG?
כן. בעת ההמרה בכלי של PolySVG אזורי השקיפות נשמרים במלואם ולא נוסף רקע לבן מהיכן.
האם תמונות מתאימות להמרה ל-SVG?
לא אם רוצים לשמור על איכות צילומית. וקטוריזציה מצמצמת את התמונה למשבצות צבע ומפיקה מראה של איור; לתמונות עדיף להמשיך להשתמש ב-JPG/WEBP.