6 כשלים נפוצים של SVG (וכיצד לתקן אותם)

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

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

1. viewBox ערכים

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

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

הדרך הקלה ביותר לתקן את זה? לְהוֹסִיף overflow="visible" ל-SVG, בין אם זה בגיליון הסגנונות שלנו, בשורה ב- style תכונה או ישירות כמאפיין מצגת SVG. אבל אם נחיל גם א background-color ל-SVG או אם יש לנו אלמנטים אחרים סביבו, דברים עשויים להיראות קצת לא טובים. במקרה זה, האפשרות הטובה ביותר תהיה לערוך את viewBox כדי להראות את החלק הזה של מערכת הקואורדינטות שהיה מוסתר:

יש כמה דברים נוספים על viewBox שכדאי לסקר כשאנחנו על הנושא:

איך ה viewBox לעבוד?

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

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

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

הנה סימון פשוט המציג את ה-SVG viewBox ו width ו height תכונות שניהם מוגדרות על <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

עיצוב מחדש

אז זה:

<svg viewBox="0 0 700 700">

...מפות לזה:

<svg viewBox="start-x-axis start-y-axis width height">

נקודת התצוגה שאנו רואים מתחילה היכן 0 על ציר ה-x ו 0 על ציר ה-Y נפגשים.

על ידי שינוי זה:

<svg viewBox="0 0 700 700">

…לזה:

<svg viewBox="300 200 700 700">

...הרוחב והגובה נשארים זהים (700 יחידות כל אחת), אך ההתחלה של מערכת הקואורדינטות נמצאת כעת ב- 300 נקודה על ציר ה-x ו 200 על ציר ה-y.

בסרטון הבא אני מוסיף אדום <circle> ל-SVG עם המרכז שלו ב- 300 נקודה על ציר ה-x ו 200 על ציר ה-y. שימו לב איך משנים את viewBox קואורדינטות לאותם ערכים גם משנות את מיקום המעגל לפינה השמאלית העליונה של המסגרת בעוד הגודל המעובד של ה-SVG נשאר זהה (700×700). כל מה שעשיתי היה "לנסח מחדש" דברים עם ה viewBox.

מתקרב

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

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

איור 1 להלן מציג נקודה כחולה ב 900 לאורך ציר ה-x ו 900 לאורך ציר ה-y. אם אשנה את השניים האחרונים viewBox ערכים מ 700 ל 900 ככה:

<svg viewBox="300 200 900 900" width="700" height="700">

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

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

2. חסר width ו height

דבר נפוץ נוסף שאני מסתכל עליו בעת איתור באגים ב-SVG מוטבע הוא האם הסימון מכיל את width or height תכונות. זה לא עניין גדול במקרים רבים אלא אם ה-SVG נמצא בתוך מיכל עם מיקום מוחלט או מיכל גמיש (כפי שספארי מחשב את ה-SVG width ערך עם 0px במקום auto). לְמַעֵט width or height במקרים אלה מונע מאיתנו לראות את התמונה המלאה, כפי שאנו יכולים לראות לפי פתיחת ההדגמה הזו של CodePen והשוואה ב-Chrome, Safari ו-Firefox (הקש על תמונות לתצוגה גדולה יותר).

הפתרון? הוסף רוחב או גובה, בין אם כמאפיין מצגת, בשורה בתכונת הסגנון או ב-CSS. הימנע משימוש בגובה בפני עצמו, במיוחד כאשר הוא מוגדר ל 100% or auto. פתרון נוסף הוא ל להגדיר את הימין ו ערכים שמאליים.

אתה יכול לשחק איתו העט הבא ולשלב בין האפשרויות השונות.

3. בשוגג fill ו stroke צבעים

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

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

4. חסרים תעודות זהות

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

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

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

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

5. רשימת רשימת גזירה ומיסוך

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

חיתוך ומיסוך CSS לאפשר לנו "להסתיר" חלקים של תמונה או אלמנט. ב-SVG, <clipPath> היא פעולה וקטורית החותכת חלקים מתמונה ללא תוצאות באמצע הדרך. ה <mask> תג הוא פעולת פיקסל המאפשרת שקיפות, אפקטים של שקיפות למחצה וקצוות מטושטשים.

זוהי רשימת בדיקה קטנה למקרים של ניפוי באגים שבהם מעורבים גזירה ומיסוך:

