Bạn nhận được một file SVG cần chỉnh sửa nhỏ — đổi màu, thay text, điều chỉnh kích thước — mà không muốn mở Illustrator hay Inkscape chỉ để sửa vài dòng code. Hoặc bạn đang học SVG và muốn thấy ngay kết quả khi thay đổi từng thuộc tính. SVG Editor online này cho phép viết và chỉnh sửa SVG trực tiếp với live preview — thay đổi code, thấy kết quả ngay lập tức.
SVG là gì?
SVG (Scalable Vector Graphics) là định dạng đồ họa vector dựa trên XML — mô tả hình ảnh bằng các lệnh toán học thay vì lưu từng pixel như PNG/JPG. Điều này mang lại đặc tính nổi bật nhất của SVG: scale vô hạn mà không vỡ hình. Logo 10px hay 10.000px đều sắc nét như nhau.
SVG được nhúng trực tiếp vào HTML, dùng trong CSS, và có thể điều khiển bằng JavaScript — khiến nó trở thành định dạng không thể thiếu trong phát triển web hiện đại.
Cách sử dụng SVG Editor
- Viết SVG: Gõ hoặc dán code SVG vào ô editor bên trái — preview cập nhật real-time ở bên phải.
- Chỉnh sửa: Thay đổi màu sắc, kích thước, vị trí, text — thấy kết quả ngay mà không cần reload.
- Upload file SVG: Mở file .svg có sẵn để xem và chỉnh sửa code nguồn.
- Download: Lưu file SVG đã chỉnh sửa về máy.
- Copy code: Copy SVG code để nhúng thẳng vào HTML hoặc CSS.
Cấu trúc cơ bản của SVG
SVG là XML — có thể đọc và chỉnh sửa bằng bất kỳ text editor nào. Cấu trúc cơ bản:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="#4A90E2" />
<text x="100" y="110" text-anchor="middle" fill="white">Hello! CodeTutHub</text>
</svg>Các phần tử SVG cơ bản
| Phần tử | Mô tả | Thuộc tính chính |
|---|---|---|
<rect> | Hình chữ nhật | x, y, width, height, rx (bo góc) |
<circle> | Hình tròn | cx, cy (tâm), r (bán kính) |
<ellipse> | Hình elip | cx, cy, rx, ry |
<line> | Đường thẳng | x1, y1, x2, y2 |
<polyline> | Đường gấp khúc | points: "x1,y1 x2,y2 x3,y3" |
<polygon> | Đa giác khép kín | points: "x1,y1 x2,y2 x3,y3" |
<path> | Đường phức tạp tùy ý | d: chuỗi lệnh vẽ (M, L, C, Z…) |
<text> | Văn bản | x, y, font-size, text-anchor |
<image> | Nhúng hình ảnh | href, x, y, width, height |
<g> | Group — nhóm phần tử | transform (rotate, scale, translate) |
Thuộc tính màu sắc và style
| Thuộc tính | Mô tả | Ví dụ |
|---|---|---|
fill | Màu nền bên trong hình | fill="#FF5733" hoặc fill="none" |
stroke | Màu viền | stroke="black" |
stroke-width | Độ dày viền | stroke-width="2" |
opacity | Độ trong suốt toàn bộ | opacity="0.5" |
fill-opacity | Độ trong suốt màu nền | fill-opacity="0.8" |
transform | Biến đổi hình học | transform="rotate(45, 50, 50)" |
SVG vs PNG/JPG — khi nào dùng SVG?
| Tiêu chí | SVG | PNG / JPG |
|---|---|---|
| Độ sắc nét | ✅ Scale vô hạn, không vỡ | ⚠️ Vỡ khi phóng to |
| Dung lượng | ✅ Nhỏ cho logo, icon đơn giản | ✅ Nhỏ cho ảnh phức tạp |
| Animation | ✅ Hỗ trợ CSS/JS animation | ❌ Không (trừ GIF) |
| Ảnh chụp thực tế | ❌ Không phù hợp | ✅ Lý tưởng |
| Màu gradient phức tạp | ⚠️ Khó hơn | ✅ Tự nhiên |
| SEO / Accessibility | ✅ Text trong SVG được index | ❌ Cần alt text |
| Dùng cho | Logo, icon, illustration, chart, map | Ảnh sản phẩm, banner, ảnh nền |
Ứng dụng thực tế của SVG trong web
- Logo và icon: Dùng SVG thay PNG cho logo để luôn sắc nét trên màn hình Retina và mọi kích thước. File SVG logo thường nhỏ hơn PNG tương đương.
- Icon system: Thư viện icon như Heroicons, Feather Icons, Lucide đều phân phối dạng SVG — nhẹ, tùy chỉnh màu bằng CSS, không cần font icon.
- Data visualization: Biểu đồ, đồ thị trong D3.js, Chart.js đều render bằng SVG.
- Animation: SVG kết hợp với CSS animation hoặc GSAP tạo hiệu ứng mượt mà, nhẹ hơn video nhiều lần.
- Interactive map: Bản đồ SVG có thể click từng vùng, highlight, tooltip.
Kết luận
SVG là một trong những định dạng quan trọng nhất trong web hiện đại — linh hoạt, nhẹ, sắc nét và có thể điều khiển bằng code. Dù bạn là designer muốn chỉnh sửa nhanh hay developer muốn hiểu cấu trúc SVG, editor online này giúp bạn làm việc trực tiếp với SVG mà không cần cài thêm bất kỳ phần mềm nào.
Khám phá thêm tại codetuthub.com/tools.
0 Bình luận