אודות SVG

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

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

ניתן לשמור גרפיקהבתבנית SVGבאמצעות הפקודות Save, Save As, ‏Save A Copy‍‏ או Save For Web & Devices. כדי לגשת לערכת האפשרויות המלאה לייצוא SVG, השתמש בפקודה Save, Save As או Save A Copy. הפקודה Save For Web & Devices מספקת תת-ערכה של אפשרויות לייצוא SVG החלות על עבודה המיועדת לאינטרנט.

אופן הגדרת הגרפיקה ב-Illustrator משפיע על קובץ SVG שנוצר. זכרו את ההנחיות הבאות:

  • השתמשו בשכבות להוספת מבנה לקובץ SVG. בשעת שמירת גרפיקה בתבנית SVG, כל שכבה מומרת לרכיב קבוצה (<g>). (לדוגמה, שכבה בשם Button1 הופכת ל-<g id="Button1_ver3.0"‍‏> בקובץ SVG). שכבות מקוננות הופכות לקבוצות SVG מקוננות, ושכבות מוסתרות נשמרות עם מאפיין העיצוב של SVG‏ display="none"‎.

  • אם ברצונכם שאובייקטים בשכבות שונות יופיעו שקופים, התאימו את האטימות של כל אובייקט במקום של כל שכבה. אם משנים את האטימות ברמת השכבה, קובץ SVG שנוצר לא יציג שקיפות כפי שהיא מופיעה ב-Illustrator.

  • לא ניתן לשנות גודל נתוני רסטר ב-SVG Viewer, ולא ניתן לערוך אותם כרכיבי SVG אחרים. אם הדבר אפשרי, יש להימנע מיצירת גרפיקה שיתווסף לה רסטר בקובץ SVG. בשעת שמירה בתבנית SVG, נוסף רסטר לרשתות שינוי של מעברי צבע ואובייקטים שמשתמשים באפקטים Rasterize‏‏, Artistic‏, Blur‏, Brush Strokes‏, Distort‏, Pixelate‏, Sharpen‏, Sketch‏, Stylize‏, Texture‏, ו-Video. באופן דומה, גם סגנונות גרפיים הכוללים אפקטים אלה גורמים להוספת רסטר. השתמשו באפקטי SVG להוספת אפקטים גרפיים, מבלי לגרום להוספת רסטר.

  • לשיפור ביצועי SVG, השתמשו בסמלים ופשטו את הנתיבים בגרפיקה. במקרה שהביצועים הם בעדיפות העליונה, הימנעו גם משימוש במברשות שיוצרות נתוני נתיב רבים, כגון Charcoal‏, Fire Ash ו-Scroll Pen.

  • להוספת קישורי אינטרנט לקובץ SVG, השתמשו בפרוסות, במפות תמונה ובסקריפטים.

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

החלת אפקטי SVG

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

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

הערה:

כדי לשנות את מסנני SVG המוגדרים כברירת מחדל של Illustrator, השתמש בעורך טקסט כדי לערוך את מסנני SVG של Adobe.svgקובץ בתיקייה Documents and Settings/<userdir>/Application Data/Adobe/Adobe Illustrator <version number> Settings/<location>.‎ ניתן לשנות הגדרות מסנן קיימות, למחוק הגדרות מסנן ולהוסיף הגדרות מסנן חדשות.

  1. בחר אובייקט או קבוצה (או הקצה שכבה בחלונית Layers).
  2. בצע אחת מהפעולות הבאות:
    • להחלת אפקט עם הגדרות ברירת המחדל, בחר באפקט בחלק התחתון של תפריט המשנה Effect ‍‏> SVG Filters.

    • להחלת אפקט עם הגדרות מותאמות אישית, בחר Effect ‍‏> SVG Filters ‍‏> Apply SVG Filter. בתיבת הדו-שיח, בחר באפקט ולחץ על הלחצן Edit SVG Filter.ערוך את קוד ברירת המחדל ולחץ על OK.

    • ליצירה ולהחלה של אפקט חדש, בחר Effect ‍‏> SVG Filters ‍‏> Apply SVG Filter. בתיבת הדו-שיח, לחץ על הלחצן New SVG Filter,הזן את הקוד החדש, ולחץ על OK.

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

      הערה: בעת שימוש באפקטים מרובים על אובייקט, אפקט SVG חייב להיות האפקט האחרון; במילים אחרות, עליו להופיע בתחתית החלונית Appearance (מעל לערך Transparency). אם אפקטים אחרים מוחלים אחרי אפקט SVG, פלט SVG יכלול אובייקט רסטר.

ייבוא אפקטים מקובץ SVG

  1. בחר Effect ‍‏> SVG Filter ‍‏> Import SVG Filter.

  2. בחר בקובץ SVG שברצונך לייבא ממנו אפקטים, ולחץ על הלחצן Open.

סקירת החלונית SVG Interactivity

החלונית SVG Interactivity (Window ‍‏> SVG Interactivity) מאפשרת לך להפוך את הגרפיקה שלך לאינטראקטיבית יותר, כאשר אתה מייצא אותה לתצוגה בדפדפן אינטרנט. לדוגמה, באמצעות יצירת אירוע שמפעיל פקודת JavaScript, ניתן ליצור במהירות תנועה בעמוד אינטרנט בשעה שהמשתמש מבצע פעולה, כגון הזזת מצביע העכבר לאובייקט. החלונית SVG Interactivity מאפשרת גם להציג את כל האירועים וקובצי JavaScript הקשורים לקובץ הנוכחי.

מחיקת אירוע מהחלונית SVG Interactivity

  • למחיקת אירוע בודד, בחר באירוע ולחץ על הלחצן Delete או בחר באפשרות Delete Event מתפריט החלונית.
  • למחיקת כל האירועים, בחר Clear Events מתפריט החלונית.

רשימה, הוספה, או הסרה של אירועים המקושרים לקובץ.

  1. לחץ על הלחצן Link JavaScript .
  2. בתיבת הדו-שיח JavaScript Files, בחר פריט JavaScript ובצעו אחת מהפעולות הבאות:
    • לחץ על Add כדי לעיין ולחפש קובצי JavaScript נוספים.

    • לחץ על Remove להסרת ערך JavaScript שנבחר.

הוספת אינטראקטיביות SVG לגרפיקה

  1. בחר אירוע בחלונית SVG Interactivity. ‏(ראה אירועי SVG).

  2. הזן JavaScript מתאים, והקש Enter.

אירועי SVG

onfocusin

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

onfocusout

מפעיל את הפעולה בשעת סיום ההתמקדות ברכיב (לעיתים קרובות, בשעת התמקדות ברכיב אחר).

onactivate

מפעיל את הפעולה בלחיצת עכבר או הקשה במקלדת, בהתאם לרכיב SVG.

onmousedown

מפעיל את הפעולה בלחיצה ממושכת על רכיב באמצעות לחצן העכבר.

onmouseup

מפעיל את הפעולה בשעת שחרור לחצן העכבר לאחר לחיצה על רכיב.

onclick

מפעיל את הפעולה בלחיצת עכבר על הרכיב.

onmouseover

מפעיל את הפעולה בשעת הזזת המצביע לרכיב.

onmousemove

מפעיל את הפעולה כשהמצביע נמצא על רכיב.

onmouseout

מפעיל את הפעולה בשעת הזזת המצביע מרכיב.

onkeydown

מפעיל את הפעולה בשעת הקשה על מקש במקלדת.

onkeypress

מפעיל את הפעולה בשעת הקשה ממושכת על מקש במקלדת.

onkeyup

מפעיל את הפעולה בשעת שחרור מקש.

onload

מפעיל את הפעולה לאחר שהדפדפן משלים ניתוח מסמך SVG. השתמשו באירוע זה להפעלת תכונות אתחול חד-פעמיות.

onerror

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

onabort

מפעיל את הפעולה כשטעינת העמוד נפסקת לפני שהרכיב נטען בשלמותו.

onunload

מפעיל את הפעולה כשמסמך SVG מוסר מחלון או ממסגרת.

onzoom

מפעיל את הפעולה כשרמת הזום של המסמך משתנה.

onresize

מפעיל את הפעולה בשעת שינוי גודל של תצוגת המסמך.

onscroll

מבצע את הפעולה בעת גלילה או הזזה של תצוגת המסמך.

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

זמינה אפשרות חדשה בשם SVG Export (File ‍‏> Export ‍‏> SVG). תהליך העבודה החדש מאפשר לך ליצור קובצי SVG סטנדרטיים וממוטבים לאינטרנט עבור פרוייקטי עיצוב אינטרנט ומסך.

האפשרויות הזמינות הן:

  • Styling. בחר את אופן הכתיבה של הקוד שהתקבל בקובץ ה-SVG. בחר בין הסגנונות Internal CSS‏, Inline Style או Presentation Attributes.
  • Font. בחר את אופן ייצוג הגופנים בקובץ ה-SVG‏. ‏‫קווי המתאר שומרים את הגדרת הנתיב,והם המתאימים ביותר.
  • Images: בחר את האפשרות לשמור את התמונות כפריטים מוטמעים במסמך או כקבצים מקושרים מחוץ למסמך.
  • Object IDs: בחר את אופן הקצאת סוגי המזהה (שמות) לאובייקטים‬ בקובץ ה-SVG. בחר מבין Layer Names‏, Minimal או Unique. אפשרות זו קובעת את אופן הטיפול בשמות כפולים של אובייקטים ואת אופן הקצאת השמות לאובייקטים בקוד ה-CSS שמיוצא.
  • Decimal: בחר את כמות המידע שתרצה לשמור בנוגע לדיוק מיקום האובייקט. ערך גבוה יותר של Decimal יגדיל את רמת הדיוק של אופן פריסת האובייקטים ובכך ישפר את האמינות החזותית של קובץ ה-SVG המעובד. עם זאת, הגדלת הערך של Decimal מגדילה גם את קובץ ה-SVG המיוצא שהתקבל.
  • Minify: למיטוב גודל קובץ ה-SVG על-ידי הסרת קבוצות ריקות ורווחים ריקים. בחירה באפשרות זו גם מקטינה את רמת הקריאות של קוד ה-SVG שמתקבל.
  • Responsive. סימון אפשרות זו מבטיחה שה-SVG שנוצר משנה קנה מידה בתוך הדפדפן. לא נכתבים ערכי גודל מוחלטים.
  • Show Code: לפתיחת התוכן המיוצא בעורך הטקסט המוגדר כברירת המחדל.
  • Show inbrowser (סמל): להצגת התמונה בדפדפן האינטרנט המהווה ברירת מחדל.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת