Cách sử dụng đồ họa vector (SVG) cho website responsive

Đồ họa vector (SVG) lý tưởng cho responsive design vì:

• Resolution-independent: Scale lên/xuống không mờ, không lo pixel.
• Kích thước file nhỏ: So với PNG/JPG cùng độ phức tạp.
• Tùy biến CSS/JS: Thay màu, kích thước, animation qua CSS.

Kỹ thuật đặt SVG làm background full-width:

1. CSS position: fixed; top: 0; left: 0; width: 100%; z-index: -1; cho <img> trỏ đến file SVG.
2. Thêm opacity (ví dụ 0.1) để làm background mờ.

Ví dụ 1: SVG full-width không opacity

<!DOCTYPE html>
<html>
  <head>
    <style>
      #demo { position: fixed; top: 0; left: 0; width: 100%; z-index: -1; }
    </style>
  </head>
  <body>
    <img src="/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley">
  </body>
</html>

Ví dụ 2: SVG background với opacity

<!DOCTYPE html>
<html>
  <head>
    <style>
      #demo { position: fixed; top: 0; left: 0; width: 100%; z-index: -1; opacity: 0.1; }
    </style>
  </head>
  <body>
    <img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" id="demo" alt="smiley">
  </body>
</html>

Mẹo: Dùng preserveAspectRatio="none" trên SVG gốc nếu muốn kéo dãn không giữ tỷ lệ.