פורמטים- מילון מונחים- SVG
השלב האחרון בכל עבודה בתוכנה הוא שלב השמירה -השלב בו על המשתמש להחליט באיזה פורמט לשמור את הקובץ. לבחירה זו חשיבות רבה, מאחר ופורמט הוא בעצם המבנה בו שמור המידע בקובץ. כל פורמט מתוכנן באופן שייאחסן מידע מסויים. קובצי אילוסטרייטור למשל (AI) מתוכננים לשמירת מידע וקטורי ובנוסף מידע מבוסס פיקסלים, קובצי JPEG לעומת זאת, מתוכננים לשמור אך ורק מידע מבוסס פיקסלים ופורמט PSD יודע לשמור אף הוא את שני סוגי המידע. יש פורמטים שתוכננו להצגה ברשת האינטרנט ויש שתוכננו למגוון שימושים. יש פורמטים המאפשרים דחיסת המידע וחיסכון בנפח אחסון ויש שמתמחים בשמירת מידע רב ככל האפשר. פוטושופ תומכת בעשרות פורמטים של קבצים. חלקם ניתנים לכתיבה על ידי התוכנה וחלקם אך ורק ניתנים לקריאה על ידה. בסדרת מאמרים זו נספק מידע חיוני אודות פורמטים אלו ,נוסיף מספר אנקדוטות מעניינות, נציין יתרונות, חסרונות ושימושים ואולי גם נצליח לפזר את הערפל סביבם. פרק זה עוסק בפורמט SVG המבסס את מעמדו כפורמט הוקטורי המוביל.
הפקודות Place Linked, או Place Embedded מתפריט File. במקרה זה לחיצה כפולה על דמות השכבה תפתח את הקובץ באילוסטרייטור..
-
בניגוד לפורמטים אחרים שחדלו מלהתפתח, פורמט זה בעל תקן W3C הנחשב לתקן שכבר תפס מקום של כבוד ברשת ולהתעדכן במהלך השנים הבאות. את הקובץ ניתן לערוך גם באמצעות קוד והוא מציג דחיסה גבוהה לעומת פורמטים אחרים.
-
פורמט זה לא חף מחסרונות- על אף שמרבית הדפדפנים תומכים בפורמט זה, עדיין לא כולם תומכים בכל התקנים שלו. בנוסף, הוא אידיאלי לשמירת מידע וקטורי בלבד.
-
שמירה וייצוא לפורמט SVG- רגע לפני השמירה כדאי לדעת שגודל הקנבס בקבצים הנשמרים בפורמט זה משפיע על נפח הקובץ באותה מידה כמו בפורמטים אחרים. כמו כן כדאי לוודא שמימדי הקובץ הם בפיקסלים שלמים ולא כוללים עשיריות פיקסל (באילוסטרייטור- ניתן לבחור בכלי משטחי העבודה ולהפעיל את הפקודה Make Pixel Perfect מתפריט Object). ניתן לשמור קבצים וקטוריים לפורמט זה ישירות מאילוסטרייטור במספר דרכים:
הראשונה אמצעות הפקודה Export as מתפריט File>Export. בחלון שנפתח ניתן לסמן את האפשרות Use Artboards כדי לייצא כל משטח עבודה כקובץ נפרד. במידה ואפשרות זו לא תסומן הקובץ שייוצא יכלול את כל משטחי העבודה כקובץ אחד (A).
10 עובדות שלא ידעת על הפורמט SVG
לפני הכל הפרטים היבשים- פורמט זה מבוסס על שפת XML המשמשת לתיאור גרפיקה וקטורית דו־מימדית, עם תמיכה באינטראקטיביות ואנימציה. מפרט השפה מהווה תקן פתוח המפותח על ידי הועדה העולמית לפיתוח (ה-W3C) מאז 1999.
עד כאן ההגדרה, אבל מהו בעצם קובץ SVG? בדומה לכל קובץ המבוסס על שפת XML, מסמך SVG מבוסס בעיקרו על תגיות מלל המתארות ומספקות הוראות ליצירת מרכיבים שונים במסמך, כולל מימדיהם ומיקומם על ציר ה-X וה-Y. רגע, מה היתרונות של פורמט זה?
-
ראשי התיבות של פורמט זה הן Scalable Vector Graphics ובתרגום מילולי גרפיקה וקטורית מדרגית (בפועל המשמעות- ברת הגדלה). מאחר ופורמט זה וקטורי ביסודו הוא מספק מראה חד בכל גודל. בניגוד לפורמטים מבוססי פיקסל, פורמט זה מאפשר הגדלת עצמים לכל גודל ללא איבוד איכות. הפורמט נראה טוב גם בצגים באבחנה גבוהה כמו רטינה ותומך בשקיפות, אינטראקטיב ובאנימציה.
-
קובצי SVG ניתנים לפתיחה בכל דפדפן ולעריכה בתוכנות כמו אילוסטרייטור ואינקספייס. הרשת מציעה לא מעט תוכנות מבוססות דפדפן שיודעות לפתוח ולערוך את הקובץ (ראה רשימה נפרדת).
-
פתיחת הקובץ בפוטושופ, תמיר את המידע לפיקסלים. ניתן להציב בפוטושופ קובץ SVG תוך שימור התכונות הוקטוריות שלו באמצעות
-
לתמונות המשולבות בקובץ. אפשר להטמיע את התמונה בקובץ (Embed), לשמור כקישור חיצוני (Linked) (שימושי כשמספר קובצי SVG משתמשים באותן תמונות), או לשמר את הקישור המקורי שניתן לו באילוסטרייטור. מרבית המשתמשים ממירים את המלל לקווי מתאר כדי שהפונט יוצג כהלכה וללא כל שינוי, אלא אם כן בדעתם להעניק למלל סגנון באמצעות פונטים לרשת (כן, ניתן לעשות גם את זה). שימו לב שבדומה לפורמטים אחרים, אם הענקתם לשכבות שמות ייחודיים הם יוטמעו בקובץ וייאפשרו לתכנת טוב יותר את הקובץ.
לחיצה על כפתור (F) More Options בתחתית החלון תציג אפשרויות שמירה מתקדמות ביניהן תמיכה ברספונסיביות, בחירה בתקן הקידוד הרצוי ועוד.
רגע לפני אישור החלון ניתן לשמור את הקוד של קובץ זה באמצעות לחיצה על כפתור Save Code (G) שבתחתית החלון. לחיצה על הכפתור שלצידו (H) תזניק את הדפדפן ותציג את הקובץ- זוהי ההזדמנות לבחון שהכל מוצג כהלכה. -
ייצוא קובץ פוטושופ הכולל שכבות צורה וקטוריות לפורמט SVG יישמר את התכונות הוקטוריות של השכבות וניתן יהיה לפתוח את הקובץ באילוסטרייטור ולהמשיך לערוך את הצורות באמצעות כלי העריכה השונים (כלי החץ הלבן, כלי החץ השחור, כלי המסלולים וכו׳).
-
שימו לב! לאחר שייצאתם את הקובץ לפורמט SVG לא מומלץ לפתוח את הקובץ להמשך עריכה, אלא לפתוח את קובץ האילוסטרייטור המקורי, לערוך אותו ולייצא שוב לפורמט SVG.
-
אפשרות אחרת היא לייצא אובייקט אחד, או יותר במסמך, לקובץ SVG באמצעות סימונם והפעלת הפקודה Export Selection מתפריט File. בחלון Export for Screens שנפתח ניתן לקבוע את הפורמט הרצוי (JPEG ,PNG ,PDF ו…SVG).
-
בנוסף, הפעלת הפקודה Save As מתפריט File. בחלון שנפתח בתפריט Formatיש לבחור ב-SVG (svg). אישור החלון ייפתח את חלון אפשרויות השמירה. חלון זה מציע מספר אפשרויות מעניינות. ניתן כמובן להתעלם מהן ולאשר את החלון. אם אתם רוצים שליטה מפורטת במאפייני הקובץ כדאי להכיר את החלון. בראש החלון ניתן לבחור באחד מפרופילי השמירה שבפועל משנים את הגדרות השמירה בהתאם לתקנים וצרכים מסויימים (B).
כך למשל ניתן לבחור בפרופיל הגדרות SVG Tiny (בגירסאות שונות) המותאם להתקנים ניידים שונים (C). נכון, התמיכה בכל התקן נייד הייתה אחת ממעלותיו המרכזיות של פורמט זה, אך עדיין קיימים מכשירים ניידים עם תמיכה מוגבלת בצבע, עם זיכרון מועט ו/או מעבד מיושן ותקן זה אמור לסייע להציג את הקובץ בכל זאת.
תפריט Type קובע כיצד יישמר המלל במסמך (בפורמט SVG, או יומר למסלולים (D).
מאפשר לקבוע כיצד Subsetting תפריט יוטמעו הפונטים שהיו בשימוש בקובץ- רק הגליפים שהיו בשימוש (Only Glyphs used), או כל הגליפים (All Glyphs). המשמעות באה לידי ביטוי במשקל הקובץ וביכולות עריכת המלל לאחר שמירת הקובץ במחשבים בהם הפונטים אינם מותקנים. תפריט Image Location (E) מתייחס
Janvas- עורך וקטורי פופולארי שמצליח להתמודד גם עם קובצי SVG מורכבים. ממשק התוכנה ברור ונוח והוא מציע כלים גראפיים המוכרים מתוכנות אחרות. תוכנה זו עובדת אך ורק על דפדפן כרום וכתוצאה מכך מאפשרת לשתף פרוייקטים דרך ה-Google Drive. התוכנה מציעה מספר מאפיינים הייחודיים לה, כמו יישור חכם של אובייקטים, ריבוי עמודים ועוד.
https://www.janvas.com/public-apps/janvas_6.2.1/janvas_app_6.2.1/index.php
Drawsvg- תוכנה פשוטה זו תוכננה עבור מעצבים, כותבי תוכן ומפתחים. כמו כולן היא מאפשרת עריכת קובצי SVG ויצירת עיצובים מאפס. התוכנה מציעה כלים לעריכה אינטראקטיבית, שילוב מלל וצורות גראפיות, וייצוא למבחר פורמטים. התוכנה מתעדכנת על בסיס קבוע.
http://www.drawsvg.org
עוד ראוי לציון Clker שעל אף הממשק המיושן מצליח לבצע את העבודה כהלכה.
http://www.clker.com
במידה ואתם מוצאים שהשימוש בכלים מבוססי רשת אלו מגבילים או לא מספקים עבורכם- תוכלו תמיד לפנות לגירסאות השולחניות שלהן או לתוכנות כמו אילוסטרייטור ואינספייס, אך עדיין מדובר בכלים גמישים וקלים לשימוש.
בדוגמא התוכנה מבוססת הרשת Janvas- ניתן לראות שהתוכנה מציגה ממשק משתמש דומה לכל תוכנה גראפית אחרת.
תוכנות מבוססת רשת לעריכה ויצירת קובצי SVG
Vectr- תוכנה זו טובה הן למתחילים והן למשתמשים מתקדמים יותר. היא איננה מציגה יותר מדי כלים ולכן קלה ללמידה ולתפעול. בראשית ההפעלה התוכנה מציעה סרטוני הדרכה עליהם ניתן לדלג. ניתן להתחיל ליצור את הקובץ מאפס, או לפתוח קובץ קיים על ידי גרירה ישירות לחלון. ראוי לציין שתוכנה זו לא ממש אוהבת איורים או תרשימים מורכבים- למעשה היא החליטה להתעלם מאחד ממרכיבי הקובץ שהיו מורכבים עבורה. תוכלו למצוא מאפיינים נוספים גם בגירסה השולחנית של התוכנה הזמינה לכל מערכות ההפעלה.
https://vectr.com
RollApp- בניגוד לכלים אחרים גלישה לדף הבית של האתר לא מציגה מיידית את הכלים, וזאת משום ש-Rollup היא חלק מחבילת תוכנות ובפועל היא גירסת הדפדפן של תוכנת Inkspace. כדי להשתמש בתוכנה תזדקקו לפתיחת חשבון או להתחברות עם חשבון הפייסבוק, אמזון או הג׳ימייל שלכם. להזנקת חלון העריכה יש ללחוץ על כפתור Launch Online. בחלון שנפתח יש להיכנס עם החשבון הנ״ל ולהתחיל לערוך.
https://www.rollapp.com/app/inkscape
BoxySVG- כלי זה אמנם איננו חינמי אך מציע לא מעט כלים שימושיים למעצבים ומפתחים, כולל גלריית תמונות, ספריית פונטים, ייבוא וייצוא למבחר פורמטים ועוד. התוכנה יודעת לקרוא ולכתוב בפורמט SVG ללא הצורך בייצוא לאחר כל תיקון. שימו לב שתוכנה זו לא תומכת בדפדפן ספארי ומעדיפה את גוגל כרום.
https://boxy-svg.com
Svgminify- האתר מאפשר להעלות קובץ או להזין אתר אינטרנט בו הקובץ נמצא. נפח הקובץ המירבי הוא 12 מ״ב.
Svg-optimiser- אתר זה מאפשר להעלת קובץ או לצרף את קוד ה-SVG והקובץ ייכתב מחדש תוך ניקוי המידע הלא נחוץ. בסיום התהליך ניתן להוריד את הקובץ הקליל למחשב.
Svgomg- כלי זה משכלל את אומנות האופטימיזציה על ידי פירוט הפעולות שהוא מבצע- ניתן לאפשר או לבטל חלק מהאפשרויות ולראות בזמן אמת מה הן עושות לנפח הקובץ.
Nano- כלי זה מאפשר להקטין משמעותית את נפח הקובץ- יש לגרור את הקובץ ישירות על הדפדפן ותוך זמן קצר הגירסה המצומצמת זמינה להורדה.
Sketchmaster-svg-optimizer- בשונה מכלים אחרים זה אתר זה מאפשר צירוף הקוד וניקוי שלו בהתאם לפרמטרים שהמשתמש קבע. בסיום הניקוי ניתן להשוות את התוצר למקור ולהעתיק את הקוד הנקי.
בדוגמא כלי האופטימיזציה Svgomg
אופטימיזציית קובצי SVG
הרשת רווייה במאמרים על אופטימיזציית קובצי SVG, לצורך מאמר זה נספק מספר טיפים בולטים שאינם מצריכים השקעה.
מימדי הקובץ- ראשית, כפי שציינו על אף שמדובר במידע וקטורי- גודל הקנבס בקבצים הנשמרים בפורמט זה משפיע על נפח הקובץ באותה מידה כמו בפורמטים אחרים. מסיבה זו מומלץ להימנע מקבצים, או משטחי עבודה גדולי מימדים.
שטחים מתים- נסו לקבוע את גודל משטח העבודה שלכם כגודל האובייקט. ודאו שמימדי הקובץ הם בפיקסלים שלמים ולא כוללים עשיריות פיקסל. מידע כזה יאריך את הקוד וינפח את הקובץ.
השתמשו בצורות בסיסיות שהתוכנה מציעה- עיגולים, אליפסות, מצולעים וקוים מוגדרים היטב על ידי הקוד ולכן מצריכים פחות קוד לתיאור. המצב אפילו משתפר אם מימדיהם לא כוללים מספרים עשרוניים.
אתרים אלו מאפשרים לבצע אופטימיזציית קובצי SVG על ידי הסרת מידע לא חיוני מהקובץ ועקב כך צמצום נפחו.
אתרים המספקים קובצי SVG חינמיים
האתרים הבאים מציעים להורדה חופשית קובצי SVG, בעיקר אייקונים- כדאי לתייק ולהוריד...
freepik-popular-icons
Icons8
Freeicons
Iconstore
Thenounproject
Icomoon
CaptainIconWeb
Goodstuffnononsense
הדור הבא של SVG
אתר התקינה W3C מדווח מזה שנים על ההתקדמות בפיתוח הדור הבא של פורמט SVG המכונה בשלב זה SVG2. הדור הבא יציע מאפיינים נוספים לצד דחיסה טובה יותר- מה שאומר שיש עתיד לפורמט זה- או אם תרצו- העתיד בפורמט זה...