ไอคอน

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

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

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

ทั้ง PNG และ SVG เหมาะสำหรับการจัดการพื้นที่สีทึบ และทั้ง 2 รูปแบบยังช่วยให้รูปภาพมีพื้นหลังโปร่งใสได้ด้วย หากใช้ 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 ได้มากขึ้นด้วย

ไอคอนและข้อความ

รูปภาพไอคอนมักจะมีรูปร่างเรียบง่ายบนพื้นหลังโปร่งใส 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 เพื่อซ่อน SVG จากเทคโนโลยีความช่วยเหลือพิเศษ

<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 เพื่อเพิ่มประสิทธิภาพเอาต์พุต

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

ทดสอบความเข้าใจ

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