نمادها

بیشتر تصاویر بخشی از محتوای شما هستند، اما آیکون‌ها بخشی از رابط کاربری شما هستند. آن‌ها باید به همان روشی که متن رابط کاربری شما تغییر می‌کند، مقیاس‌پذیر و سازگار شوند.

گرافیک برداری مقیاس‌پذیر

وقتی صحبت از تصاویر عکاسی می‌شود، گزینه‌های زیادی برای فرمت تصویر وجود دارد: JPG، WebP و AVIF. برای تصاویر غیر عکاسی، می‌توانید بین فرمت Portable Network Graphics (PNG) و فرمت Scalable Vector Graphics (SVG) یکی را انتخاب کنید.

هم PNG و هم SVG در کار با نواحی با رنگ تخت خوب هستند و هر دو به تصاویر شما اجازه می‌دهند که پس‌زمینه‌های شفاف داشته باشند. اگر از PNG استفاده می‌کنید، احتمالاً باید چندین نسخه از تصویر خود را در اندازه‌های مختلف ایجاد کنید و از ویژگی srcset در عنصر img خود برای واکنش‌گرا کردن تصویر استفاده کنید. اگر از SVG استفاده می‌کنید، به طور پیش‌فرض واکنش‌گرا است.

فایل‌های PNG (و JPG، WebP و AVIF) تصاویر بیت‌مپ هستند. تصاویر بیت‌مپ اطلاعات را به صورت پیکسل ذخیره می‌کنند. در یک 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 برای بهینه‌سازی خروجی استفاده کنید.

آیکون‌ها بخش مهمی از برندسازی سایت شما هستند. در ادامه خواهید آموخت که چگونه می‌توانید از طریق قدرت قالب‌بندی ، جنبه‌های دیگر برندسازی خود را واکنش‌گرا کنید.

درک خود را بررسی کنید

دانش خود را در مورد آیکون‌ها بیازمایید