סמלים

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

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

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

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

קובצי PNG (וקובצי JPG, WebP ו-AVIF) הם תמונות של מפת סיביות (bitmap). תמונות של מפת סיביות (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">

XML משמש לכתיבת ההוראות בקובץ SVG. זוהי שפת סימון, כמו 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 שהם תמונות רקע ב-CSS, כדאי לקרוא את המאמר של Una על צביעת רקעים ב-SVG.
• שרה סואידאן כתבה על לחצני סמל נגישים.
• סקוט או'הארה כתב על סימון לפי הקשר של תמונות נגישות וקובצי SVG.
• אם אתם משתמשים בכלי לעיצוב גרפי כדי לייצא קובצי SVG, צריך להשתמש ב-SVGOMG כדי לבצע אופטימיזציה של הפלט.

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

בדיקת ההבנה

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