מדריך למשתמש ביטול

SVG

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

קישור עמוק של Adobe Illustrator

נסו זאת ביישום
החלת מסנני SVG בכמה שלבים פשוטים.

אודות SVG

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

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

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

החלת אפקטי SVG

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

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

הערה:

כדי לשנות את מסנני ברירת המחדל של SVG ב-Illustrator, יש לערוך את קובץ Adobe SVG Filters.svg במיקום הבא באמצעות עורך טקסט:

  • macOS: ~/Library/Application Support/Adobe/Adobe Illustrator <version>/<locale>
  • Windows: C:\Users\<username>\AppData\Roaming\Adobe\Adobe Illustrator <version> Settings\<locale>\x64

ניתן לשנות הגדרות מסנן קיימות, למחוק אותן ולהוסיף הגדרות חדשות.

החלת אפקט ברירת מחדל

  1. בחרו אובייקט או קבוצה (או שכבה בלוח Layers).

  2. יש לעבור אל Effect > SVG Filters > Apply SVG Filter.

החלת אפקט מותאם אישית

  1. בחרו אובייקט או קבוצה (או שכבה בלוח Layers).

  2. יש לעבור אל Effect ‏> SVG Filters ‏> Apply SVG Filter

  3. בתיבת הדו-שיח יש לבחור באפקט ולאחר מכן לבחור את Edit SVG Filter  . יש לערוך את קוד ברירת המחדל וללחוץ על הלחצן OK.

יצירה והפעלה של אפקט חדש

  1. בחרו אובייקט או קבוצה (או שכבה בלוח Layers).

  2. יש לעבור אל Effect > SVG Filters > Apply SVG Filter.

  3. בתיבת הדו-שיח, בחרו את מסנן SVG חדש  . יש להזין את הקוד החדש וללחוץ על OK.

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

הערה:

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

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

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

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

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

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

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

ניתן להשתמש בחלונית SVG Interactivity כדי למחוק את אחד האירועים או את כולם.

למחיקת אירוע אחד

  • יש לבחור את האירוע וללחוץ על Remove Selected Entry   .

למחיקת כל האירועים

  • יש ללחוץ על Clear Events מתפריט החלונית  

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

יש לבחור באפשרות Link JavaScript files   וללחוץ על Add כדי להוסיף עוד קובצי JavaScript, וכדי להסיר את שורת ה-JavaScript יש ללחוץ על Remove.

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

  1. בחלונית SVG Interactivity יש לבחור באפשרות Event. ‏(ראה אירועי 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. בעת שמירת גרפיקה בפורמט SVG, כל שכבה מומרת לרכיב קבוצה (<g>). (לדוגמה, שכבה בשם Button1 הופכת ל-<g id="Button1_ver3.0"> בקובץ SVG.) שכבות מקוננות הופכות לקבוצות מקוננות של SVG, ושכבות נסתרות נשמרות עם מאפיין הסגנון display="none" SVG.

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

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

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

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

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

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

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

פריטים דומים נוספים

יש לך שאלה או רעיון?

שאל את הקהילה

אם יש לך שאלה לשאול או רעיון לשתף, בוא להשתתף בקהילת Adobe Illustrator. נשמח לשמוע ממך ולראות את היצירות שלך.

קבל עזרה במהירות ובקלות

משתמש חדש?