รูปภาพส่วนใหญ่เป็นส่วนหนึ่งของเนื้อหา แต่ไอคอนจะเป็นส่วนหนึ่งของอินเทอร์เฟซผู้ใช้ ปรับขนาดและปรับขนาดในลักษณะเดียวกับที่ข้อความ 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 โดยตรงมีข้อดีอย่างไร