קנווס מול SVG: בחירת הכלי המתאים לעבודה

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

ראשית, בואו נבהיר קצת מהם HTML5 Canvas ו-SVG.

מה זה HTML5 Canvas?

הנה כיצד המפרט של WHATWG מציג את האלמנט canvas:

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

במילים אחרות, התג <canvas> מגלה משטח שבו אפשר ליצור ולתפעל תמונות רצועתיות פיקסל בפיקסל באמצעות ממשק סקריפטי של JavaScript.

הנה דוגמה קוד בסיסית:

ה-HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

ה-JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

אפשר לנצל את שיטות ותכונות ספריית HTML5 Canvas על ידי השגת התיוג לאובייקט ההקשר ה-2D. בדוגמה לעיל, ציירתי ריבוע אדום פשוט, בגודל 100 x 100 פיקסלים, ממוקם 10 פיקסלים משמאל ו-10 פיקסלים מלמעלה של משטח הציור <canvas> drawing surface.

היותם תלויי פרוספקטיבה, התמונות שאתם יוצרים באמצעות <canvas> עשויות לאבד איכות כאשר מוגדלות או מוצגות על מסכי Retina Displays.

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

מה זה SVG?

SVG מסמל Scalable Vector Graphics. לפי המפרט:

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

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

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

הנה אותו ריבוע אדום (שנוצר קודם עם HTML5 Canvas) הפעם צוייר באמצעות SVG:

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

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

מוד מיידי ומוד שמור

חשוב מאוד להבחין בין מוד מיידי לבין מוד שמור. HTML5 Canvas הוא דוגמה לראשון, SVG לשני.

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

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

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

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

HTML5 Canvas: יתרונות וחסרונות

המסמך המיוחס ל-HTML5 Canvas ממליץ בבירור שאורחים לא צריכים לא להשתמש באלמנט <canvas> במקום שיש להם כלים מתאימים יותר זמינים להם.

לדוגמה, עבור אלמנט <header> עשיר מבחינה גרפית, הכלים הטובים ביותר הם HTML ו-CSS, לא <canvas> (ולא SVG, דרך אגב). דר אבסטרקט, יוצר ומייסד הממסד Zim JS canvas framework, מאשר את נקודת המבט הזו כשהוא כותב:

ה-DOM וממשקי ה-DOM טובים בייצוג מידע ובמיוחד מידע טקסטואלי. לעומת זאת, הקַנוָס הוא תמונה. ניתן להוסיף טקסט לקנוס ולעשות אותו תגובתי, אך הטקסט אינו ניתן לבחירה או חיפוש בקלות כמו ב-DOM. דפים ארוכים עם לחיצות מתקדמות של טקסט או טקסט ותמונות הם שימוש מצוין ב-DOM. ה-DOM מעולה לאתרי חברתיות, פורומים, קניות וכל אפליקציות המידע שאנו רגילים אליהם. — “מתי להשתמש בספריית או ממשק קַנוָס JavaScript”

אז, זו דוגמה ברורה למתי <canvas> אינו מומלץ לשימוש. אבל מתי <canvas> הוא אופציה טובה?

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

I had this slide in a lot of talks and workshops over the years: pic.twitter.com/4K0C7mNzg2

— Sarah Drasner (@sarah_edo) October 2, 2019

ניתן לצפות בתמונה מהציוץ כאן.

למה HTML5 Canvas יכול להיות מעולה

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

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

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

משחקים ואמנות יוצרת

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

מעקב אחר קרניים

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

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

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

עם זאת, למרות ש-HTML5 Canvas הוא בהחלט מתאים יותר למשימה מאשר SVG יכל להיות, זה לא בהכרח מתייחס לעיבוד הקרניים כמיטבי באלמנט <canvas>. למעשה, הלחץ על ה-CPU יכול להיות די משמעותי, עד כדי שהדפדפן שלך עלול להפסיק להגיב.

ציור מספר משמעותי של אובייקטים על משטח קטן

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

התמונה לעיל היא מהמאמר הזה ב-MSDN, שהיה חלק מהמחקר שלי לחץ זה.

החלפת פיקסלים בסרטונים

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

למה HTML5 Canvas אינו כל כך מעולה

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

כמותיות

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

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

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

למרות זאת, בעזרת ספריות מעולות כמו CreateJS ו-Zim (שמרחיב את CreateJS), מפתחים יכולים יחסית במהירות לשלב אירועי מכ"מ, בדיקות פגיעה, תנועות רב-מגע, יכולות גרירה והזזה, בקרות ועוד, ליצירות המבוססות על Canvas.

נגישות

למרות שניתן לקחת צעדים כדי להפוך גרפיקה Canvas ליותר נגישה – וספריה Canvas טובה כמו Zim יכולה לעזור כאן למהירת התהליך – Canvas לא זוהר כשמדובר בנגישות. מה שמצויר על פני הקַנוָס הוא רק חבורה של פיקסלים, שאינם ניתנים לקריאה או פירוש על ידי טכנולוגיות עזר או חיפושי מנועים. זו עוד תחום בו SVG הוא מועדף: SVG הוא פשוט XML, מה שהופך אותו לניתן לקריאה על ידי בני אדם ומכונות.

אין תלות ב-JavaScript

אם אינך רוצה להשתמש ב-JavaScript ביישום שלך, אז Canvas איננו החבר הטוב ביותר שלך. למעשה, הדרך היחידה בה תוכל לעבוד עם האלמנט <canvas> היא באמצעות JavaScript. לעומת זאת, אפשר לצייר גרפיקה SVG באמצעות תוכנת עריכה וקטורית סטנדרטית כמו Adobe Illustrator או Inkscape, ואפשר להשתמש ב-CSS טהור כדי לשלוט במראה שלהם ולבצע פענוחים מרכזיים, פענוחים עדינים ואינטראקציות זעירות.

שילוב HTML5 Canvas ו-SVG עבור תרחישים מתקדמים

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

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

מסקנה

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

מה התשובה?

כריס קויהר מסכים עם בנג'מין דה קוק, כפי שהאחרון צופן:

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

— Benjamin De Cock (@bdc) October 2, 2019

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

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

שאלות שונות שנשאלו (FAQs) על Canvas מול SVG