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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אולי תהיו קצת סקרנים לדעת למה כדאי להשתמש בפס אנכי ב-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.
• דף W3C SVG שמכיל קישורים למפרטים, למשאבים וכו'.
• Raphaël היא ספריית JavaScript שמספקת API נוח לשרטוט ולהנפשה של תוכן SVG, עם גיבוי מעולה לדפדפנים ישנים.
• מקורות מידע בנושא SVG מאוניברסיטת Slippery Rock – כולל קישור למבוא מצוין ל-SVG.