ไอคอน

รูปภาพส่วนใหญ่เป็นส่วนหนึ่งของเนื้อหา แต่ไอคอนเป็นส่วนหนึ่งของอินเทอร์เฟซผู้ใช้ ปรับขนาดและปรับให้ตรงตามข้อความของ UI มีการปรับขนาดและปรับให้เหมาะสม

กราฟิกเวกเตอร์ที่รองรับการปรับขนาด

สำหรับภาพกราฟิก มีตัวเลือกมากมายสำหรับรูปแบบรูปภาพ ได้แก่ JPG, WebP และ AVIF สำหรับภาพที่ไม่ใช่ภาพถ่าย คุณจะสามารถเลือกได้ระหว่างรูปแบบ Portable Network Graphics (PNG) และรูปแบบ Scalable Vector Graphics (SVG)

ทั้ง PNG และ SVG สามารถรับมือกับพื้นที่ที่มีสีราบเรียบได้ และทั้งสองแบบนี้ก็ทำให้รูปภาพมีพื้นหลังโปร่งใสได้ หากใช้ PNG คุณอาจต้องสร้างรูปภาพหลายๆ เวอร์ชันเป็นขนาดต่างๆ และใช้แอตทริบิวต์ srcset ในองค์ประกอบ img เพื่อทำให้รูปภาพปรับเปลี่ยนตามอุปกรณ์ หากคุณใช้ SVG ระบบจะตอบสนองโดยค่าเริ่มต้น

PNG (และ JPG, WebP และ AVIF) เป็นรูปภาพบิตแมป รูปภาพบิตแมปจัดเก็บข้อมูลเป็นพิกเซล ใน SVG ข้อมูลจะจัดเก็บเป็นคำแนะนำในการวาด เมื่อเบราว์เซอร์อ่านไฟล์ SVG ระบบจะแปลงวิธีการเป็นพิกเซล ที่ดีที่สุดก็คือ วิธีการเหล่านี้เป็นวิธีการที่เกี่ยวข้อง ไม่ว่าจะใช้มิติใดในการอธิบายเส้นและรูปร่าง ทุกอย่างจะแสดงที่ความคมชัดที่เหมาะสม คุณสามารถสร้าง SVG 1 รายการที่จะทำงานได้ในทุกขนาดแทนการสร้าง 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 ในลักษณะนั้น เบราว์เซอร์จำเป็นต้องสร้างคำขอน้อยลงอีก 1 คำขอ โดยไม่ต้องรอให้รูปภาพดาวน์โหลดเพราะรูปภาพมาพร้อมกับ 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
• Sara Soueidan ได้เขียนเกี่ยวกับปุ่มไอคอนที่เข้าถึงได้
• Scott O'Hara ได้เขียนเกี่ยวกับการมาร์กอัปรูปภาพที่เข้าถึงได้ตามบริบทและ SVG
• หากคุณใช้เครื่องมือออกแบบกราฟิกเพื่อส่งออก SVG ให้ใช้ SVGOMG เพื่อเพิ่มประสิทธิภาพเอาต์พุต

ไอคอนเป็นส่วนสำคัญในการสร้างแบรนด์ของเว็บไซต์ ถัดไป คุณจะได้ทราบวิธีทำให้แง่มุมอื่นๆ ของการสร้างแบรนด์ตอบสนองตามอุปกรณ์โดยใช้พลังของพวกเขา

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับไอคอน