รูปภาพส่วนใหญ่เป็นส่วนหนึ่งของเนื้อหา แต่ไอคอนจะเป็นส่วนหนึ่งของอินเทอร์เฟซผู้ใช้ ปรับขนาดและปรับขนาดในลักษณะเดียวกับที่ข้อความ UI ปรับขนาดและปรับ
กราฟิกเวกเตอร์ที่รองรับการปรับขนาด
สำหรับภาพถ่าย มีตัวเลือกมากมายสำหรับรูปแบบภาพ ได้แก่ JPG, WebP และ AVIF สำหรับภาพที่ไม่ใช่ภาพถ่าย คุณมีตัวเลือกระหว่างรูปแบบ Portable Network Graphics (PNG) และรูปแบบ Scalable Vector Graphics (SVG)
ทั้ง PNG และ SVG จะจัดการกับพื้นที่ที่มีสีโทนเดียวได้ดี และทั้ง 2 แบบนี้จะช่วยให้รูปภาพมีพื้นหลังโปร่งใสได้
หากใช้ PNG คุณอาจต้องสร้างรูปภาพหลายเวอร์ชันในขนาดต่างๆ และใช้แอตทริบิวต์ srcset
ในองค์ประกอบ img
เพื่อทำให้รูปภาพปรับเปลี่ยนตามอุปกรณ์ หากคุณใช้ SVG รูปภาพจะตอบสนองโดยค่าเริ่มต้น
PNG (และ JPG, WebP และ AVIF) คือรูปภาพบิตแมป รูปภาพบิตแมปจัดเก็บข้อมูลเป็นพิกเซล ใน SVG ข้อมูลจะจัดเก็บเป็นวิธีการวาดภาพ เมื่อเบราว์เซอร์อ่านไฟล์ SVG ระบบจะแปลงวิธีการเป็นพิกเซล และที่ดีที่สุดคือ วิธีการเหล่านี้เป็นวิธีการที่เกี่ยวข้อง ไม่ว่าคุณจะใช้ขนาดใดเพื่ออธิบายเส้นและรูปร่าง ทุกอย่างจะแสดงผลด้��ยความคมชัดที่เหมาะสม แทนที่จะสร้าง SVG หลายๆ รูปในขนาดที่ต่างกัน คุณสามารถสร้าง SVG 1 รายการซึ่งใช้งานได้กับทุกขนาด คุณไม่จำเป็นต้องใช้แอตทริบิวต์ 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 เพื่อเพิ่มประสิทธิภาพเอาต์พุต
ไอคอนเป็นส่วนสำคัญในการสร้างแบรนด์ของเว็บไซต์ ถัดไป คุณจะได้พบกับวิธีทำให้แง่มุมอื่นๆ ของการสร้างแบรนด์ที่ปรับเปลี่ยนตามอุปกรณ์ผ่านพลังของธีม
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับไอคอน
SVG จัดการความหนาแน่นของพิกเซลใดก็ได้ด้วยไฟล์เดียวหรือโค้ดบล็อก <svg>
srcset
หรือ <picture>
ซึ่งแตกต่างจาก .png
หรือ .jpg
โค้ด SVG ที่อยู่ใน HTML โดยตรงมีข้อดีอย่างไร