🏙️ วาดรูปตึก & แผนผังอาคาร
ด้วย SVG

1SVG คืออะไร ทำไมถึงเหมาะกับงานสถาปัตย์

SVG (Scalable Vector Graphics) คือไฟล์รูปแบบเวกเตอร์ที่เบราว์เซอร์อ่านได้เลย ข้อดีคือ:

• ไม่แตก pixels — ขยายเท่าไหร่ก็คม
• ไฟล์เล็ก — โค้ดไม่กี่บรรทัดก็ได้รูปสวย
• แก้ไขง่าย — เปลี่ยนสี ขนาด ตำแหน่ง ได้ทันที
• รองรับ CSS & JS — animate ได้, interactive ได้
• ฝังใน HTML ได้เลย — ไม่ต้องแยกไฟล์

2สร้างตึกหลังแรก — จากสี่เหลี่ยมสู่บ้าน

เริ่มจากง่ายที่สุด — บ้านหนึ่งหลังวาดด้วย <rect>, <polygon>, <circle> เท่านั้น:

โค้ดที่มา

<!-- ผนังบ้าน = rect -->
<rect x="150" y="160" width="300" height="160"
      fill="#1e3a5f" stroke="#3b82f6" stroke-width="2"/>

<!-- หลังคา = polygon (三点) -->
<polygon points="130,165 300,60 470,165"
         fill="#7c2d12" stroke="#ea580c" stroke-width="2"/>

<!-- หน้าต่าง = rect + เส้นกากบาท -->
<rect x="180" y="200" width="50" height="50" rx="3"
      fill="#0ea5e9" opacity="0.6"/>
<line x1="205" y1="200" x2="205" y2="250" stroke="...">
<line x1="180" y1="225" x2="230" y2="225" stroke="...">

<!-- วงกลมบนหลังคา = circle -->
<circle cx="300" cy="115" r="18" fill="..." stroke="...">

3เพิ่มรายละเอียด — ประตู หน้าต่าง หลังคา

มาดูเทคนิคการเพิ่มรายละเอียดให้ตึกดูสมจริงขึ้น — โดยใช้ <defs> สร้างReusable elements:

สร้างReusable ด้วย <defs>

<defs>
  <!-- สร้าง Pattern หน้าต่าง — ใช้ซ้ำได้ -->
  <pattern id="winPattern" width="30" height="30"
           patternUnits="userSpaceOnUse">
    <rect width="30" height="30" fill="#1e3a5f"/>
    <rect x="2" y="2" width="12" height="12"
          rx="1" fill="#0ea5e9" opacity="0.5"/>
    ...
  </pattern>

  <!-- Gradient สำหรับหลังคา -->
  <linearGradient id="roofGrad" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#dc2626"/>
    <stop offset="100%" stop-color="#7f1d1d"/>
  </linearGradient>

  <!-- Shadow filter -->
  <filter id="shadow">
    <feDropShadow dx="3" dy="3" stdDeviation="5"
                   flood-opacity="0.4"/>
  </filter>
</defs>

<!-- ใช้ Pattern เป็น fill ของตึก -->
<rect ... fill="url(#winPattern)"/>

<!-- ใช้ Gradient เป็น fill ของหลังคา -->
<polygon ... fill="url(#roofGrad)"/>

<!-- ใช้ filter เป็น shadow ของกลุ่ม -->
<g filter="url(#shadow)"> ... </g>

4วาดตึกสูง — ตึกระฟ้าหลายชั้น

เมื่อเข้าใจ <rect> + Pattern แล้ว การวาดตึกหลายชั้นแค่ซ้ำๆ ด้วย <g> จัดกลุ่ม:

5แผนผังชั้น — Floor Plan

แผนผังชั้น (Floor Plan) คือมุมมองจากด้านบน — ใช้ <rect> วาดผนัง, <line> วาดเส้น, <path> วาดประตูโค้ง:

องค์ประกอบของ Floor Plan

องค์ประกอบ	SVG Element	เคล็ดลับ
ผนังนอก	<rect> stroke-width 4	หนากว่าผนังใน 2 เท่า
ผนังใน	<line> stroke-width 3	สีเดียวกัน แต่บางกว่า
ประตู	<path> arc + <line>	เส้นประ = ขอบเขตเปิด
หน้าต่าง	<line> คู่ สีฟ้า	เส้นกลางสีเข้ม = กระจก
เฟอร์นิเจอร์	<rect> + <circle>	สีเทาเข้ม, ขนาดเป๊ะ
มิติ	<line> + <text>	ใช้ transform="rotate(-90)" สำหรับแนวตั้ง
ทิศ	<polygon> + <text>	มุมขวาบน, ลูกศรชี้ขึ้น = เหนือ

