{ freetool24 }
Image Tools

Hướng Dẫn SVG cho Nhà Phát Triển: Đồ Họa Co Giãn Hoạt Động Mọi Nơi

Tìm hiểu cách SVG hoạt động, cách tối ưu file SVG cho web, các mẫu sử dụng inline so với external, và cách tạo animation cũng như thao tác SVG bằng CSS và JavaScript.

7 phút đọc

Colorful vector illustrations on a screen

SVG (Scalable Vector Graphics) là định dạng hình ảnh duy nhất được trình duyệt hiểu natively dưới dạng XML có cấu trúc, có thể tùy chỉnh style và script. Một logo định dạng SVG hiển thị sắc nét trên màn hình 1×, màn hình 4K, hay bảng quảng cáo in ấn — tất cả từ cùng một file. Hiểu về SVG sẽ giúp bạn trở thành một frontend developer có năng lực hơn.

SVG khác biệt như thế nào

Các định dạng raster (JPEG, PNG, WebP) lưu trữ hình ảnh dưới dạng lưới điểm ảnh. Phóng to chúng lên sẽ bị mờ. SVG lưu trữ hình ảnh dưới dạng mô tả toán học của các hình khối:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Hello</text>
</svg>

Đoạn mã này tạo ra một hình tròn màu xanh với chữ "Hello" — ở bất kỳ kích thước nào, luôn sắc nét hoàn hảo.

Khi nào nên dùng SVG:

  • Logo và icon (phải giữ độ sắc nét ở mọi kích thước)
  • Minh họa và sơ đồ
  • Biểu đồ và trực quan hóa dữ liệu (D3.js xuất ra SVG)
  • Animation và đồ họa tương tác
  • Icon giao diện (vượt trội hơn nhiều so với icon font)

Khi nào KHÔNG nên dùng SVG:

  • Ảnh chụp và hình ảnh photo-realistic phức tạp (dùng JPEG/WebP)
  • Ảnh chụp màn hình (dùng PNG)
  • Khi SVG có hàng nghìn node (sẽ chậm hơn Canvas)

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

Hình khối

<!-- Rectangle -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

<!-- Circle -->
<circle cx="50" cy="50" r="30" fill="#3b82f6"/>

<!-- Ellipse -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

<!-- Line -->
<line x1="0" y1="0" x2="100" y2="100" stroke="#1e293b" stroke-width="2"/>

<!-- Polygon -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- Polyline (open shape) -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

Path — hình khối vạn năng

Phần tử <path> có thể mô tả bất kỳ hình dạng nào bằng một ngôn ngữ thu nhỏ gồm các lệnh di chuyển, vẽ đường thẳng, đường cong và cung tròn:

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

Các lệnh path:

  • M x,y — Di chuyển đến (nhấc bút)
  • L x,y — Vẽ đường thẳng đến
  • H x — Đường ngang
  • V y — Đường dọc
  • Q cx,cy x,y — Đường cong bezier bậc hai
  • C cx1,cy1 cx2,cy2 x,y — Đường cong bezier bậc ba
  • A rx,ry rot large-arc sweep x,y — Cung tròn
  • Z — Đóng path

Bạn hiếm khi phải viết path bằng tay — công cụ thiết kế sẽ xuất chúng ra. Nhưng biết đọc chúng sẽ giúp ích cho việc debug và tối ưu.

viewBox: SVG responsive

Thuộc tính viewBox là chìa khóa để tạo SVG responsive:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Nội dung được vẽ trong không gian tọa độ 200×100 -->
</svg>

Khi không có width/height trên phần tử, SVG sẽ lấp đầy vùng chứa như một ảnh responsive. Đặt width: 100% trong CSS và nó sẽ co giãn hoàn hảo.

.logo svg {
  width: 100%;
  height: auto;
}

Ba cách sử dụng SVG trên web

1. File external (<img>)

<img src="logo.svg" alt="Company logo" width="200" height="80">

