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

Alex Danilo

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

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

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

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

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

יש הרבה דרכים ליצור תוכן בפורמט SVG, למשל באמצעות כלים פופולריים ליצירת תוכן כמו אפליקציית Drawing ב-Google Drive,‏ Inkscape,‏ Illustrator,‏ Corel Draw ועוד. נלמד איך משתמשים בנכסי SVG ונספק טיפים לאופטימיזציה שיעזרו לכם להתחיל.

יסודות ההתאמה להיקף

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

הלוגו של HTML5 מוצג בהמשך – וניחשתם נכון, הוא מתחיל כקובץ SVG.

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

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

אבל רגע, יש עוד – הלוגו של HTML5 הוא רק 1,427 בייטים! אוי, זה קטן כל כך שזה לא ישפיע כמעט על חבילת הגלישה בנייד בזמן הטעינה, כך שהטעינה תהיה מהירה והיא תהיה זולה ומהירה למשתמשים שלכם!

יתרון נוסף של קובצי SVG הוא שאפשר לדחוס אותם באמצעות GZIP כדי לצמצם אותם עוד יותר. כשדוחסים קובץ SVG באופן הזה, צריך לשנות את סיומת הקובץ ל-'svgz'. במקרה של הלוגו ב-HTML5, הוא מצטמצם ל-663 בייטים בלבד אחרי הדחיסה – ורוב הדפדפנים המודרניים מטפלים בו בקלות!

הערה: לתשומת ליבכם: דפדפנים מסוימים יכולים לטעון את קובצי ה-GZIP בצורה תקינה, אבל נכשלים בטעינה דרך התג <img>. למרבה המזל, ב-HTTP אפשר להשתמש בדחיסת GZIP, כך שהגדרה נכונה של שרת האינטרנט עשויה להיות דרך טובה יותר לנצל את היתרונות של דחיסת GZIP.

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

אבל כמובן שקובצי PNG ו-JPEG הם לא זהים. בחלק מהטיפים לאופטימיזציה מומלץ להשתמש בפורמט JPEG במקום ב-PNG, אבל לא תמיד זו רעיון טוב. כדאי לעיין בתמונות שבהמשך. התמונה בצד ימין היא קובץ PNG של החלק הימני העליון של הלוגו של HTML5, שהוגדל פי 6. התמונה בצד שמאל היא אותה תמונה, אבל היא מקודדת בפורמט JPEG.

תמונה בפורמט PNG

תמונה בפורמט JPEG

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

יצירת רקעים וקטורים

נראה איך אפשר להשתמש בקובץ וקטור כרקע של דף. דרך קלה אחת היא להצהיר על קובץ הרקע באמצעות מיקום קבוע ב-CSS:

<style>
#bg {
  position:fixed; 
  top:0; 
  left:0; 
  width:100%;
  z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>

תבחינו שלא משנה מה גודל המסך, התמונה תהיה בגודל מתאים עם קצוות חדים וברורים.

לאחר מכן, כמובן, אנחנו רוצים להוסיף תוכן מעל הרקע.

אבל כפי שאפשר לראות, התוצאה לא אידיאלית כי אי אפשר לקרוא את הטקסט. אז מה עושים?

התאמת הרקע כך שייראה טוב יותר

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

#bg {
  opacity: 0.2;
}

התוצאה תהיה כזו:

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

פתרון טוב יותר

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

עכשיו, אחרי שקיבלנו הבנה טובה של כמה עקרונות בסיסיים, נמשיך לתכונות נוספות.

שימוש יעיל בצבעים מדורגים

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

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="blueshiny">
      <stop stop-color="#a0caf6" offset="0"/>
      <stop stop-color="#1579df" offset="0.5" />
      <stop stop-color="#1675d6" offset="0.5"/>
      <stop stop-color="#115ca9" offset="1"/>
    </linearGradient>
  </defs>
  <g id="button" onclick="alert('ouch!');">
    <rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
    <text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
  </g>
</svg>

לחצן התוצאה ייראה בערך כך:

