نمادها

بیشتر تصاویر بخشی از محتوای شما هستند، اما نمادها بخشی از رابط کاربری شما هستند. آنها باید به همان روشی که متن UI شما مقیاس و انطباق دارد، مقیاس و تطبیق دهند.

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

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

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

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

دانش خود را از آیکون ها تست کنید