6แผนผังอาคารรวม — Building Overview

แผนผังอาคารรวม (Building Overview) แสดงโครงสร้างทั้งหลัง — จากฐานรากถึงหลังคา พร้อมระบบต่างๆ:

เคล็ดลับ Cross-Section

<!-- ผนังนอก (เส้นเดียว + ไม่ fill) -->
<rect x="120" y="60" width="460" height="340"
      fill="none" stroke="#60a5fa" stroke-width="1.5"/>

<!-- คานพื้น = <line> แนวนอน -->
<line x1="120" y1="128" x2="580" y2="128"
      stroke="#60a5fa" stroke-width="1.5"/>

<!-- เสา = <line> แนวตั้ง -->
<line x1="260" y1="60" x2="260" y2="400"
      stroke="#60a5fa" stroke-width="1.5"/>

<!-- ลิฟต์ = rect + dasharray -->
<rect ... fill="#1e1b4b" stroke="#818cf8"
      stroke-dasharray="4,3"/>

<!-- ท่อ/สายไฟ = <line> หนา สีต่างกัน -->
<line ... stroke="#22d3ee" stroke-width="3"/>  <!-- น้ำ -->
<line ... stroke="#fbbf24" stroke-width="2"/>  <!-- ไฟ -->

7สี แสง และเงา — ทำให้ตึกมีชีวิต

SVG มีเครื่องมือสร้างแสงเงาหลายตัว — มาดูตัวอย่างที่ทำให้ตึกดูมีมิติ:

เทคนิค	SVG Element	ใช้ตอนไหน
Drop Shadow	<filter id="shadow">	ทำให้ตึกลอยจากพื้นหลัง
Gradient	<linearGradient> / <radialGradient>	แสงจากทิศทางเดียว
Glow	<filter> + feGaussianBlur	หน้าต่างสว่าง, ไฟ, neon
Opacity	opacity="0.6"	ความลึก, ระยะไกล
Multiple layers	<g> ซ้อนกัน	เงาซ้อน, แสงซ้อน

8เทคนิคขั้นสูง — Pattern, ClipPath, Transform

8.1 Pattern — พื้นผิวซ้ำ

<defs>
  <pattern id="brick" width="40" height="20"
           patternUnits="userSpaceOnUse">
    <rect width="40" height="20" fill="#7c2d12"/>
    <rect x="0" y="0" width="18" height="8" rx="1"
          fill="#991b1b" stroke="#450a0a" stroke-width="0.5"/>
    <rect x="20" y="0" width="18" height="8" rx="1"
          fill="#991b1b" stroke="#450a0a" stroke-width="0.5"/>
    <rect x="10" y="10" width="18" height="8" rx="1"
          fill="#991b1b" stroke="#450a0a" stroke-width="0.5"/>
    <rect x="-10" y="10" width="18" height="8" rx="1"
          fill="#991b1b" stroke="#450a0a" stroke-width="0.5"/>
  </pattern>
</defs>
<rect fill="url(#brick)" .../>

8.2 ClipPath — ตัดรูปทรง

<defs>
  <clipPath id="archClip">
    <path d="M0,100 L0,40 Q75,-20 150,40 L150,100 Z"/>
  </clipPath>
</defs>
<rect clip-path="url(#archClip)"
      fill="url(#brick)" .../>

8.3 Transform — หมุน/เอียง/เลื่อน

<!-- หมุน 15 องศา -->
<rect transform="rotate(15, 200, 200)" .../>

<!-- เลื่อน -->
<g transform="translate(50, 100)"> ... </g>

<!-- บิด (skew) -->
<rect transform="skewX(-10)" .../>

<!-- scale -->
<g transform="scale(1.5)"> ... </g>

9สรุป & สร้างตึกของคุณเอง

ตอนนี้คุณมีเครื่องมือครบแล้ว! เริ่มจาก:

1. วาดร่างตึกด้วย <rect> ก่อน
2. เพิ่ม <polygon> สำหรับหลังคา
3. ใส่ <rect> เล็กๆ สำหรับหน้าต่าง
4. ใช้ <defs> + <pattern> สำหรับพื้นผิว
5. เพิ่ม <filter> สำหรับแสงเงา
6. ใส่ <text> สำหรับป้ายชื่อ