שימו לב שהמעבר הצבעוני הוספנו הולך משמאל לימין. זוהי כיוון ברירת המחדל של העברה מדורגת ב-SVG. אבל אנחנו יכולים לעשות טוב יותר, מכמה סיבות: אסתטיקה וביצועים. ננסה לשנות את כיוון הדרגתיות כדי שהיא תיראה קצת יותר יפה. הגדרת המאפיינים 'x1', 'y1', 'x2' ו-'y2' בפס ההדרגה הליניארי קובעת את הכיוון של צבע המילוי.

הגדרה של המאפיין 'y2' בלבד מאפשרת לנו לשנות את שיפוע הצבע כך שיהיה אלכסוני. אז השינוי הקטן הזה בקוד:

<linearGradient id="blueshiny" y2="1">

נותן לנו מראה שונה של הכפתור, והוא נראה כמו בתמונה שבהמשך.

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

<linearGradient id="blueshiny" x2="0" y2="1">

התוצאה נראית כמו בתמונה שבהמשך.

אז מה כל הדיון על זוויות שונות של העקומה?

הערה: טיפ: כדאי להשתמש בצבעים שעוברים משיטה למטה למעלה כדי לשפר את הביצועים.

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

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

הערה: חשוב לזכור להימנע משימוש בצבעים דהויים לאורך רדיוס, אלא אם אתם יודעים שהם ישופרו באמצעות חומרה. בתוכנה, הם איטיים מאוד.

אם אנחנו מרגישים נועזים במיוחד עם הידע החדש על פס ההדרגה, נוכל להוסיף פס הדרגה מגניב מאחורי הלוגו ב-HTML5 על ידי הוספת הקוד הבא:

<defs>
<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0" />
    <stop stop-color="#CCCCFF" offset="0.2" />
    <stop stop-color="#CCFFCC" offset="0.4" />
    <stop stop-color="#FFFFCC" offset="0.6" />
    <stop stop-color="#FFEDCC" offset="0.8" />
    <stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>

הקוד שלמעלה מוסיף שיפוע לינאריים אנכי דהוי לרקע של הלוגו שלנו ב-HTML5, כדי ליצור גוון עדין של כמה צבעים שפועל מהר – מהר כמו רקע בצבע אחיד.

הערה: חשוב לזכור שבחירת הגודל של מלבן הרקע מבטיחה שהצבע ימלא את המסכים בכל המכשירים הניידים שלנו שמפורטים בתחילת המאמר הזה (יחסי הגובה-רוחב של המסכים שלהם נעים בין 10/16 ל-18/10).

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

אנימציה בקלות

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

לדוגמה, נשנה את הלוגו הצבעוני שלנו ב-HTML5 על ידי שינוי ההגדרה של העברה לינארית לקוד הבא:

<linearGradient id="grad1" x2="0" y2="1">
    <stop stop-color="#FBE6FB" offset="0">
    <animate attributeName="stop-color"
        values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCCCFF" offset="0.2">
    <animate attributeName="stop-color"
        values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#CCFFCC" offset="0.4">
    <animate attributeName="stop-color"
        values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFFFCC" offset="0.6">
    <animate attributeName="stop-color"
        values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFEDCC" offset="0.8">
    <animate attributeName="stop-color"
        values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
    <stop stop-color="#FFCCCC" offset="1">
    <animate attributeName="stop-color"
        values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
        begin="0s" dur="20s" repeatCount="indefinite"/>
    </stop>
</linearGradient>

בתמונה שבהמשך אפשר לראות את התוצאה של השינויים האלה.

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

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

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

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

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

מה עושים עכשיו?

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

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

מקורות מידע טובים אחרים

• Inkscape – אפליקציית ציור בקוד פתוח שמשתמשת בפורמט הקובץ SVG.
• Open Clip Art – ספריית גרפיקה ענקית בקוד פתוח שמכילה אלפי תמונות SVG.
• דף SVG של W3C שמכיל קישורים למפרטים, למשאבים וכו'.
• Raphaël – ספריית JavaScript שמספקת ממשק API נוח לציור וליצירת אנימציות של תוכן SVG, עם חלופה נהדרת לדפדפנים ישנים יותר.
• מקורות מידע בנושא SVG מאוניברסיטת Slippery Rock – כולל קישור למבוא מצוין ל-SVG.