วิธาใช้ Vector Graphics บนเว็บไซต์ Responsive

บทนำ

กราฟิกเวกเตอร์ (SVG) เหมาะสำหรับ Responsive Design เพราะ Resolution Independent - ขยาย-ย่อไม่เสียคุณภาพ ไฟล์เล็ก และจัดการด้วย CSS/JS ได้

เทคนิค: Vector Background ด้วย CSS Fixed Positioning

<!DOCTYPE html>
<html>
  <head>
    <style>
      #bgVector {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: -1;
        opacity: 0.1; /* โปร่งแสงสำหรับ Background */
      }
    </style>
  </head>
  <body>
    <img src="background.svg" id="bgVector" alt="">
    <!-- เนื้อหาเว็บไซต์ -->
  </body>
</html>

ข้อดีของ SVG Background

• ไม่เบลอ (Blur) บนหน้าจอ Retina/High DPI
• ไฟล์เล็กกว่า PNG/JPG เดียวกัน
• ปรับ Opacity, Filter, Transform ได้ด้วย CSS
• สามารถ Animate ได้ (SMIL หรือ CSS/JS)

Responsive SVG (Inline)

<svg viewBox="0 0 100 100" width="100%" height="auto" preserveAspectRatio="xMidYMid meet">
  <!-- Shapes -->
</svg>

• viewBox - พิกัดภายใน (Internal Coordinate)
• width="100%" - กว้างเต็ม Container
• preserveAspectRatio - รักษาสัดส่วน

Performance Tips

• ลด Complexity (Path points, Nodes)
• ใช้ <use> สำหรับ Element ซ้ำ
• Minify SVG (SVGO)
• Enable Gzip/Brotli Compression