SVG อินไลน์เทียบกับ img: เลือกพฤติกรรมของงานภาพ

ใช้ SVG ในองค์ประกอบ <img> เมื่อต้องการแสดงกราฟิกที่ทำเสร็จแล้ว วาง SVG แบบอินไลน์เมื่อหน้าต้องเปลี่ยนรูปทรงแต่ละชิ้นด้วย CSS หรือ JavaScript ทั้งสองวิธีแสดงงานเวกเตอร์เดียวกันในขนาดต่างกันได้ การวางอินไลน์ไม่ได้ปรับปรุงรูปทรง

ความต่างนี้สำคัญเมื่อโลโก้ดูถูกต้องในแท็บเบราว์เซอร์แต่ไม่ทำตามกฎสีเว็บไซต์ ไฟล์อาจปกติดี กฎอาจเพียงเข้าถึงมันไม่ได้ ด้านล่าง ภูเขาภาพเดียวกันปรากฏทั้งสองรูปแบบให้ตรวจความต่างก่อนเปลี่ยนกระบวนการไฟล์

เลือกพฤติกรรมที่ต้องการ

SVG ภายนอกยังเป็นไฟล์เวกเตอร์เมื่อแสดงผ่าน <img> ขอบเขตอยู่ระหว่างหน้ากับองค์ประกอบภายในไฟล์ CSS หน้าเปลี่ยนขนาด หมุน หรือทำองค์ประกอบภาพจางได้ แต่ตัวเลือกเช่น .logo path เข้าถึงพาธในทรัพยากร src ไม่ได้ รูปทรงอินไลน์เป็นส่วนของต้นไม้เอกสารหน้า คู่มือฝัง SVG ของ MDN อธิบายสองวิธีนี้

หากยังตรวจเนื้อหาไฟล์ เริ่มจาก ไฟล์ SVG คืออะไร นามสกุล .svg อย่างเดียวไม่หมายถึงทุกรายละเอียดที่เห็นเป็นพาธ สำหรับส่งมอบหน้าร้าน ทำตาม คู่มือไอคอน SVG ที่สร้างเองสำหรับ Shopify หลังตรวจเนื้อหาไฟล์

ทดสอบงานเดียวกันทั้งสองรูปแบบ

สำหรับการสาธิตนี้ เราเขียนพาธภูเขาสองพาธและวงกลมดวงอาทิตย์หนึ่งวง โหลดจากไฟล์แยกและวางรูปทรงเดียวกันใน HTML เป็นการทดสอบฝังภาพ ไม่ใช่ผลแปลง PerfectVector

ในการทดสอบ Chromium ทั้งสองเวอร์ชันเริ่มที่ 360 × 240 พิกเซล CSS และแสดงดวงอาทิตย์สีอำพัน จากนั้นเปิดกฎหน้าที่เลือก .sun ดวงอาทิตย์อินไลน์เปลี่ยนเป็นปะการัง ส่วนภาพภายนอกยังอำพัน การลดกล่องทั้งสองเป็น 180 × 120 เปลี่ยนขนาดแสดงโดยไม่เปลี่ยนความต่างนั้น

1. บันทึกไฟล์ SVG แยก

สร้าง artwork.svg ด้วยต้นฉบับฉบับเต็มนี้ viewBox กำหนดพื้นที่พิกัดวาด ความกว้างและสูงให้ขนาดเริ่มต้นชัดเจน

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. เพิ่มรูปภาพและสำเนาอินไลน์

บันทึกต่อไปนี้เป็น index.html ข้าง artwork.svg แล้วเปิดในเบราว์เซอร์ กราฟิกสองแบบมีรูปทรงและแอตทริบิวต์สีวาดเดียวกัน เวอร์ชันอินไลน์ยังมีชื่อสำหรับเทคโนโลยีช่วยการเข้าถึง

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

ภาพหน้าจอใช้เลย์เอาต์เปรียบเทียบที่จัดสไตล์รอบรูปทรงเดียวกัน ตัวอย่างเล็กด้านบนให้ทำซ้ำพฤติกรรมง่าย

3. เปลี่ยนทีละตัวแปร

ลบ class="theme" จาก body แล้วโหลดใหม่ ดวงอาทิตย์ทั้งสองควรอำพัน คืนคลาสแล้วเฉพาะอินไลน์ควรเป็นปะการัง เปลี่ยน .artwork จาก width: 360px เป็น width: 180px หากคอนเทนเนอร์มีพื้นที่ ทั้งสองควรเล็กลงเป็น 180 × 120

หากต้องการให้ดวงอาทิตย์ภาพภายนอกเปลี่ยนถาวร แก้ fill ใน artwork.svg หากต้องตอบสนองสถานะหน้า เลือกมาร์กอัปอินไลน์หรือวิธีส่งมอบอื่นอย่างตั้งใจ คู่มือเปลี่ยนสี SVG ครอบคลุมการแก้ไฟล์เอง

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

กำหนดขนาดและชื่อที่เข้าถึงได้ชัดเจน

คง viewBox เมื่อนำงานเข้า HTML ตั้งแอตทริบิวต์ความกว้างสูงเป็นฐานที่เหมาะแล้วใช้ CSS ตอบสนองขนาด สำหรับภาพ 3:2 นี้ width: 180px; height: auto รักษาสัดส่วน ขอบว่างใหญ่ภายใน viewBox ยังเป็นพื้นที่วาดทั้งสองวิธี การเปลี่ยนวิธีฝังลบมันไม่ได้

เมื่อกล่องเลย์เอาต์มีอัตราส่วนต่าง คู่มือจัดให้พอดีด้วย preserveAspectRatio เปรียบเทียบการแสดงงานครบ การตัด และความผิดสัดส่วน

สำหรับภาพภายนอกที่สื่อความหมาย เขียน alt บน HTML <img> สำหรับภาพอินไลน์ที่สื่อความหมาย ตัวอย่างใช้ role="img" และ aria-labelledby ชี้ไป <title> SVG อินไลน์ไม่ใช้แอตทริบิวต์ alt ของรูปภาพ HTML ตัวเลือกชื่อนี้มีเอกสารใน คู่มือ SVG ใน HTML ของ MDN

หากทำซ้ำตัวอย่างอินไลน์ ให้ ID title ทุกตัวไม่ซ้ำและอัปเดต aria-labelledby ที่ตรงกัน ใช้วินัยเดียวกันกับ ID ของไล่สี มาสก์ หรือพาธตัดภาพ สำหรับงานตกแต่งข้างข้อความที่เห็นซึ่งสื่อเท่ากัน ใช้ alt ว่างบน <img> หรือซ่อน SVG อินไลน์จากเทคโนโลยีช่วยการเข้าถึงด้วย aria-hidden="true" ทดสอบลิงก์หรือปุ่มเต็มในบริบทเพื่อให้ยังมีชื่อบอกจุดประสงค์

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

ตัดสินประสิทธิภาพจากการวัด

มาร์กอัปอินไลน์ใส่รูปทรงในเอกสารแทนดึงงานเป็นทรัพยากรภาพแยก และเพิ่มมาร์กอัปเอกสารด้วย ไฟล์ภายนอกใช้ซ้ำจากแคชเบราว์เซอร์ได้ตาม URL ส่วนหัวตอบกลับ และสถานะแคช คู่มือแคช HTTP ของ MDN อธิบายเงื่อนไขเหล่านั้น

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

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

เมื่องานเริ่มต้นมีเพียง PNG

การแปลงเป็นเวกเตอร์อยู่ก่อนการเลือกฝังนี้หากต้นฉบับไม่มีรูปทรงที่ต้องการ สำหรับโลโก้หรือภาพราสเตอร์ที่เหมาะ ให้ แปลง PNG เป็น SVG ด้วย PerfectVector ตรวจผลเทียบต้นฉบับ และเก็บ SVG ที่ยอมรับเป็นไฟล์หลัก ตรวจขอบรูป ช่องเปิด และพื้นที่สีเล็กก่อนเพิ่มคลาสหรือเตรียมสำเนาเว็บ

