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

# จัดข้อความ HTML ล้อมรูป SVG ด้วย CSS float

> จัดย่อหน้า HTML ล้อม SVG โปร่งใสด้วย CSS shape-outside รันตัวอย่าง float ครบชุด แล้วตรวจสองความกว้าง ค่าอัลฟา และลำดับข้อความ

Source: https://perfectvector.com/th/blog/css-text-around-svg-shape

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

เมื่อต้องการให้ข้อความ HTML ล้อมรูปเงา SVG ให้กำหนดภาพเป็น float ระบุขนาดชัดเจน และตั้ง `shape-outside` เป็น URL ของ SVG โปร่งใส เพิ่ม `shape-margin` เพื่อเว้นรอบขอบรูป ย่อหน้ายังเป็น HTML ธรรมดา ส่วน SVG ให้ภาพที่ใช้คำนวณขอบเขตการไหลของข้อความ

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

## เลือกรูปแบบข้อความที่ต้องการจริง

| ผลที่ต้องการ                              | จุดเริ่มต้นที่เหมาะ                                                                        |
| ----------------------------------------- | ------------------------------------------------------------------------------------------ |
| ย่อหน้าบนหน้าไหลข้างภาพรูปร่างไม่สม่ำเสมอ | ภาพ float พร้อม CSS shape-outside ตามตัวอย่างนี้                                           |
| ป้ายหลายบรรทัดอยู่ในความกว้าง SVG         | [ตัดบรรทัดข้อความ SVG ด้วย tspan](https://perfectvector.com/th/blog/svg-text-wrap-tspan)   |
| เนื้อหา HTML จัดรูปแบบอยู่ในพื้นที่ SVG   | [HTML ใน SVG ด้วย foreignObject](https://perfectvector.com/th/blog/svg-foreignobject-text) |
| ตัวอักษรตามเส้นฐานโค้ง                    | [ข้อความ SVG บนพาธ](https://perfectvector.com/th/blog/svg-text-on-path)                    |

ไฟล์ SVG ไม่ได้เก็บการจัดย่อหน้ารอบข้าง คัดลอกภาพไปเอกสารอื่นจะไม่พาความสัมพันธ์ HTML/CSS นี้ไปด้วย

## 1. กำหนดขนาดและภาพโปร่งใสให้ float

[เอกสาร shape-outside ของ MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside) อธิบายคุณสมบัตินี้ว่าเปลี่ยนพื้นที่ float ที่เนื้อหา inline ข้างเคียงไหลล้อม ค่าเริ่มต้นใช้กรอบ margin ของ float ส่วน URL ภาพดึงรูปจากค่าอัลฟาหรือความโปร่งใสของภาพแทน

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

บันทึกงานต้นฉบับนี้เป็น `silhouette.svg`:

```xml
<svg xmlns="http://www.w3.org/2000/svg" width="150" height="180" viewBox="0 0 150 180">
  <path fill="#2f6977" d="M30 20 C80 5 135 35 138 75 C140 110 105 140 65 150 L45 170 L37 142 C8 125 8 85 22 62 C10 47 16 31 30 20 Z"/>
</svg>
```

ขนาดภายในคือ 150 × 180 และ CSS ใช้ความกว้างสูงเท่ากัน การคงอัตราส่วนช่วยตรวจความสัมพันธ์ภาพที่แสดงกับภาพรูปร่างได้ง่าย

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

## 2. รันตัวอย่าง HTML ครบชุด

บันทึกเป็น `index.html` ข้าง `silhouette.svg`:

```html
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>HTML text around an SVG silhouette</title>
<style>
* { box-sizing: border-box; }
.sample {
  display: flow-root;
  color: #183a42;
  font: 16px/24px Arial, sans-serif;
}
.sample p { margin: 0; }
.sample img { float: left; width: 150px; height: 180px; margin: 0; }
.sample.narrow { width: 360px; }
.sample.wide { width: 520px; }
.sample.contour img {
  shape-outside: url("silhouette.svg");
  shape-image-threshold: 0.5;
  shape-margin: 10px;
}
</style>
<div class="sample narrow contour">
  <img src="silhouette.svg" alt="">
  <p>The neighborhood library keeps a small garden beside its reading room. Volunteers label the seedlings, share spare pots, and record which plants attract insects. A curved illustration can sit beside this paragraph while the browser keeps the words in their original order. As the column becomes narrower, the same sentence needs different line breaks. The artwork remains the same size in this example, so the available room beside it changes. After the illustration ends, the paragraph can use the full column again. Editors can revise this text without moving individual words or drawing separate text lines. The layout belongs to the web page, while the SVG supplies the visible silhouette.</p>
</div>
</html>
```

ให้บริการโฟลเดอร์ผ่าน HTTP เช่น `python -m http.server 8000` แล้วเปิด `http://localhost:8000/index.html` สองไฟล์จะมี origin เดียวกัน URL ไฟล์ในเครื่องไม่ใช่การโหลดที่ทดสอบที่นี่

เปลี่ยน `class="sample narrow contour"` เป็น `class="sample narrow"` เพื่อเทียบการล้อมกรอบสี่เหลี่ยม float ปกติ เปลี่ยน `narrow` เป็น `wide` เพื่อทดสอบคอลัมน์ 520 พิกเซล ย่อหน้ากับภาพยังเดิม

[เอกสาร display](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) อธิบาย `flow-root` ว่าสร้างบริบทจัดรูปแบบบล็อก ในที่นี้ใช้ครอบภาพ float ให้อยู่ในตัวอย่าง ไม่ได้จัดตำแหน่งคำ การจัด inline ของเบราว์เซอร์ทำหน้าที่นั้น

![ข้อความไหลจริงในเบราว์เซอร์รอบ float สี่เหลี่ยมและขอบอัลฟา SVG ในคอลัมน์ 360 และ 520 พิกเซล](https://perfectvector.com/blog/css-text-around-svg-shape/text-flow.webp)

*เลย์เอาต์ HTML จริงสี่แบบใช้ SVG ต้นฉบับกับย่อหน้าเดียวกัน แบบตามขอบเพิ่ม shape-outside และ shape margin 10px ไม่มีคำที่วางด้วยมือ*

## 3. ตรวจแถวที่แสดงในหลายความกว้าง

เรารันตัวอย่างที่มองเห็นสี่แบบใน Chromium 155 ด้วย Arial 16px ระยะบรรทัด 24px ภาพคงที่ 150 × 180px คอลัมน์มีความกว้างเนื้อหา 360px และ 520px แบบตามขอบทั้งคู่ใช้ `shape-margin: 10px` และ `shape-image-threshold: 0.5`

| ตัวอย่างจริง     | แถวข้อความที่แสดง | จุดเริ่มแถวแรก | ความสูงข้อความ |
| ---------------- | ----------------- | -------------- | -------------- |
| rectangle-narrow | 18                | 150px          | 432px          |
| rectangle-wide   | 13                | 150px          | 312px          |
| contour-narrow   | 18                | 115.5px        | 432px          |
| contour-wide     | 12                | 115.5px        | 288px          |

แบบขอบแคบเปลี่ยนการตัดบรรทัดโดยไม่ลดจำนวนแถวรวม ที่ความกว้างมากกว่า แบบขอบใช้แถวน้อยกว่าชุดควบคุมสี่เหลี่ยมหนึ่งแถว

เราวัดสี่เหลี่ยม DOM Range ของแต่ละคำและจัดกลุ่มตามตำแหน่งแนวตั้ง นี่คือมิติแถวข้อความที่แสดง ไม่ใช่การเข้าถึงอ็อบเจ็กต์ line-box ภายในเบราว์เซอร์ เรายังตรวจค่า float และ shape ที่คำนวณ ขนาดภาพโหลด และตัวอย่างอัลฟาในภาพ SVG จริง

ทั้งสองความกว้าง บางแถวตามขอบเริ่มซ้ายกว่าขอบกันข้อความ 150px ของ float สี่เหลี่ยม ข้อความยังกลับมาใช้ทั้งคอลัมน์หลังภาพ ข้อสังเกตนี้แสดงว่าขอบที่ทดสอบมีผลต่อเลย์เอาต์จริง ไม่ใช่เปลี่ยนแค่หน้าตาภาพหน้าจอ

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

## 4. แยก shape margin อัลฟา และการโหลด

[`shape-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin) ขยายรูปที่ข้อความล้อมเพื่อเว้นช่องระหว่างรูปกับข้อความ ค่า 10px นี้เป็นทางเลือกจัดวาง ไม่ใช่ระยะต่ำสุดที่วัดระหว่างตัวอักษรทุกตัวกับทุกจุดของภาพ

[ข้อกำหนด CSS Shapes](https://www.w3.org/TR/css-shapes-1/) คงโมเดลกล่องปกติและตัดผลของรูปร่างไว้ที่กรอบ margin ของ float shape margin ใหญ่ไม่ได้ทำให้กล่อง CSS ภาพใหญ่ หากต้องการที่เพิ่ม ให้ดูขนาด float และ margin ปกติด้วย

[`shape-image-threshold`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold) เลือกเกณฑ์อัลฟาที่ใช้สกัดรูปจากภาพ ชุดทดสอบต้นฉบับมีด้านนอกโปร่งใสเต็มที่และภาพกลางทึบ เงานุ่มหรือขอบโปร่งแสงต้องเลือกเกณฑ์อย่างตั้งใจแล้วตรวจด้วยตา การเปลี่ยนเกณฑ์ทำพื้นหลังทึบให้โปร่งใสไม่ได้

URL ภาพยังต้องมีสิทธิ์โหลดเพื่อสร้างรูป CSS Shapes กำหนดคำขอ CORS สำหรับ URL ภาพและถ้าโหลดล้มเหลวจะไม่ใช้รูปร่างพิเศษ การให้ SVG อยู่ข้างหน้าเว็บเลี่ยงการพึ่งพาข้าม origin ในตัวอย่างนี้ หากใช้ CDN ให้ตั้งคำตอบ CORS ของเซิร์ฟเวอร์แล้วตรวจคำขอกับเลย์เอาต์ การเห็นภาพใน `img` อย่างเดียวไม่ได้ยืนยันว่าคำขอ shape สำเร็จ

## 5. รักษาลำดับข้อความและตรวจหน้าสำเร็จ

ย่อหน้าทดสอบทั้งสี่เก็บข้อความเหมือนกันทุกตัวในโหนดเดียว ไม่มีองค์ประกอบ `br` หรือกำหนดตำแหน่งแต่ละคำ CSS เปลี่ยนจุดขึ้นบรรทัดที่เห็นโดยไม่เขียนลำดับ DOM ย่อหน้าใหม่ เราไม่ได้ทดสอบโปรแกรมอ่านหน้าจอหรืออ้างว่าตรวจการเข้าถึงจากซอร์สนี้

ให้ย่อหน้าอ่านได้เมื่อภาพไม่พร้อมหรือเลย์เอาต์เปลี่ยน คอลัมน์แคบมากอาจอ่านง่ายกว่าเมื่อวางภาพเหนือย่อหน้า แทนแถบข้อความบางข้างภาพ ตรวจ breakpoint และเนื้อหาของคุณแทนการย่ออักษรเพื่อฝืนเอฟเฟกต์ขอบ

float ยังสงวนกล่อง CSS การล้อมรูปร่างไม่ได้เปลี่ยนเป็นสิ่งกีดขวางทั่วไปที่ข้อความไหลรอบทุกด้าน ในตัวอย่าง float ซ้ายนี้ ข้อความข้างเคียงล้อมทางขวาแล้วต่อด้านล่าง

## แก้อาการที่ต้นเหตุ

| อาการ                                 | ตรวจและแก้                                                                                                 |
| ------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| ข้อความตามกรอบสี่เหลี่ยม              | ยืนยัน float ทำงาน กำหนดขนาด โหลด URL shape แล้ว และต้นทางรอบนอกโปร่งใส                                    |
| ข้อความทับภาพที่เห็น                  | เทียบ SVG ที่แสดงกับ URL shape ขนาดและอัตราส่วน ตรวจเกณฑ์อัลฟาและ shape margin                             |
| เห็นภาพแต่ขอบไม่ทำงาน                 | ตรวจคำขอภาพ shape และ CORS แยกจาก img ทดสอบ origin เดียวก่อนเพิ่ม CDN                                      |
| ลูกใน flex หรือ grid ไม่ float ตามคาด | ให้ float และย่อหน้าอยู่ในคอนเทนเนอร์ flow ปกติแบบตัวอย่าง แทนการให้ภาพเองเป็น flex หรือ grid item         |
| ย่อหน้าแคบอ่านยาก                     | ลดขนาดภาพหรือย้ายไว้เหนือข้อความที่ breakpoint เหมาะ แล้วทดสอบย่อหน้าจริงอีกครั้ง                          |
| ป้าย SVG ยังไม่ตัดบรรทัด              | ใช้ขั้นตอนข้อความภายใน SVG จากตารางบน Shape-outside เปลี่ยน flow HTML ข้างเคียง ไม่ใช่เลย์เอาต์ข้อความ SVG |

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

เก็บ SVG สะอาดเดิมไว้เมื่อมี การแปลงเวกเตอร์ไม่ได้สร้างเลย์เอาต์ HTML รอบนอก รักษาความหมายย่อหน้าให้คุณ หรือรับประกันผลล้อมของเบราว์เซอร์ใด

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

**shape-outside ตัดบรรทัดภายใน SVG หรือไม่?**
ไม่ ตัวอย่างนี้เปลี่ยน flow inline HTML ข้างภาพ float ป้าย SVG, HTML ฝังใน SVG และข้อความตามพาธเป็นงานจัดวางต่างกัน

**ทำไม SVG ที่ดูโปร่งใสยังล้อมเป็นสี่เหลี่ยม?**
ตรวจพื้นหลังทึบในไฟล์ คำขอ shape ที่ล้มเหลว การไม่กำหนดขนาด float หรือบริบทที่ float ไม่ทำงาน พิกเซลขาวไม่ใช่พิกเซลโปร่งใส

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

**จุดขึ้นบรรทัดจะเหมือนทุกขนาดจอหรือไม่?**
ไม่ ความกว้างที่มี เมตริกฟอนต์ ข้อความ ขนาดภาพ และการจัดวางเบราว์เซอร์มีผลต่อแถว ทดสอบเนื้อหาจริงมากกว่าหนึ่งความกว้าง

## แหล่งข้อมูล

1. [MDN shape-outside](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside) — อธิบายพื้นที่ float และรูปร่างภาพที่ได้จากอัลฟา
2. [MDN shape-margin](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-margin) — นิยามระยะที่เพิ่มรอบรูปที่ข้อความล้อม
3. [MDN shape-image-threshold](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-image-threshold) — นิยามเกณฑ์อัลฟาสำหรับรูปจากภาพ
4. [CSS Shapes Module Level 1](https://www.w3.org/TR/css-shapes-1/) — ระบุข้อจำกัดกล่อง float การโหลดภาพ และพฤติกรรม CORS
5. [MDN display และ flow-root](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display#flow-root) — อธิบายบริบทจัดรูปแบบที่ครอบ float

หากไม่มีงานแก้ไขได้ ให้[เตรียมคลิปอาร์ต SVG ตัวเลือก](https://perfectvector.com/th/clipart-to-svg) ตรวจรูปเงาและความโปร่งใส แล้วตรวจเลย์เอาต์ย่อหน้าจริงในหน้าที่ความกว้างที่ตั้งใจรองรับ

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/css-text-around-svg-shape)
- [SVG textLength: ปรับป้ายให้พอดีโดยไม่บิดตัวอักษร](https://perfectvector.com/th/blog/svg-textlength-fit.md)
- [จัดแนวข้อความ SVG ในแนวตั้ง: วางป้ายใหม่ให้อยู่กลาง](https://perfectvector.com/th/blog/svg-text-vertical-alignment.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)