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

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

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

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

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

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

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

יסודות ההרחבה

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

הלוגו של HTML5 מוצג למטה - ניחשתם, מקורו בקובץ SVG.

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

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

שימוש יעיל בהדרגתיות

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

<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) נייד על ידי הסרת הצורך בסקריפט.

בנוסף, הדפדפן עצמו יכול לנצל את הידע שלו בציור כדי להבטיח שהתקורה של המעבד (CPU) תשמש ליצירת האנימציה המהודרת.

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

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

לאן מכאן?

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

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

משאבים טובים אחרים

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