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

# SVG ชาโดว์บ็อกซ์: ออกแบบชั้นกระดาษที่เชื่อมกัน

> ออกแบบ SVG ชาโดว์บ็อกซ์หลายชั้นด้วยกรอบตรงกัน รูปกระดาษที่เชื่อมกัน และลำดับซ้อนที่ตรวจแล้ว ดูว่าดวงจันทร์ลอยเปลี่ยนรูปทรงที่บันทึกอย่างไร

Source: https://perfectvector.com/th/blog/shadow-box-svg-connected-layers

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

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

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

## ตัดสินใจว่าแต่ละแผ่นกระดาษมีอะไร

**ชั้นความลึก** คือแผ่นที่อยู่หน้าหรือหลังอีกแผ่น สีช่วยแยกบนจอได้ แต่หน้าที่มาจากตำแหน่งและรูปทรง การแยก PNG ตามสีไม่ได้กำหนดความสัมพันธ์นี้ สำหรับไวนิลหรือการซ้อนสีแบบแบน ใช้[คู่มือ SVG หลายเลเยอร์สำหรับ Cricut](https://perfectvector.com/th/blog/layered-svg-for-cricut) แยกต่างหาก

**เนื้อวัสดุที่เก็บ** คือกระดาษที่ตั้งใจเหลือไว้ **ช่องตัดออก** คือช่องที่เอาออก **สะพาน** คือแถบเนื้อวัสดุที่เชื่อมรายละเอียดกับส่วนอื่นของแผ่น **เกาะลอย** คือวัสดุที่เก็บไว้แต่ไม่เชื่อมกับแผ่นนั้น

ในตัวอย่างด้านล่าง แผ่นหลังมีภูเขาและดวงจันทร์ แผ่นกลางมีต้นไม้และพื้น แผ่นหน้าเพิ่มเนินเตี้ย ทุกแผ่นมีกรอบนอก และรายละเอียดที่เก็บทุกชิ้นเชื่อมกับกรอบ

**ตัวอย่างแบบ SVG ที่บันทึก**

![ภาพเรนเดอร์ในเบราว์เซอร์ของแผ่น SVG เชื่อมกันขนาด 200 mm สามแผ่น ตัวอย่างแย้งดวงจันทร์ลอย และภาพซ้อนแบนที่จัดแนวแล้ว](https://perfectvector.com/blog/shadow-box-svg-connected-layers/connected-panels.webp)

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

## สร้างสามชั้นด้วยขอบนอกเดียวกัน

ต้องมีโปรแกรมเวกเตอร์ที่ลบและรวมรูปทรงได้ ลวดลายเรียบง่าย และขนาดกรอบที่ต้องการ เก็บไฟล์หลักที่แก้ได้ก่อนรวมรูป หากมีเวกเตอร์ที่ใช้ได้ ให้เริ่มจากนั้น หากลวดลายมีเพียง PNG หรือ JPG ให้กู้พาธก่อน แล้วออกแบบจุดเชื่อมกระดาษแยก

### 1. สร้างกรอบหนึ่งอันแล้วทำสำเนา

วัดพื้นที่สำหรับแผ่นภายในกรอบ คำนึงถึงที่ว่างซึ่งแผ่นหลังและตัวคั่นที่วางแผนจะใช้ก่อนเลือกขนาดงานสุดท้าย

ไฟล์ของเราใช้สี่เหลี่ยมนอก **200 × 200 mm** พร้อม **แถบกรอบ 12 mm** ช่องเปิดอยู่ระหว่าง x = 12 ถึง 188 mm และ y = 12 ถึง 188 mm นี่เป็นขนาดตัวอย่าง ไม่ใช่ขนาดพอดีที่แนะนำสำหรับทุกกรอบ

วาดสี่เหลี่ยมนอกและสี่เหลี่ยมเล็กที่กึ่งกลาง ลบรูปเล็กเพื่อสร้างช่อง แล้วทำสำเนากรอบสำหรับสามแผ่น Inkscape อธิบาย **Difference** ว่าเป็นการลบ และ **Union** ว่าเก็บเส้นขอบร่วมของพาธที่เลือก ลำดับซ้อนสำคัญใน Difference รูปที่ลบอยู่เหนือรูปที่เก็บ [คำสั่งบูลีนของ Inkscape](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html)

ใช้จุดกำเนิดหน้าและสี่เหลี่ยมนอกเดียวกันทุกชั้น อย่าครอปแต่ละไฟล์ตามลวดลายของตัวเอง ไฟล์ตัวอย่างทั้งหมดระบุ `width="200mm"`, `height="200mm"` และ `viewBox="0 0 200 200"` รูปทรงที่บันทึกมีขอบเขต 200 mm เท่ากัน `viewBox` ของ SVG กำหนดสี่เหลี่ยมพิกัดที่แมปไปยัง viewport ยืนยันขนาดจริงในแอปปลายทางอีกครั้ง [ระบบพิกัด SVG ของ W3C](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute)

### 2. เชื่อมฉากหลังกับกรอบ

วางรูปเงาภูเขาให้ฐานทับแถบกรอบล่าง เพิ่มดวงจันทร์ด้านบน ดวงจันทร์ที่อยู่เดี่ยวในช่องเป็นกระดาษอีกชิ้นที่เก็บ จึงต้องมีจุดเชื่อมอย่างตั้งใจหากอยากให้แผ่นหลังเป็นชิ้นเดียว

ตัวอย่างของเราวางศูนย์กลางดวงจันทร์ที่ **x = 145, y = 46 mm** พร้อมรัศมีที่ระบุ **14 mm** สี่เหลี่ยมแนวตั้งจาก **x = 143 ถึง 147 mm** เชื่อมไปกรอบบน สี่เหลี่ยมทับทั้งดวงจันทร์และกรอบก่อนรวม

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

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

### 3. เชื่อมวัตถุชั้นกลางผ่านฐาน

ให้พุ่ม ลำต้น และพื้นเชื่อมกัน ตัวอย่างนี้ลำต้น **กว้าง 8 mm** จาก x = 56 ถึง 64 mm โดยทับพุ่มกับพื้น และพื้นทับแถบกรอบล่าง รวมรูปเหล่านี้เป็นแผ่นกลาง

ดวงตา ดาว หรือช่องในตัวอักษรอาจเปลี่ยนว่าพื้นที่ใดติดกัน ตรวจรายละเอียดว่าเป็นวัสดุที่เก็บหรือช่องตัดก่อนทำให้ง่ายขึ้น หากช่องถูกเติมโดยไม่คาดหลังส่งออก ใช้[คู่มือวิเคราะห์ช่อง SVG และ fill-rule](https://perfectvector.com/th/blog/svg-holes-fill-in)

### 4. ให้ด้านหน้าเตี้ยพอที่จะเห็นวัตถุหลัก

เพิ่มเนินเตี้ยในกรอบที่สามและรวมกับแถบล่าง จัดสามแผ่นตรงกัน โดยภูเขาหลังต้นไม้และเนินอยู่หน้า

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

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

## ตรวจจุดเชื่อมวัสดุใน SVG ที่บันทึก

องค์ประกอบพาธเดียวอาจมีหลายรูปที่ไม่เชื่อมกัน **นับพาธไม่ได้ทดสอบการเชื่อมต่อ** พาธประกอบมีหลายเส้นขอบในอ็อบเจ็กต์พาธเดียว กฎเติมกำหนดว่าพื้นที่ปิดใดถูกเติม ข้อกำหนด SVG นิยามกฎเหล่านี้ รวมถึง `evenodd` ที่ใช้ในไฟล์เรา [การเติมและกฎเติม SVG ของ W3C](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty)

เราสร้างแผ่นตัวอย่างด้วยการรวมพื้นที่เนื้อวัสดุ ส่งออกเส้นขอบปิด แล้วสร้างพื้นที่เติมกลับจากข้อมูล SVG ที่บันทึก จึงตรวจรูปทรงส่งออกจริงแทนกองรูปสีที่ทับกัน

| ไฟล์ที่บันทึก               | พื้นที่เนื้อวัสดุเชื่อมกัน | สิ่งที่การตรวจยืนยัน                    |
| --------------------------- | -------------------------- | --------------------------------------- |
| หลัง: ภูเขา ดวงจันทร์ สะพาน | 1                          | ดวงจันทร์เชื่อมกรอบผ่านสะพาน            |
| กลาง: ต้นไม้และพื้น         | 1                          | พุ่ม ลำต้น พื้น และกรอบเป็นพื้นที่เดียว |
| หน้า: เนินเตี้ย             | 1                          | เนินเชื่อมกรอบ                          |
| หลังที่เอาสะพานออก          | 2                          | ดวงจันทร์เป็นเกาะเนื้อวัสดุแยก          |

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

สำหรับไฟล์ส่งออกของคุณ:

1. เปิด SVG ที่บันทึกแล้วดูแต่ละแผ่นเดี่ยวด้วยสีเติมธรรมดา
2. ไล่เส้นทางต่อเนื่องผ่านวัสดุที่เก็บจากทุกรายละเอียดไปกรอบ ซูมจุดที่รูปเกือบแตะกัน การแตะเป็นจุดไม่ได้ให้แถบกระดาษที่วัดได้
3. ตรวจเส้นขอบรอบวัตถุที่เชื่อม รวมแนวทับซ้อนที่จะตัดแบ่งวัสดุที่ตั้งใจเก็บ
4. ตรวจช่องในฐานะรูปทรง รูปสีขาวที่ระบายทับอีกรูปอาจดูเหมือนรูโดยไม่ลบเส้นขอบด้านล่าง
5. ประกอบภาพตัวอย่างแบนจากเลเยอร์ที่บันทึกด้วยจุดกำเนิดและขนาดร่วม

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

## PerfectVector ช่วยตรงไหนเมื่อลวดลายเป็นภาพราสเตอร์

PerfectVector กู้พาธ SVG ที่แก้ได้จาก PNG หรือ JPG ที่เหมาะสม [กระบวนการ SVG สำหรับ Cricut](https://perfectvector.com/svg-for-cricut) ช่วยดูรูปทรงและปรับสีก่อนเตรียมไฟล์ปลายทาง ใช้ขั้นนี้กับลวดลายราสเตอร์ที่อยากนำกลับมาใช้ ส่วนการสร้างกรอบ สะพาน และลำดับความลึกยังเป็นงานออกแบบแยก

เริ่มจากรูปเงาชัดหรือภาพสีเรียบง่าย ตรวจรูปขอบที่กู้ว่ามีเศษหลงหรือช่องหายก่อนวางในแผ่น [คู่มือลายเส้นเป็น SVG](https://perfectvector.com/th/blog/line-art-to-svg) อธิบายความต่างระหว่างการลากรูปขอบกับเส้นที่วาดแต่แรก

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

## ตรวจไฟล์ปลายทางแล้วทดสอบวัสดุ

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

ก่อนทำงานสำเร็จ ให้ตรวจในแอปตัดจริงและกรอบ:

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

หากนำเข้าแล้วช่องหรือขอบเปลี่ยน ให้กลับรูปทรงที่บันทึกและแก้เส้นขอบนั้น หากสะพานขาดหรืองอ ให้ปรับความกว้าง ความยาว จุดยึด หรือวัสดุแล้วทดสอบใหม่ เรนเดอร์ในเบราว์เซอร์อย่างเดียวตัดสินเรื่องจริงเหล่านี้ไม่ได้ [คู่มือเตรียม SVG สำหรับ Cricut ทั่วไป](https://perfectvector.com/th/blog/svg-files-for-cricut) อธิบายการตรวจไฟล์โดยรวม

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

### แปลงภาพเป็น SVG ชาโดว์บ็อกซ์อัตโนมัติได้หรือไม่?

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

### แต่ละแผ่นชาโดว์บ็อกซ์ต้องเป็นพาธ SVG เดียวหรือไม่?

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

### สะพานควรกว้างเท่าไร?

เลือกและทดสอบตามวัสดุ ช่วงพาด ขนาดสำเร็จ และกระบวนการตัด สะพานดวงจันทร์ตัวอย่างกว้าง 4 mm แต่เราไม่ได้ตัดหรือทดสอบความแข็งแรง เป็นขนาดตัวอย่าง ไม่ใช่ขั้นต่ำสากล

### ชั้นชาโดว์บ็อกซ์เหมือนเลเยอร์สี Cricut หรือไม่?

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

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

1. [Inkscape — คำสั่งบูลีน](https://inkscape-manuals.readthedocs.io/en/latest/boolean-operations.html) — อธิบาย Union, Difference, Combine และบทบาทของลำดับซ้อน
2. [W3C — ระบบพิกัด การแปลง และหน่วย SVG](https://www.w3.org/TR/SVG2/coords.html#ViewBoxAttribute) — นิยามสี่เหลี่ยมพิกัดที่แมปผ่าน `viewBox`
3. [W3C — การระบาย SVG](https://www.w3.org/TR/SVG2/painting.html#FillRuleProperty) — นิยามสีเติม พาธย่อย และกฎ `evenodd` ที่ใช้ในตัวอย่าง
4. [PerfectVector — SVG สำหรับ Cricut](https://perfectvector.com/svg-for-cricut) — อธิบายการกู้ภาพราสเตอร์ ตรวจรูปทรง และตรวจสอบก่อนตัด

***

หากลวดลายเริ่มเป็น PNG หรือ JPG ให้[เตรียมพาธ SVG ด้วย PerfectVector](https://perfectvector.com/th/svg-for-cricut) แล้วตรวจขอบและช่อง สร้างจุดเชื่อมกรอบและชั้นความลึกในโปรแกรม เปิดแผ่นที่บันทึกซ้ำ แล้วทดสอบวัสดุชิ้นเล็กก่อนทำชาโดว์บ็อกซ์สำเร็จ

## Explore

- [Read the HTML article](https://perfectvector.com/th/blog/shadow-box-svg-connected-layers)
- [งาน Knockout ใน Cricut: วางแผนฐานและเลเยอร์ชื่อ](https://perfectvector.com/th/blog/cricut-knockout-real-cutouts.md)
- [ทำไม SVG สำหรับ Cricut ลอกเศษยาก? แก้ที่ไฟล์](https://perfectvector.com/th/blog/cricut-svg-hard-to-weed.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)