סמלים

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

גרפיקה וקטורית ניתנת להתאמה

כשמדובר בתמונות מצולמות, יש הרבה אפשרויות לפורמט התמונה: 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">

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 כדי לבצע אופטימיזציה של הפלט.

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

בדיקת ההבנה

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