קובצי SVG.

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

מה נלמד אתכם.

מה הוא קובץ SVG?
ההיסטוריה של קובץ SVG
בשביל מה משתמשים בקובצי SVG?
יתרונות וחסרונות של קובצי SVG
איך לפתוח קובץ SVG
איך ליצור ולערוך קובץ SVG
קובצי SVG: שאלות נפוצות

מה הוא קובץ SVG?

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

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

אפשר לזהות בקלות קובץ SVG לפי הסיומת שלו, ‎.svg

ההיסטוריה של קובץ SVG.

ההיסטוריה של קובצי SVG מתחילה בשנות ה-90 המאוחרות של המאה ה-20, כאשר חברת World Wide Web Consortium‏ (W3C) הזמינה מפתחים להציע סוג חדש של פורמט לגרפיקת וקטור. הוגשו שש הצעות מתחרות שעזרו לחברת W3C לבנות פורמט חדש ולבסוף ליצור את הפורמט SVG.

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

בשביל מה משתמשים בקובצי SVG?

הטכנולוגיה של Scalable Vector Graphics התקדמה מאוד בשנים האחרונות – אבל בשביל מה משתמשים בקובצי SVG בפועל?

סמלים ולוגו לאתרי אינטרנט.

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

אינפוגרפיקה ואיורים.

הודות לשימוש ב-XML בתוך קובצי SVG, מנועי חיפוש כמו Google יכולים לקרוא תרשימים וגרפים עשירים בטקסט, תכונה שיכולה לעזור עם מיטוב למנועי חיפוש. מאחר שהחיפוש ב-Google יכול לזהות מילות מפתח בתוך קובצי SVG, ייתכן שהדירוג של דף אינטרנט ישתפר בתוצאות החיפוש. בנוסף, כדי שדפי האינטרנט יהיו עוד יותר מעניינים, קובצי SVG יכולים גם לתמוך בהנפשה.

גלו סוגים נוספים של קובצי וקטור

יתרונות וחסרונות של קובצי SVG.

כדאי להבין את היתרונות והחסונות של קובצי SVG לפני ששומרים את התמונות בפורמט הקבצים הזה.

יתרונות של קובצי SVG.

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

חסרונות של קובצי SVG.

קובצי SVG הם פתרון נהדר לגרפיקות באינטרנט, כגון סמלי לוגו,איורים ותרשימים. אבל החוסר בפיקסלים מהווה אתגר בהצגה של תמונות דיגיטליות באיכות גבוהה. קובצי JPEG בדרך כלל טובים יותר להצגה של תמונות מפורטות.
רק דפדפנים מודרניים יכולים לתמוך בתמונות SVG. ייתכן שהשימוש בקובצי SVG בדפדפן Internet Explorer 8 ובדפדפנים ישנים אחרים לא יהיה אפשרי.
הקוד שנוסף לתמונות SVG עלול להיות קשה להבנה אם אין לכם ניסיון בפורמט הקבצים הזה.

איך לפתוח קובץ SVG.

כיום, בדפדפנים Chrome, ‏Edge, ‏Safari, ‏Firefox ובכל הדפדפנים הפופולריים האחרים אפשר לפתוח קובצי SVG – הן במחשבי Mac והן במחשבי Windows. הפעילו את הדפדפן ולחצו על File (קובץ) > Open (לפתוח) כדי לבחור את הקובץ שברצונכם להציג. הקובץ יוצג בדפדפן שבחרתם.

גם פתיחה של תמונת SVG עם תוכנה מובנית במחשב היא פעולה פשוטה. לחצו לחיצה כפולה על שם הקובץ. כעת תופיע רשימה של תוכנות שבאמצעותן ניתן לפתוח את התמונה – לחלופין, התמונה תיפתח בתוכנה התואמת.

איך ליצור ולערוך קובץ SVG.

כאשר משתמשים ב-Adobe Photoshop יש לבצע את השלבים הבאים:

לאחר שיצרתם את התמונה ב-Photoshop, יש ללחוץ על File (קובץ) > Export (לייצא) > Export As (לייצא בתור).
יש ללחוץ על התפריט הנפתח Format (פורמט) בתוך התיבה שמופיע ולבחור באפשרות SVG.
בחרו באפשרות Export All (לייצא הכול) ושמרו את הקובץ.

עצה מועילה: מאחר שהיישום Photoshop הוא עורך של גרפיקות מסוג רסטר, אנשים מעדיפים לרוב ליצור ולערוך קובצי SVG ב-Adobe Illustrator, עורך של גרפיקות מסוג וקטור.

קובצי SVG: שאלות נפוצות.

האם קובצי SVG תומכים בהנפשה?

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

איך אפשר לזהות קובץ SVG?

השיטה הקלה ביותר לזיהוי של קובץ SVG היא על ידי בדיקה של קוד הסיומת. הסיומת של קובץ SVG תהיה ‎.svg תוכלו גם לזהות תמונות וקטור כמו קובצי SVG על ידי הגדלה שלהן ל-200% או יותר במסך המחשב. תמונת וקטור תשמור על קווים נקיים וצבעים אחידים ולא תהפוך לתמונה מפוקסלת או מטושטשת.

האם משתמשים בקובצי SVG רק לצורך פרסום באינטרנט?

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

מה הגודל של קובצי SVG?

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

מה ההבדל בין קובצי SVG וקובצי PNG?

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