דלגו לתוכן
מדריך

תמונה מול SVG: מה ההבדל, מתי להשתמש בכל אחד, ומה היתרונות והחסרונות

תמונה מול SVG: מה ההבדל, מתי להשתמש בכל אחד, ומה היתרונות והחסרונות

כמעט כל יוצר מגיע לרגע הזה: מעלים קובץ לכלי באתר, ופתאום מבקשים ממנו "SVG" — או שהעלו תמונה יפה והתוצאה בחיתוך יצאה מרובעת ומטושטשת. החדשות הטובות: זה לא עניין של מזל או תוכנה "טובה יותר". יש בעולם שני סוגי קבצים גרפיים שונים לגמרי מבחינת המבנה שלהם, וברגע שמבינים את ההבדל, הבחירה הנכונה נהיית אוטומטית.

מה זו בעצם תמונה (Raster) — JPG ו-PNG

תמונת ראסטר בנויה מרשת של פיקסלים — נקודות צבע קטנות, כמו פסיפס ענק. כל תמונה שיצאה ממצלמה, סמארטפון או סורק היא ראסטר: JPG ו-PNG הן שתי הסיומות הנפוצות ביותר. לכל תמונה כזו יש רזולוציה קבועה — מספר הפיקסלים שיש בה — ולכן גם DPI (נקודות לאינץ') שקובע כמה חדה היא תיראה בגודל הדפסה מסוים. אם תגדילו תמונה כזו הרבה יותר ממה שהיא "מכילה" בפועל, היא תיראה מרובעת ומטושטשת — כי פשוט אין עוד מידע להוסיף. אפשר לבדוק בדיוק כמה ס"מ תמונה מסוימת תחזיק בלי להתפקסל בכלי בדיקת ה-DPI.

מה זה SVG — וקטור

SVG (Scalable Vector Graphics) הוא סוג קובץ אחר לגמרי: הוא לא שומר פיקסלים, אלא נוסחאות מתמטיות של קווים, עקומות וצורות — "התחל בנקודה הזו, עקוב אחרי העקומה הזו, עד לנקודה ההיא". בגלל זה SVG אפשר להגדיל עד אינסוף בלי שום אובדן חדות — קו נשאר קו, גם בגודל מדבקת מקרר וגם בגודל שלט חנות. גם טקסט בתוך SVG יכול להישאר טקסט אמיתי (או צורה וקטורית שנוצרה ממנו), ולא נקודות צבע — מה שהופך עריכה, שינוי גודל וחיתוך לפשוטים בהרבה.

השוואה בין תמונה מוגדלת שמתפרקת לפיקסלים מרובעים לבין SVG מוגדל שנשאר עקומה חלקה
מה קורה כשמגדילים: פיקסלים מול קווים מתמטיים

למה כל אחד טוב — השימושים הטיפוסיים

תמונה (ראסטר) מתאימה ל:

  • צילומים ודיוקנאות — כל מה שיש בו גוונים, צללים ומעברים עדינים.
  • חריטה/צריבה של אמנות מלאה — עומק וגוון על עץ, אקריליק, מתכת ועוד (הכנה לחריטה).
  • סובלימציה ו-DTF — הדפסות צבעוניות מלאות על ספלים, טקסטיל ומוצרים (מחולל סובלימציה).

SVG (וקטור) מתאים ל:

טבלה חזותית: תמונה מתאימה לצילומים, צריבה, סובלימציה ו-DTF; SVG מתאים ללוגו, אייקונים, קווי חיתוך ועבודה שכבתית
לאיזה שימוש כל פורמט

טבלת השוואה: יתרונות וחסרונות

תמונה (JPG/PNG)SVG (וקטור)
הגדלהמאבדת חדות מעבר לרזולוציה המקוריתללא הגבלה — תמיד חד
משקל קובץגדל עם הרזולוציה, לעיתים כבדקטן וקל ברוב המקרים
עריכהקשה לשנות צורות/צבעים בודדיםקל לערוך כל קו/שכבה בנפרד
שקיפות רקערק PNG תומך; JPG לאתומך תמיד, באופן טבעי
טקסט"נצרב" לפיקסלים — לא ניתן לערוך כטקסטנשאר עריך (או הופך לצורה מדויקת)
מתאים לחיתוך לייזרלא — אין לו "קו" לעקוב אחריוכן — זו בדיוק המהות שלו
מתאים לחריטה/סובלימציהכן — שומר גוונים וצלליםלא טבעי — צריך למלא צבע אחיד
מקור טיפוסימצלמה, סמארטפון, AI, סריקהתוכנת עיצוב וקטורית, טרייסינג, יצירה ידנית
השוואת הגדלה בפי אחד, שניים וארבעה: תמונה הופכת לפיקסלים גדולים ומטושטשים, SVG נשאר חד בכל גודל
הגדלה ואיכות

טקסט: נשאר עריך, או נצרב לפיקסלים

שווה להתעכב רגע על שורת ה"טקסט" בטבלה, כי היא אחת הסיבות הכי נפוצות לכאב ראש. כשמקלידים טקסט בתוך קובץ SVG, כל אות היא צורה וקטורית נפרדת — אפשר לסמן אותה, לגרור אותה, לשנות לה גופן או גודל, בדיוק כמו בתוכנת עריכה. אבל ברגע שאותו טקסט "נצרב" לתוך תמונה (או שממירים אותו לפיקסלים בטעות), הוא הופך לחלק קבוע מהתמונה — אי אפשר יותר "לקלוט" אותו כטקסט, רק לצייר מחדש מעל הפיקסלים.

השוואה בין טקסט וקטורי שנשאר אובייקט לעריכה לבין אותו טקסט אפוי לפיקסלים קבועים בתמונה
טקסט: נשאר טקסט מול נצרב לפיקסלים

איך מחליטים איזה קובץ להביא לאיזה כלי

כלל אצבע פשוט: שאלו את עצמכם אם אתם רוצים "לראות גוונים" או "לעקוב אחרי קו".

בשורה התחתונה

תמונה שומרת גוונים אבל "נשברת" כשמגדילים אותה; SVG הוא קו מתמטי שנשאר חד בכל גודל אבל לא יודע להראות גוונים בעצמו. ברגע שאתם יודעים אם המשימה היא "לצרוב תמונה" או "לעקוב אחרי קו" — הבחירה בין תמונה ל-SVG כבר לא דורשת ניחוש.