SVG: nó là gì, các khái niệm chính và sử dụng trong phát triển web

SVG là gì?

SVG là định dạng đồ họa vector dựa trên XML, được giới thiệu vào năm 2001 như một khuyến nghị của W3C. Không giống các định dạng raster, SVG mô tả hình ảnh thông qua các nguyên thủy hình học: điểm, đường thẳng, đường cong và đa giác. Tệp SVG là một tài liệu XML văn bản thuần túy có thể đọc, chỉnh sửa và nén bằng các công cụ tiêu chuẩn.

Kiến trúc SVG bao gồm một số khái niệm chính. viewBox xác định hệ tọa độ ảo không phụ thuộc vào kích thước thực tế của phần tử. Ví dụ, viewBox="0 0 100 100" tạo một lưới hình vuông 100×100, bên trong đó tất cả các tọa độ đều cố định. Khi chiều rộng hoặc chiều cao của container thay đổi, nội dung sẽ chia tỷ lệ tương ứng.

Theo W3C SVG 2 Specification, phiên bản hiện đại của SVG hỗ trợ gradient, mặt nạ, bộ lọc, văn bản với vị trí tùy ý, tương tác qua JavaScript và hoạt ảnh qua CSS và SMIL. SVG được tích hợp vào DOM như một phần tử HTML đầy đủ, cho phép điều khiển lập trình trên mọi nguyên thủy đồ họa.

Trong phát triển di động, SVG cũng được sử dụng trong iOS qua UIGraphicsImageRenderer và trong Android qua VectorDrawable — cả hai định dạng đều chuyển đổi mô tả giống SVG thành raster được tăng tốc phần cứng trên GPU.

Lịch sử và sự phát triển của định dạng SVG

SVG 1.0 trở thành khuyến nghị W3C vào năm 2001, SVG 1.1 vào năm 2003 và SVG 2.0 được phát triển từ năm 2012. Cải tiến chính của SVG 2 là tích hợp CSS sâu hơn, hỗ trợ chế độ kết hợp và hòa trộn, và khả năng sử dụng SVG trong HTML mà không cần tiền tố namespace.

Mặc dù SVG 2 chưa đạt được trạng thái Khuyến nghị, các trình duyệt hiện đại đã hỗ trợ phần lớn chức năng của nó. Chrome, Safari, Firefox và Edge có hỗ trợ gần như đầy đủ cho SVG 1.1 và một phần đáng kể của SVG 2.

Các phần tử SVG cơ bản

SVG cung cấp một tập hợp các phần tử để mô tả đồ họa hai chiều. Mỗi phần tử có các thuộc tính xác định vị trí, kích thước và hình thức trực quan của nó. Các thuộc tính có thể được thiết lập dưới dạng thuộc tính xml hoặc thông qua thuộc tính CSS.

• <rect> — hình chữ nhật với các thuộc tính x, y, width, height, rx, ry (bo tròn góc).
• <circle> — hình tròn với các thuộc tính cx, cy (tâm) và r (bán kính).
• <ellipse> — hình elip với các thuộc tính cx, cy, rx, ry.
• <line> — đoạn thẳng với các thuộc tính x1, y1, x2, y2.
• <polyline> — đường gấp khúc với thuộc tính points (danh sách tọa độ).
• <polygon> — đa giác kín với thuộc tính points.
• <path> — đường dẫn tùy ý với thuộc tính d (lệnh: M, L, C, Q, A, Z).
• <text> — phần tử văn bản với các thuộc tính x, y, font-size, font-family.

Phần tử path là phần tử SVG mạnh mẽ và linh hoạt nhất. Thuộc tính d chứa một chuỗi các lệnh: M (moveTo), L (lineTo), C (đường cong Bezier bậc ba), Q (đường cong Bezier bậc hai), A (cung), Z (đóng đường dẫn). Mỗi lệnh có dạng tuyệt đối hoặc tương đối (chữ hoa hoặc chữ thường).

SVG cũng hỗ trợ nhóm các phần tử qua <g>. Nhóm kế thừa các thuộc tính trực quan (fill, stroke, transform) cho tất cả các phần tử con. Điều này cho phép áp dụng một kiểu duy nhất cho toàn bộ tập hình dạng và điều khiển vị trí của chúng qua một transform duy nhất.

SVG so với đồ họa raster: so sánh định dạng

Sự khác biệt chính giữa SVG và các định dạng raster (JPEG, PNG, WebP) là cách lưu trữ thông tin. Raster lưu trữ màu của mỗi pixel trong một lưới có kích thước cố định. SVG lưu trữ các lệnh toán học để tái tạo hình dạng. Sự khác biệt này quyết định tất cả ưu điểm và nhược điểm của các định dạng.

Theo HTTP Archive, 2025, 68% trang web sử dụng SVG cho biểu tượng, 34% cho hình minh họa và 22% cho logo. Kích thước trung bình của một biểu tượng SVG là 0.5–2 KB, trong khi một biểu tượng raster có chất lượng tương tự là 5–20 KB ở định dạng PNG.

SVG không phù hợp cho ảnh chụp và hình ảnh raster phức tạp — kích thước mô tả XML sẽ vượt quá JPEG tương đương. Lĩnh vực ứng dụng được khuyến nghị cho SVG: biểu tượng, logo, hình minh họa, sơ đồ, biểu đồ, phần tử giao diện với thiết kế thích ứng.

Khi nào chọn SVG và khi nào chọn định dạng raster

SVG là lựa chọn tối ưu cho các phần tử giao diện cần hiển thị sắc nét trên màn hình Retina và ở mọi mức thu phóng trình duyệt. Raster dành cho ảnh chụp, kết cấu phức tạp và hình ảnh có hàng triệu màu, nơi mô tả vector sẽ quá phức tạp.

