หยุดโลโก้ SVG ดันเค้าโครงด้วยการจองพื้นที่

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

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

แยกภาพวาดออกจากกล่องที่จองไว้

มีขนาดที่เกี่ยวข้องสามส่วนต้องตรวจ:

viewBox="0 0 300 100" อธิบายสี่เหลี่ยมต้นทางอัตราส่วน 3:1 สำหรับไฟล์ภายนอก ข้อมูลนั้นอยู่ในทรัพยากรที่หน้าต้องดึงมา ต่างจากการใส่อัตราส่วนตรงกันใน HTML รอบนอกก่อนทรัพยากรนั้นพร้อมใช้

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

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

เริ่มจากแอตทริบิวต์ความกว้างและสูงที่ตรงกัน

สำหรับเครื่องหมาย 3:1 การส่งมอบง่าย ๆ อาจเป็นดังนี้:

<img
  class="brand-logo"
  src="/assets/brand-logo.svg"
  width="300"
  height="100"
  alt="Example brand"
>

.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}

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

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

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

ใช้อัตราส่วน CSS เมื่อเค้าโครงเป็นผู้กำหนดช่อง

อัตราส่วน CSS มีประโยชน์เมื่อคอมโพเนนต์กำหนดรูปทรงกล่องเฉพาะ สำหรับภาพได้สัดส่วน 3:1:

.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}

เอกสาร aspect-ratio ของ MDN อธิบายว่าพร็อพเพอร์ตีนี้มีส่วนในการคำนวณขนาดอัตโนมัติ อย่างน้อยหนึ่งมิติต้องยังเป็นอัตโนมัติเพื่อให้อัตราส่วนที่ต้องการมีผลกับการคำนวณนั้น หากกำหนดทั้งความกว้างและความสูงตายตัว ให้ตรวจขนาดที่ระบุชัดเหล่านั้นก่อน

เลือกพฤติกรรมที่ต้องการเมื่ออัตราส่วนต้นทางต่างออกไป ช่องที่ต้องคงรูปทรงอาจต้องมีตัวครอบของตัวเองและกฎปรับภาพให้พอดีที่เลือกไว้ โลโก้ที่แสดงตามสัดส่วนโดยปกติควรใช้อัตราส่วนต้นทางที่ถูกต้อง อย่าบังคับโลโก้สี่เหลี่ยมจัตุรัสเข้าเรขาคณิต 3:1 ของโลโก้ตัวอักษรเดิมเพียงเพื่อเก็บ CSS เก่า

รูปแบบ auto 3 / 1 มีความหมายอีกอย่าง: ให้อัตราส่วนชั่วคราวกับองค์ประกอบแบบแทนที่ แล้วใช้อัตราส่วนธรรมชาติเมื่อพร้อมใช้ มีประโยชน์เมื่ออัตราส่วนชั่วคราวกับสุดท้ายตรงกัน แต่ไม่รับประกันว่าขนาดที่ขัดกันจะไม่ทำให้สิ่งใดเลื่อน

ตัวอย่างควบคุมในเบราว์เซอร์ของเราแสดงอะไร

เราสร้าง SVG ต้นฉบับ 300 × 100 ที่มีเครื่องหมายรูป F จุด และลูกศร องค์ประกอบภาพ HTML สามชิ้นเริ่มต้นโดยไม่มี URL ต้นทาง จากนั้นปุ่มกำหนด SVG ในเครื่องไฟล์เดียวกันให้ทั้งสามหลังเค้าโครงครั้งแรก ทำให้สังเกตก่อนและหลังได้โดยไม่แสร้งว่าได้วัดเครือข่ายช้า

ทั้งสามใช้ความกว้าง CSS 300px และความสูงอัตโนมัติ ชิ้นหนึ่งไม่มีอัตราส่วนจองไว้ ชิ้นหนึ่งมี width="300" height="100" และอีกชิ้นมี aspect-ratio: 3 / 1

