Hướng Dẫn Đơn Giản Về SVG và Cách Hoạt Động

Chào bạn, tôi là Maneshwar. Hiện tại, tôi đang làm việc trên FreeDevTools - một nơi tập hợp tất cả các công cụ phát triển, cheat codes và TLDR — một trung tâm miễn phí, mã nguồn mở nơi các lập trình viên có thể nhanh chóng tìm thấy và sử dụng các công cụ mà không cần phải tìm kiếm khắp nơi trên internet.

Khi xây dựng logo, biểu tượng hoặc minh hoạ cho web, SVG (Scalable Vector Graphics) là một trong những công cụ mạnh mẽ nhất trong bộ công cụ của lập trình viên.

Khác với hình ảnh raster (PNG, JPEG), SVG là độc lập với độ phân giải và dựa trên mã, có nghĩa là đồ họa của bạn luôn sắc nét và nhẹ.

Trong bài viết này, chúng ta sẽ khám phá cách hoạt động của SVG, những lợi ích của nó, các phần tử và thuộc tính thường gặp.

Trên đường đi, chúng ta cũng sẽ tạo ra logo DEV bằng SVG và kiểm tra nó với một công cụ xem trước SVG trực tuyến.

SVG là gì?

SVG là viết tắt của Scalable Vector Graphics.

Đây là một định dạng dựa trên XML để mô tả đồ hoạ 2D bằng mã.

Vì nó dựa trên văn bản, bạn có thể viết SVG trực tiếp trong HTML hoặc lưu trữ nó dưới dạng tệp .svg.

Ví dụ:

html Copy

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Mã này vẽ một hình tròn màu xanh với bán kính 40px ở trung tâm của một canvas 100x100.

Tại sao nên sử dụng SVG?

Khả năng mở rộng → Đồ họa SVG không bao giờ bị pixel hoá, bất kể kích thước.
Nhẹ → Thường nhỏ hơn PNG/JPEG cho các biểu tượng và minh hoạ đơn giản.
Hỗ trợ CSS & JS → Tạo kiểu với CSS hoặc hoạt hình với JavaScript.
Khả năng truy cập → Văn bản bên trong SVG có thể được tìm kiếm và chọn.
Thân thiện với SEO → SVG có thể chứa mã có ý nghĩa cho các công cụ tìm kiếm.

Các phần tử và thuộc tính SVG thường gặp

Các phần tử hình dạng cơ bản

Hình chữ nhật (<rect>)
- Thuộc tính: x, y → vị trí width, height → kích thước rx, ry → góc bo tròn
html Copy
```
<rect x="10" y="10" width="100" height="50" rx="10" ry="10" fill="green" />
```
Đường thẳng (<line>)
- Thuộc tính: x1, y1, x2, y2 → điểm bắt đầu và kết thúc stroke, stroke-width
html Copy
```
<line x1="0" y1="0" x2="100" y2="100" stroke="green" stroke-width="2" />
```
Đa giác (<polygon>)
- Thuộc tính: points → danh sách các cặp tọa độ x,y
html Copy
```
<polygon points="50,10 90,90 10,90" fill="orange" />
```

Các phần tử nâng cao

Đường dẫn (<path>)
- Thuộc tính: d → dữ liệu đường dẫn (M = di chuyển, L = đường thẳng, C = đường cong, Z = đóng đường dẫn)
html Copy
```
<path d="M10 80 C 40 10, 65 10, 95 80" stroke="blue" fill="transparent" />
```

Văn bản (<text>)

Thuộc tính: x, y, font-family, font-size, text-anchor

html Copy

<text x="50" y="50" font-size="24" text-anchor="middle" fill="black">
  Hello SVG
</text>

Nhóm (<g>)

Nhóm nhiều phần tử, hỗ trợ biến đổi, kiểu dáng và class/id.

html Copy

<g transform="translate(50,50)">
  <circle r="30" fill="purple" />
  <text x="0" y="5" text-anchor="middle" fill="white">G</text>
</g>

Định nghĩa (<defs>)

Định nghĩa các phần tử có thể tái sử dụng như gradient, mẫu, biểu tượng.

html Copy

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" style="stop-color:blue;stop-opacity:1" />
    <stop offset="100%" style="stop-color:red;stop-opacity:1" />
  </linearGradient>
</defs>
<rect width="200" height="100" fill="url(#grad1)" />

Ví dụ: Xây Dựng Logo DEV Bằng SVG

Hãy cùng tái tạo logo DEV (hình vuông tròn màu đen, viền trắng và văn bản trắng).

html Copy

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 512 512">
  <!-- Viền trắng -->
  <rect width="512" height="512" rx="40" ry="40" fill="white"/>

  <!-- Hộp đen bên trong -->
  <rect x="20" y="20" width="472" height="472" rx="30" ry="30" fill="black"/>

  <!-- Văn bản DEV -->
  <text x="50%" y="50%"
        font-family="Arial, Helvetica, sans-serif"
        font-size="200"
        font-weight="bold"
        fill="white"
        text-anchor="middle"
        dominant-baseline="middle">
    DEV
  </text>
</svg>

Bạn không cần sao chép và dán SVG vào trình duyệt của mình mỗi lần nữa.

Hãy thử công cụ Xem SVG Miễn Phí Trực Tuyến của tôi: dán mã và xem trước ngay lập tức.

Free DevTools: Công Cụ Xem SVG

Dưới đây là cách mà logo DEV trông như thế nào trong công cụ này:

Kết Luận

SVG là định dạng mơ ước của các lập trình viên: linh hoạt, có khả năng mở rộng và mạnh mẽ.

Chỉ với vài dòng mã, bạn có thể tạo ra logo, biểu tượng, biểu đồ và thậm chí cả hoạt hình — tất cả đều không làm giảm chất lượng.

Lần tới khi bạn cần một đồ họa sắc nét, có thể mở rộng, hãy chọn SVG thay vì PNG tĩnh.

Tôi đang xây dựng cho FreeDevTools.

Một bộ sưu tập các công cụ tập trung vào UI/UX được tạo ra để đơn giản hóa quy trình làm việc, tiết kiệm thời gian và giảm thiểu sự cản trở trong việc tìm kiếm công cụ/tài liệu.

Mọi phản hồi hoặc đóng góp đều được hoan nghênh!

Nó đã trực tuyến, mã nguồn mở và sẵn sàng cho bất kỳ ai sử dụng.

👉 Kiểm tra ngay: FreeDevTools
⭐ Đánh dấu nó trên GitHub: freedevtools

Hãy cùng nhau làm cho nó tốt hơn nhé!

Hướng Dẫn Đơn Giản Về SVG và Cách Hoạt Động

Hướng Dẫn Đơn Giản Về SVG và Cách Hoạt Động

SVG là gì?

Tại sao nên sử dụng SVG?

Các phần tử và thuộc tính SVG thường gặp

Các phần tử hình dạng cơ bản

Các phần tử nâng cao

Ví dụ: Xây Dựng Logo DEV Bằng SVG

Free DevTools: Công Cụ Xem SVG

Kết Luận

Bình luận