Phương pháp kết hợp — kết hợp SVG cho các phần tử giao diện và WebP/AVIF cho nội dung ảnh — mang lại sự cân bằng tốt nhất giữa chất lượng và hiệu suất tải trang.

Inline SVG và tạo kiểu CSS

Inline SVG là nhúng mã đánh dấu SVG trực tiếp vào tài liệu HTML, thay vì dưới dạng tệp riêng qua <img> hoặc background-image. Ưu điểm của inline SVG là các phần tử SVG trở thành một phần của DOM và có thể được tạo kiểu qua CSS, điều khiển qua JavaScript và hoạt hóa mà không cần yêu cầu thêm đến máy chủ.

Không giống <img src="icon.svg">, nơi SVG bị cô lập trong shadow DOM, inline SVG kế thừa màu sắc và phông chữ từ tài liệu cha. Điều này cho phép thực hiện, ví dụ, thay đổi màu biểu tượng khi di chuột qua pseudo-class CSS :hover mà không cần tải tệp riêng cho từng trạng thái.

Theo CSS-Tricks, inline SVG là cách được khuyến nghị để sử dụng biểu tượng trong các ứng dụng web hiện đại. Các thuộc tính CSS fill, stroke, stroke-width áp dụng trực tiếp cho các phần tử SVG. Để tùy chỉnh qua CSS, điều quan trọng là SVG nguồn không có fill và stroke được đặt dưới dạng thuộc tính inline — nếu không CSS sẽ không thể ghi đè chúng.

• Ưu điểm: tạo kiểu qua CSS, điều khiển qua JS, không có yêu cầu HTTP, khả năng thích ứng của viewBox.
• Nhược điểm: tăng kích thước trang HTML, không thể lưu vùng đệm riêng với HTML.
• Thay thế: SVG sprite — kết hợp nhiều SVG vào một tệp và sử dụng <use href="#id">.

SVG sprite giải quyết vấn đề lưu vùng đệm: tất cả biểu tượng được tập hợp trong một tệp, trình duyệt tải nó một lần và các biểu tượng riêng lẻ được truy cập qua <use> với id của phần tử mong muốn trong sprite.

Hoạt ảnh SVG: CSS và SMIL

Hoạt ảnh SVG bằng CSS là cách phổ biến và hiệu quả nhất để tạo hoạt ảnh đồ họa vector trong trình duyệt. Các thuộc tính CSS như transform, opacity và fill áp dụng cho các phần tử SVG giống như cho các phần tử HTML. Để tạo hoạt ảnh dọc theo đường dẫn tùy ý, sử dụng thuộc tính CSS offset-path.

SMIL (Synchronized Multimedia Integration Language) là một cơ chế hoạt ảnh được tích hợp trong SVG, không phụ thuộc vào CSS. Các phần tử <animate>, <animateTransform> và <animateMotion> cho phép tạo hoạt ảnh cho bất kỳ thuộc tính SVG nào mà không cần JavaScript hay CSS. Hoạt ảnh SMIL được đảm bảo đồng bộ với tốc độ khung hình của trình duyệt.

Theo MDN Web Docs, SMIL được hỗ trợ trong tất cả các trình duyệt hiện đại, nhưng hoạt ảnh CSS được coi là dễ đoán hơn và hiệu quả hơn. Trường hợp sử dụng chính của SMIL là tạo hoạt ảnh cho các thuộc tính không thể truy cập qua CSS, như d (path) của phần tử <path>.

JavaScript + requestAnimationFrame mang lại khả năng kiểm soát tối đa đối với hoạt ảnh SVG. Các nhà phát triển web sử dụng các thư viện như GSAP và Anime.js cho các chuỗi hoạt ảnh phức tạp với dòng thời gian và hàm easing khó thực hiện bằng CSS thuần túy.

Ví dụ mã: tạo đồ họa SVG

Ví dụ đầu tiên là một biểu tượng ngôi nhà đơn giản sử dụng các phần tử SVG cơ bản. Tất cả hình dạng đều là rect và polyline:

<!-- Inline SVG icon -->
<svg viewBox="0 0 100 100" width="48" height="48" xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="50" width="60" height="40" fill="#4A90D9" />
  <rect x="35" y="65" width="30" height="25" fill="#fff" />
  <polyline points="10,50 50,15 90,50" fill="none" stroke="#4A90D9" stroke-width="6" />
</svg>

Ví dụ thứ hai cho thấy hoạt ảnh một vòng quay tải qua CSS. Nó sử dụng <circle> với thuộc tính stroke-dasharray để tạo đường viền đứt nét:

<!-- CSS animated spinner -->
<svg class="spinner" viewBox="0 0 50 50" width="40" height="40">
  <circle cx="25" cy="25" r="20" fill="none"
    stroke="#4A90D9" stroke-width="4"
    stroke-dasharray="125.6 31.4" />
</svg>

<style>
  .spinner circle {
    animation: spin 1.5s linear infinite;
    transform-origin: center;
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
</style>

Ví dụ thứ ba sử dụng thư viện GSAP để tạo hoạt ảnh cho một đường dẫn nhằm vẽ đường viền mềm mại. GSAP làm việc với thuộc tính stroke-dashoffset, tạo hiệu ứng đường xuất hiện:

// Vẽ đường dẫn với GSAP
import gsap from "gsap";

const path = document.querySelector("#myPath");
const length = path.getTotalLength();

gsap.set(path, {
    strokeDasharray: length,
    strokeDashoffset: length
});

gsap.to(path, {
    strokeDashoffset: 0,
    duration: 2,
    ease: "power2.out"
});