พิกัดบนของข้อความเปลี่ยนจาก 358.1875 เป็น 458.1875 ในกรณีไม่จองพื้นที่ และอยู่ที่ 458.1875 ในสองกรณีที่จองพื้นที่ ภาพที่โหลดแต่ละชิ้นรายงานขนาดธรรมชาติ 300 × 100 และความกว้างสูงที่แสดงก็ยังเป็น 300 × 100

นี่เป็นการวัดตำแหน่งองค์ประกอบจริงจากหน้าควบคุมหนึ่งหน้าในเบราว์เซอร์หนึ่งตัว การทดลองกำหนด URL ด้วยมือ ไม่ได้บันทึกผลติดตามการจำกัดความเร็วเครือข่าย คะแนน Core Web Vitals หรือพฤติกรรมข้ามเบราว์เซอร์ โดยเฉพาะอย่างยิ่ง การเลื่อน 100px เป็นระยะทาง ไม่ใช่คะแนน CLS

ตรวจคอมโพเนนต์ที่ส่งมอบ ไม่ใช่แค่ไฟล์

ใช้ตำแหน่งโลโก้จริงเมื่อตรวจวิธีแก้:

1. ยืนยันต้นทาง เปิด SVG ที่ส่งมอบแล้วตรวจอัตราส่วนพื้นที่วาด เก็บไฟล์แม่ที่ไม่เปลี่ยนไว้เปรียบเทียบ
2. ตรวจขนาดเริ่มต้น ตรวจว่า HTML หรือ CSS ให้กล่องที่ตั้งใจก่อนรู้ขนาดภาพ
3. เทียบตำแหน่งองค์ประกอบ ดูหัวเรื่องหรือรายการนำทางใกล้เคียง ไม่ใช่แค่ความคมชัดของโลโก้
4. ตรวจหลังโหลด ยืนยันความกว้าง ความสูง และสัดส่วนสุดท้ายเทียบพื้นที่จอง
5. ลองตัวครอบแคบและกว้าง ตรวจว่ากฎตอบสนองขนาดย่อเครื่องหมายอย่างได้สัดส่วนและยังใช้ตัวควบคุมรอบข้างได้

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

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

แยกปัญหา SVG ใกล้เคียงออกจากกัน

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

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

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

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

viewBox ของ SVG ป้องกันเค้าโครงเลื่อนได้ด้วยตัวเองหรือไม่? สำหรับภาพภายนอก viewBox อยู่ในทรัพยากรที่ดึงมา ให้ข้อมูลขนาดที่ตรงกันแก่เค้าโครง HTML เพื่อจองพื้นที่ก่อนรู้ขนาดภายในภาพ แล้วตรวจคอมโพเนนต์สุดท้าย

โลโก้ SVG ปรับตามพื้นที่ได้ขณะยังมีแอตทริบิวต์ความกว้างและสูงหรือไม่? ได้ แอตทริบิวต์ที่ตรงกันให้อัตราส่วนที่ตั้งใจ ขณะที่ CSS ควบคุมความกว้างแสดงผลและเก็บความสูงเป็นอัตโนมัติ ตรวจว่าไฟล์ส่งมอบและกฎตอบสนองขนาดรักษาสัดส่วนนั้น

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

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

1. web.dev — ปรับปรุง Cumulative Layout Shift — การไม่มีขนาดภาพ การจองพื้นที่ สาเหตุการเลื่อนอื่น และความต่างระหว่างการเลื่อนกับตัวชี้วัด CLS
2. MDN — องค์ประกอบภาพ HTML — แอตทริบิวต์ความกว้างสูง ขนาดภาพธรรมชาติ และเค้าโครงภาพ
3. MDN — aspect-ratio — การคำนวณขนาดอัตโนมัติและความต่างระหว่างอัตราส่วนที่ระบุกับรูปแบบ auto ร่วมอัตราส่วน

มีเพียงโลโก้ราสเตอร์ใช่ไหม? เตรียม SVG ที่แก้ไขได้ด้วย PerfectVector ตรวจเส้นขอบและพื้นที่วาด แล้วจองพื้นที่ตรงกันในหน้าที่จะใช้แสดง