PerfectVector ให้งานเวกเตอร์ คุณยังเลือกว่าส่วนใดตอบสนอง CSS เพิ่มชื่อที่มีความหมาย และทดสอบหน้าสุดท้าย การแปลงภาพไม่สร้างคอมโพเนนต์พร้อมชื่อคลาสสื่อความหมายอัตโนมัติ หาก SVG เดิมมีพาธใช้ได้ ทำจากพาธเหล่านั้นแทนลากพาธสำเนาที่เรนเดอร์

ตรวจ SVG ที่มีภาพราสเตอร์ฝัง ด้วย การวางไฟล์นั้นอินไลน์เปิดให้เข้าถึงองค์ประกอบ <image> ไม่ได้เปลี่ยนพิกเซลภายในเป็นรูปทรงที่เปลี่ยนสีแยกได้ สำหรับภาพถ่ายที่ควรดูเป็นภาพถ่าย เก็บรูปแบบส่งมอบราสเตอร์ที่เหมาะ

ตรวจหน้าสุดท้าย

• ยืนยันว่างานเมื่อเปิดเดี่ยวถูกต้องก่อนทดสอบ CSS หน้า
• เลือก <img> สำหรับแสดงงานสำเร็จ หรือ SVG อินไลน์สำหรับควบคุมองค์ประกอบโดยตรง
• ตรวจขนาดเรนเดอร์และสัดส่วนในเลย์เอาต์แคบที่สุดที่รองรับ
• ทดสอบรูปทรงจริงที่ต้องการเปลี่ยนสี อย่าพึ่งกฎ path กว้าง ๆ
• ตรวจชื่อภาพ ID ซ้ำ และลิงก์หรือปุ่มรอบภาพ
• วัดพฤติกรรมโหลดหากมีผลต่อการเลือก อย่าอนุมานความเร็วจากตัวอย่างนี้

คำถามที่พบบ่อย

SVG กลายเป็นบิตแมปเมื่อใช้แท็ก img หรือไม่? ไม่ SVG ที่โหลดผ่าน img ยังเรนเดอร์รูปทรงเวกเตอร์ได้ องค์ประกอบภาพป้องกันหน้าแม่ไม่ให้เลือกภายในโดยตรง ไม่ได้แปลงรูปทรงเป็น PNG

ทำไม currentColor ไม่ตามสีข้อความหน้า? ภาพ SVG ภายนอกมีบริบทสไตล์ของตัวเอง color ของหน้าไม่กลายเป็น currentColor ภายในไฟล์อัตโนมัติ ใช้ SVG อินไลน์เมื่อต้องให้สีสืบทอดจากหน้า และกำหนด fill หรือ stroke ที่เกี่ยวข้องให้ใช้ currentColor

ควรแปลง SVG เดิมก่อนวางอินไลน์ไหม? ไม่ต้องแปลงหากมีรูปทรงเวกเตอร์ที่ต้องการอยู่แล้ว ตรวจมาร์กอัป รักษาการอ้างอิงจำเป็น เพิ่มชื่อเหมาะสม และทดสอบในหน้า การแปลงราสเตอร์เป็นเวกเตอร์เกี่ยวข้องเฉพาะเมื่อต้องกู้รูปทรงจากราสเตอร์

แหล่งอ้างอิง

1. MDN — ใส่กราฟิกเวกเตอร์ใน HTML — พฤติกรรมภาพภายนอกและการฝังอินไลน์
2. MDN — บทนำ SVG ใน HTML — มาร์กอัปอินไลน์ viewBox และชื่อที่เข้าถึงได้
3. MDN — แคช HTTP — การใช้แคชซ้ำขึ้นกับนโยบายตอบกลับและตัวตนทรัพยากร
4. MDN — SVG เป็นรูปภาพ — ข้อจำกัดสคริปต์และทรัพยากรในบริบทรูปภาพ

เลือกการฝังที่ตรงงานของภาพ แล้วทดสอบกับสไตล์หน้าจริง หากต้นฉบับมีเพียง PNG ที่เหมาะ ให้ กู้รูปทรงเวกเตอร์ก่อน ตรวจผล และเตรียมงานที่ยอมรับสำหรับวิธีฝังนั้น