Icons

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

Scalable Vector Graphics

כשמדובר בתמונות, יש הרבה אפשרויות לפורמט התמונה: JPG,‏ WebP ו-AVIF. לתמונות שאינן צילומי אוויר, אפשר לבחור בין הפורמט Portable Network Graphics ‏ (PNG) לבין הפורמט Scalable Vector Graphics ‏ (SVG).

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

תמונות PNG (וגם JPG,‏ WebP ו-AVIF) הן תמונות מפת סיביות. תמונות Bitmap מאחסנות מידע כפיקסלים. ב-SVG, המידע מאוחסן כהוראות לשרטוט. כשהדפדפן קורא את קובץ ה-SVG, ההוראות מומרות לפיקסלים. והכי חשוב, ההוראות האלה הן יחסיות. לא משנה באילו מידות משתמשים כדי לתאר קווים וצורות, הכל מוצג בחדות הנכונה. במקום ליצור כמה קובצי SVG בגדלים שונים, אפשר ליצור קובץ SVG אחד שיתאים לכל הגדלים. אין צורך להשתמש במאפיין srcset.

<img src="image.svg" alt="A description of the image." width="25" height="25">
<img src="image.svg" alt="A description of the image." width="250" height="250">

קובץ SVG מכיל הוראות שנכתבות ב-XML. זוהי שפת תגי עיצוב, כמו HTML.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
  <title>Smiling face</title>
  <circle r="20" fill="yellow" stroke="black"/>
  <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
  <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
  <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
</svg>

אמוג'י של פרצוף סמיילי צהוב שגדל בלי פיקסול.

אפשר אפילו להוסיף SVG ל-HTML.

<figure>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="-21 -21 42 42" width="100" height="100">
    <title>Smiling face</title>
    <circle r="20" fill="yellow" stroke="black"/>
    <ellipse rx="2.5" ry="4" cx="-6" cy="-7" fill="black"/>
    <ellipse rx="2.5" ry="4" cx="6" cy="-7" fill="black"/>
    <path stroke="black" d="M -12,5 A 13.5,13.5,0 0,0 12,5 A 13,13,0 0,1 -12,5"/>
  </svg>
  <figcaption>
  A description of the image.
  </figcaption>
</figure>

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

סמלים וטקסט

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

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

<button>
<img src="hamburger.svg" alt="" width="16" height="16">
Menu
</button>

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

<button class="menu">
Menu
</button>

.menu {
  background-image: url(hamburger.svg);
  background-position: 0.5em;
  background-repeat: no-repeat;
  background-size: 1em;
  padding-inline-start: 2em;
}

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

<button class="menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
  Menu
</button>

סמלים עצמאיים

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

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

אם משתמשים ברכיב img, תווית הנגישות של הסמל מגיעה מהמאפיין alt.

<button>
<img src="hamburger.svg" alt="Menu" width="16" height="16">
</button>

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

<button aria-label="Menu">
<img src="hamburger.svg" alt="" width="16" height="16">
</button>

אם אתם מציבים את ה-SVG בתוך ה-HTML, צריך להשתמש במאפיין aria-label בקישור או בלחצן כדי לתת לו תווית נגישות, ובמאפיין aria-hidden בסמל.

<button aria-label="Menu">
  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80" width="16" height="16">
    <rect width="100" height="20" />
    <rect y="30" width="100" height="20"/>
    <rect y="60" width="100" height="20"/>
  </svg>
</button>

עיצוב סמלים

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

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

button {
 color: blue;
}
button rect {
  fill: blue;
}

אפשר גם להחיל סגנונות של hover ו-focus.

button:hover,
button:focus {
  color: red;
}
button:hover rect,
button:focus rect {
  fill: red;
}

משאבים

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

בדיקה של רמת ההבנה שלך

בחינת הידע שלכם בסמלים

קובץ SVG יכול להתמודד עם כל צפיפות פיקסלים באמצעות קובץ אחד או בלוק קוד אחד <svg>.

True
קובץ SVG כולל את אופן השרטוט של הצורות והקווים, בכל צפיפות פיקסלים, קנה מידה או רמת זום.
לא נכון
בניגוד ל-.png או ל-.jpg, ב-SVG אין צורך ב-srcset או ברכיב <picture>.

מהם היתרונות של קוד SVG שנמצא ישירות ב-HTML?

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