• ודא שנתיב הגזירה (או המסכה) והגרפיקה חופפים זה לזה. החלקים החופפים הם מה שמוצג.
• אם יש לך נתיב מורכב שאינו חוצה את הגרפיקה שלך, נסה להחיל טרנספורמציות עד שיתאימו.
• אתה עדיין יכול לבדוק את הקוד הפנימי עם DevTools למרות ש- <clipPath> or <mask> אינם מעובדים, אז השתמש בו!
• העתק את הסימון פנימה <clipPath> ו <mask> והדבק אותו לפני סגירת </svg> תָג. לאחר מכן הוסף א fill לצורות הללו ולבדוק את הקואורדינטות והממדים של ה-SVG. אם אתה עדיין לא רואה את התמונה, נסה להוסיף overflow="hidden" אל ה <svg> תָג.
• בדוק כי א ייחודי תעודת זהות משמשת עבור <clipPath> or <mask>, ושאותו מזהה מוחל על הצורות או קבוצת הצורות הנקוצצות או מוסיכות. מזהה לא תואם ישבור את המראה.
• בדוק אם יש שגיאות הקלדה בסימון בין ה <clipPath> or <mask> תגים.
• fill, stroke, opacity, או סגנונות אחרים שהוחלו על האלמנטים בפנים <clipPath> חסרי תועלת - החלק השימושי היחיד הוא גיאומטריית אזור המילוי של אותם אלמנטים. זו הסיבה שאם אתה משתמש ב-a <polyline> זה יתנהג כמו א <polygon> ואם אתה משתמש ב <line> לא תראה שום אפקט גזירה.
• אם אינך רואה את התמונה שלך לאחר החלת א <mask>, וודא כי ה- fill מתוכן המיסוך אינו שחור לחלוטין. הבהירות של אלמנט המיסוך קובעת את האטימות של הגרפיקה הסופית. תוכל לראות מבעד לחלקים הבהירים יותר, והחלקים הכהים יותר יסתירו את תוכן התמונה שלך.

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

6. מרחבי שמות

האם ידעת ש-SVG היא שפת סימון מבוססת XML? ובכן, זה כן! מרחב השמות עבור SVG מוגדר ב- xmlns תְכוּנָה:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

יש הרבה מה לדעת על ריווח שמות ב-XML ול-MDN יש בסיס מצוין. די לומר, מרחב השמות מספק הקשר לדפדפן, ומודיע לו שהסימון ספציפי ל-SVG. הרעיון הוא שמרחבי שמות עוזרים למנוע התנגשויות כאשר יותר מסוג אחד של XML נמצא באותו קובץ, כמו SVG ו-XHTML. זו בעיה הרבה פחות שכיחה בדפדפנים מודרניים, אבל יכולה לעזור להסביר בעיות בעיבוד SVG בדפדפנים ישנים יותר או בדפדפנים כמו Gecko שמחמירים בהגדרת doctypes ומרחבי שמות.

מפרט SVG 2 אינו דורש ריווח שמות בעת שימוש בתחביר HTML. אבל זה קריטי אם תמיכה בדפדפנים מדור קודם היא בראש סדר העדיפויות - בנוסף, לא יזיק כלום להוסיף את זה. כך, כאשר ה <html> אלמנטים xmlns תכונה מוגדרת, היא לא תתנגש באותם מקרים נדירים.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

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

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

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

קידומת מרחב שמות נפוצה נוספת היא xlink:href. אנו משתמשים בו הרבה כאשר אנו מתייחסים לחלקים אחרים של ה-SVG כמו: דפוסים, פילטרים, אנימציות או מעברי צבע. ההמלצה היא להתחיל להחליף אותו ב href מכיוון שהשני הוצא משימוש מאז SVG 2, אך עשויות להיות בעיות תאימות עם דפדפנים ישנים יותר. במקרה כזה, נוכל להשתמש בשניהם. רק זכרו לכלול את מרחב השמות xmlns:xlink="http://www.w3.org/1999/xlink" אם אתה עדיין משתמש xlink:href.

העלו את כישורי ה-SVG שלכם ברמה!

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

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

יש כמה אנשים שאני מציע לעקוב אחרי טובות הקשורות ל-SVG:

• הפצת תוכן ויחסי ציבור מופעל על ידי SEO. קבל הגברה היום.
• Platoblockchain. Web3 Metaverse Intelligence. ידע מוגבר. גישה כאן.
• מקור: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/