✅ Đơn giản, được cache, hoạt động mọi nơi
❌ Không thể tùy chỉnh style bằng CSS, không thể script

2. CSS background

.icon {
  background-image: url('icon.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

✅ Tốt cho các icon trang trí
❌ Không style được nội dung bên trong SVG, không có accessibility

3. Inline SVG (mạnh mẽ nhất)

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Next
</button>

✅ Toàn quyền kiểm soát CSS, có thể script, dùng currentColor để kế thừa màu chữ
❌ Không được cache, tăng kích thước HTML

Đối với các icon trong UI component, inline SVG là lựa chọn tốt nhất. Sprite sheet (một <svg> duy nhất chứa các phần tử <symbol> và tham chiếu <use>) cho phép bạn vừa cache được vừa tùy chỉnh style.

Tùy chỉnh style SVG bằng CSS

Inline SVG phản hồi với CSS như bất kỳ phần tử HTML nào:

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* điều khiển currentColor */
}

.icon:hover {
  color: #1d4ed8;
}

Trong SVG, dùng currentColor thay vì màu cố định:

<path fill="currentColor" d="..."/>
<path stroke="currentColor" d="..."/>

Lúc này màu của icon được kiểm soát hoàn toàn bằng CSS — dark mode, trạng thái hover và theming đều hoạt động tự nhiên.

CSS animation trên SVG

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray và stroke-dashoffset là các thuộc tính animation mạnh mẽ nhất của SVG — chúng cho phép tạo hiệu ứng vẽ đường, nơi các path xuất hiện như đang được vẽ ra.

Tối ưu file SVG

Các công cụ thiết kế xuất SVG kèm theo metadata thừa, comment và ID của editor. Một file SVG xuất điển hình có thể nặng 15 KB; sau khi tối ưu, có thể còn 3 KB.

Những gì cần loại bỏ:

  • Khai báo <?xml version="1.0"?> (không cần khi dùng inline)
  • xmlns:xlink, xmlns:dc, các namespace metadata của Adobe/Inkscape
  • Các thuộc tính id chỉ được dùng bởi editor
  • Comment và khoảng trắng thừa
  • Các phần tử nhóm <g> thừa
  • Các giá trị thuộc tính mặc định (fill="black", opacity="1")

Các công cụ như SVGO tự động hóa quá trình này. Khi bạn cần phiên bản raster cho các nền tảng không hỗ trợ SVG, hãy chuyển đổi sang PNG bằng công cụ SVG to PNG của chúng tôi.

Accessibility

SVG được dùng làm nội dung có ý nghĩa cần có mô tả accessible:

<svg role="img" aria-labelledby="title desc">
  <title id="title">Revenue chart</title>
  <desc id="desc">Bar chart showing monthly revenue growing from $10k in January to $45k in June 2026</desc>
  <!-- chart content -->
</svg>

SVG trang trí (icon bên cạnh nút có nhãn) nên được ẩn khỏi screen reader:

<svg aria-hidden="true" focusable="false">...</svg>

Tham chiếu nhanh: các thuộc tính SVG hữu ích

Thuộc tính Tác dụng
viewBox="x y w h" Xác định hệ tọa độ
fill Màu nền của hình khối (none, hex, currentColor)
stroke Màu viền
stroke-width Độ dày viền
stroke-linecap Kiểu đầu nét: butt, round, square
stroke-linejoin Kiểu góc nối: miter, round, bevel
opacity Độ trong suốt của phần tử (0–1)
transform translate(), rotate(), scale(), skew()
clip-path Cắt nội dung theo hình dạng
filter Áp dụng SVG filter (blur, drop-shadow, v.v.)

SVG là một trong những công cụ bị khai thác kém nhất của web. Khi đã hiểu hệ tọa độ và mô hình styling, bạn có thể xây dựng icon, minh họa, biểu đồ và animation hiển thị hoàn hảo ở mọi kích thước và phản hồi linh hoạt với tương tác của người dùng.

Quay lại tất cả bài viếtDuyệt công cụ