> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

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

> จองพื้นที่โลโก้ SVG ด้วยความกว้างและสูงหรืออัตราส่วน CSS เทียบการเลื่อนจริงในเบราว์เซอร์ แล้วตรวจภาพส่งมอบและเค้าโครงที่ปรับตามขนาด

Source: https://perfectvector.com/th/blog/svg-logo-layout-reservation

Language: th
Author: Irene Kim
Published: 2026-10-23T08:00:00+09:00

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

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

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

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

| รายการ                                 | อธิบายสิ่งใด                     | ตรวจที่ไหน                           |
| -------------------------------------- | -------------------------------- | ------------------------------------ |
| ภาพ SVG และ viewBox                    | สี่เหลี่ยมพิกัดต้นทางและภาพภายใน | ซอร์ส SVG หรือโปรแกรมแก้เวกเตอร์     |
| ขนาดหรืออัตราส่วนธรรมชาติของภาพที่โหลด | ข้อมูลที่เบราว์เซอร์ได้จากภาพ    | องค์ประกอบภาพที่โหลดแล้ว             |
| กล่องเค้าโครง HTML                     | พื้นที่ที่หน้าจัดให้ภาพ          | สไตล์ที่คำนวณแล้วและขอบเขตองค์ประกอบ |

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

[เอกสารองค์ประกอบภาพของ MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) แนะนำให้ใช้ทั้งแอตทริบิวต์ความกว้างและความสูงเพื่อให้มีพื้นที่ก่อนภาพโหลด [แนวทางแก้เค้าโครงเลื่อนของ Google](https://web.dev/articles/optimize-cls) ก็ระบุว่าการไม่มีขนาดภาพเป็นสาเหตุการเลื่อนที่พบบ่อย และอธิบายการจองพื้นที่ด้วยขนาดหรืออัตราส่วน CSS

หากปัญหาคือภาพพอดีกับวิวพอร์ตที่กำหนดแล้วอย่างไร ให้ใช้[คู่มือปรับอัตราส่วน SVG ให้พอดี](https://perfectvector.com/th/blog/svg-preserveaspectratio) แยกต่างหาก การจองกล่องกับการวางภาพให้พอดีในกล่องเป็นคนละการตรวจ

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

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

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

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

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

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

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

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

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

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

[เอกสาร aspect-ratio ของ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio) อธิบายว่าพร็อพเพอร์ตีนี้มีส่วนในการคำนวณขนาดอัตโนมัติ อย่างน้อยหนึ่งมิติต้องยังเป็นอัตโนมัติเพื่อให้อัตราส่วนที่ต้องการมีผลกับการคำนวณนั้น หากกำหนดทั้งความกว้างและความสูงตายตัว ให้ตรวจขนาดที่ระบุชัดเหล่านั้นก่อน

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

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

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

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

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

| กรณี                 | ความสูงภาพก่อน | ความสูงภาพหลัง | ข้อความถัดไปเลื่อน |
| -------------------- | -------------- | -------------- | ------------------ |
| ไม่มีอัตราส่วนจองไว้ | 0px            | 100px          | ลง 100px           |
| ขนาด HTML ตรงกัน     | 100px          | 100px          | 0px                |
| อัตราส่วน CSS ตรงกัน | 100px          | 100px          | 0px                |

![ภาพเทียบในเบราว์เซอร์แสดงเนื้อหาเลื่อนลง 100 พิกเซลหลัง SVG ปรากฏโดยไม่มีอัตราส่วนจองไว้ ขณะที่ขนาด HTML และอัตราส่วน CSS ที่ตรงกันรักษาตำแหน่งไว้](https://perfectvector.com/blog/svg-logo-layout-reservation/reserved-space.webp)

*เส้นประบันทึกตำแหน่งข้อความก่อนหน้า SVG ที่โหลดทั้งสามมีกรอบ 300 คูณ 100 พิกเซลเหมือนกัน แต่พื้นที่ที่จองเริ่มแรกต่างกัน*

พิกัดบนของข้อความเปลี่ยนจาก `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 อินไลน์เทียบกับภาพ](https://perfectvector.com/th/blog/inline-svg-vs-img) ยังช่วยระบุว่ากำลังจัดสไตล์องค์ประกอบเอกสารหรือภาพภายนอก

หากเครื่องหมายต้นฉบับมีเพียงพิกเซล ใช้[ตัวแปลงโลโก้เป็นเวกเตอร์](https://perfectvector.com/th/vectorize-logo) ของ PerfectVector เตรียมรูปทรงตัวเลือกที่แก้ได้ เปรียบเทียบเงารูปและช่องเปิดกับต้นฉบับก่อนเลือกพื้นที่วาดส่งมอบ [แบบประเมินคุณภาพการลากเส้น](https://perfectvector.com/th/blog/evaluate-vector-trace-quality) อธิบายการตรวจเรขาคณิตนั้น การแปลงเวกเตอร์ไม่ได้ตั้งขนาด HTML อัตราส่วน CSS หรือพฤติกรรมโหลดของเว็บไซต์

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

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

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

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

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

1. [web.dev — ปรับปรุง Cumulative Layout Shift](https://web.dev/articles/optimize-cls) — การไม่มีขนาดภาพ การจองพื้นที่ สาเหตุการเลื่อนอื่น และความต่างระหว่างการเลื่อนกับตัวชี้วัด CLS
2. [MDN — องค์ประกอบภาพ HTML](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) — แอตทริบิวต์ความกว้างสูง ขนาดภาพธรรมชาติ และเค้าโครงภาพ
3. [MDN — aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/aspect-ratio) — การคำนวณขนาดอัตโนมัติและความต่างระหว่างอัตราส่วนที่ระบุกับรูปแบบ auto ร่วมอัตราส่วน

***

มีเพียงโลโก้ราสเตอร์ใช่ไหม? [เตรียม SVG ที่แก้ไขได้ด้วย PerfectVector](https://perfectvector.com/th/vectorize-logo) ตรวจเส้นขอบและพื้นที่วาด แล้วจองพื้นที่ตรงกันในหน้าที่จะใช้แสดง

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/svg-logo-layout-reservation)
- [แก้ช่องว่างใต้ SVG อินไลน์ด้วยเค้าโครง CSS](https://perfectvector.com/th/blog/inline-svg-baseline-gap.md)
- [โลโก้ SVG โหมดมืด: เลือกว่าอะไรควบคุมสี](https://perfectvector.com/th/blog/dark-mode-svg-logo.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)