Trình xem SVG

Giới thiệu về GeekFormat

Đầu vào SVG

0 ký tự

Xem trước cục bộ, không dán nội dung script từ nguồn không đáng tin

Đầu vào SVG

0 ký tự

Xem trước cục bộ, không dán nội dung script từ nguồn không đáng tin

Xem trước

Dán hoặc viết SVG trong « Đầu vào »Dán hoặc nhập mã SVG ở bên trái

Trình xem SVG trực tuyến. Dán mã SVG để render và xem trước hình ảnh vector tức thì theo thời gian thực. Hỗ trợ sao chép và tải tệp .svg. Xử lý cục bộ — an toàn khi sử dụng.

Đề xuất Liên quan

Chuyển đổi ảnh

Nén ảnh

Thay đổi kích thước ảnh

Cắt ảnh

trinh sua anh

Trinh tao ICO

SVG là gì?

SVG (Scalable Vector Graphics, đồ họa vector có thể mở rộng) là định dạng hình ảnh mô tả hình dạng hình học bằng XML. Khác với JPG và PNG là bitmap (ma trận pixel), SVG sử dụng các thẻ như <rect>, <circle>, <path> để mô tả đường dẫn toán học của hình dạng, do đó hình ảnh không bị mờ khi thu phóng ở bất kỳ kích thước nào.

**SVG phù hợp với những trường hợp nào?** Logo, icon UI, sơ đồ khối, điểm đánh dấu bản đồ, biểu đồ, trang trí hoạt hình, minh họa tái sử dụng — những trường hợp này đòi hỏi cao về độ sắc nét, khả năng đổi màu, khả năng mở rộng và điều khiển bằng CSS, vì vậy SVG là lựa chọn tự nhiên.

**Khác biệt với Canvas:** Canvas là API vẽ lệnh, sau khi vẽ mọi thứ trở thành pixel; SVG là các nút DOM khai báo, có thể thay đổi thuộc tính, kiểu CSS bất cứ lúc nào và gắn sự kiện. Do đó, đối với icon, UI và tình huống tương tác hãy sử dụng SVG, đối với game, hạt và nghệ thuật pixel hãy sử dụng Canvas.

**Cấu trúc điển hình:** <svg> nút gốc, <g> nhóm, <path> đường dẫn (thường dùng nhất, chứa thuộc tính d), gradient (<linearGradient>/<radialGradient>), bộ lọc (<filter>), hoạt hình (SMIL/CSS/JS).

**Cách xem trước:** Với công cụ này, dán mã nguồn SVG vào trình soạn thảo — bên phải sẽ render theo thời gian thực. Nhờ bộ chia có thể kéo, bạn có thể kiểm tra tính đúng đắn của mã SVG và sự phù hợp của hiệu ứng hiển thị với mong đợi trong vài giây.

Trường hợp sử dụng

Khi nhà phát triển frontend cần xem trước nhanh kết quả render của mã icon SVG
Xác minh hiệu ứng hiển thị của SVG sau khi sao chép từ Figma, Sketch và các công cụ thiết kế khác
Xem các thay đổi theo thời gian thực trong khi gỡ lỗi đường dẫn, màu sắc hoặc thuộc tính viewBox của SVG
Kiểm tra và xác minh mã SVG trước khi tích hợp vào mã dự án

Cách Sử dụng

Dán mã nguồn SVG vào trình soạn thảo bên trái hoặc nhấp «Tải ví dụ» để xem minh họa
Kết quả render hình ảnh vector sẽ hiển thị tức thì ở bên phải, khi chỉnh sửa mã, xem trước sẽ cập nhật theo thời gian thực
Sau khi kiểm tra, nhấp vào nút sao chép để sao chép mã hoặc tải xuống dưới dạng tệp .svg với tên tùy chỉnh

Tính năng

Xem trước thời gian thực: dán hoặc chỉnh sửa mã SVG — hình ảnh vector được render tức thì, WYSIWYG
Bố cục chia đôi: trên máy tính kéo để điều chỉnh độ rộng bảng điều khiển, trên di động chuyển đổi giữa nhập và xem trước qua tab
Xuất một cú nhấp: sao chép mã nguồn SVG vào bộ nhớ đệm hoặc tải xuống dưới dạng tệp .svg chuẩn với tên tùy chỉnh
Xử lý cục bộ: tất cả phân tích cú pháp và render SVG được thực hiện trong trình duyệt, mã không tải lên máy chủ — an toàn hơn
Nền trong suốt: nền bàn cờ cho phép nhìn rõ vùng trong suốt và chi tiết cạnh của SVG
Bộ đếm ký tự: hiển thị số lượng ký tự trong mã theo thời gian thực, ví dụ có sẵn để bắt đầu nhanh chóng

Câu hỏi Thường gặp

Làm cách nào để xem trước hiệu ứng mã SVG trực tuyến?

Dán mã nguồn SVG vào trình soạn thảo bên trái, hình ảnh vector sẽ được render tức thì ở bên phải. Bạn có thể chỉnh sửa mã trực tiếp trong trình soạn thảo, khu vực xem trước sẽ làm mới theo thời gian thực — thuận tiện cho gỡ lỗi icon và xác minh hiệu ứng.

Làm cách nào để tải và lưu SVG đã xem trước?

Nhấp vào nút tải xuống ở góc trên bên phải khu vực xem trước, đặt tên tệp và lưu dưới dạng tệp .svg chuẩn. Bạn cũng có thể nhấp vào nút sao chép để sao chép mã nguồn SVG vào bộ nhớ đệm và dán trực tiếp vào mã dự án.

Mã SVG có được tải lên máy chủ không? Có an toàn không?

Không. Tất cả phân tích cú pháp và render SVG được thực hiện cục bộ trong trình duyệt, mã SVG không được tải lên bất kỳ máy chủ nào. Sau khi xử lý, dữ liệu sẽ bị xóa ngay khỏi bộ nhớ, loại bỏ rủi ro rò rỉ tài liệu icon và bản nháp thiết kế chưa công bố.

Có hỗ trợ mã SVG sao chép từ phần mềm thiết kế không?

Có. Mã SVG sao chép từ Figma, Sketch, Adobe Illustrator và các phần mềm thiết kế khác có thể dán trực tiếp để xem trước. Khuyến nghị kiểm tra kết quả render trước, sau đó tích hợp vào dự án nếu không có vấn đề.

Tại sao xem trước SVG không hiển thị? Các nguyên nhân phổ biến?

Nguyên nhân phổ biến: ① thiếu khai báo không gian tên xmlns="http://www.w3.org/2000/svg"; ② thẻ chưa đóng trong mã; ③ ký tự đặc biệt không được thoát đúng cách; ④ lỗi cú pháp trong chính SVG. Vui lòng kiểm tra các mục này.

Có thể tùy chỉnh tên tệp SVG tải xuống không?

Có. Sau khi nhấp vào nút tải xuống, hộp nhập tên tệp sẽ xuất hiện, nhập tên mong muốn (mặc định image.svg), nhấn Enter hoặc xác nhận — tệp sẽ được tải xuống. Công cụ sẽ tự động thêm phần mở rộng .svg.

Thuật ngữ

viewBox: Hệ tọa độ bên trong SVG, được chỉ định ở định dạng «x y width height». Thông dụng «0 0 24 24» có nghĩa là chiều rộng và chiều cao là 24 đơn vị. Kích thước hiển thị thực tế của SVG được kiểm soát bởi thuộc tính width/height hoặc CSS bên ngoài.
Không gian tên XML (namespace): Để trình duyệt nhận dạng chính xác SVG là tài liệu SVG, cần khai báo xmlns="http://www.w3.org/2000/svg". Thiếu namespace là nguyên nhân phổ biến nhất khiến SVG không hiển thị trong HTML.MDN - Không gian tên SVG
Thuộc tính d của đường dẫn path: Tập hợp các lệnh đường dẫn bao gồm các chữ cái như M/L/C/Q/H/V/Z và tọa độ. M=di chuyển, L=vẽ đường thẳng, C=đường cong Bezier bậc ba, Q=đường cong Bezier bậc hai, Z=đóng đường dẫn. Các icon phức tạp thường được biểu thị chỉ bằng một phần tử path và thuộc tính d của nó.
currentColor: Từ khóa CSS tham chiếu đến thuộc tính color của phần tử hiện tại. Nếu trong SVG bạn đặt fill hoặc stroke là currentColor, thay đổi color trong CSS bên ngoài sẽ thay đổi màu icon — đây là cách làm phổ biến trong hệ thống thiết kế.

Tham khảo nhanh các phần tử SVG phổ biến

Phần tử	Loại	Mục đích
`<svg>`	Nút gốc	Container cho tất cả SVG, bắt buộc
`<rect>`	Hình cơ bản	Hình chữ nhật, hình chữ nhật bo góc
`<circle> / <ellipse>`	Hình cơ bản	Hình tròn / Hình elip
`<line> / <polyline>`	Hình cơ bản	Đường thẳng / Đường gấp khúc
`<polygon> / <path>`	Đường dẫn	Đa giác / Đường cong tùy ý (thuộc tính d)
`<text> / <tspan>`	Văn bản	Văn bản nhúng trong SVG
`<g>`	Nhóm	Nhóm các nút để áp dụng biến đổi đồng nhất
`<defs> / <symbol>`	Định nghĩa	Hình dạng và gradient tái sử dụng
`<linearGradient> / <radialGradient>`	Gradient	Tô gradient tuyến tính / xuyên tâm
`<use>`	Tái sử dụng	Tham chiếu phần tử trong defs
`<filter>`	Bộ lọc	Làm mờ, đổ bóng và các hiệu ứng nâng cao khác

So sánh SVG và định dạng bitmap

Tham số	SVG (vector)	PNG (bitmap)	JPG (bitmap)
Cách biểu diễn	XML mô tả đường dẫn hình học	Ma trận pixel	Ma trận pixel (nén DCT)
Hiệu ứng khi phóng to	Không bị mờ ở mọi tỷ lệ	Bị mờ khi phóng to	Bị mờ, vết nén rõ rệt
Kích thước tệp	Phụ thuộc độ phức tạp đường dẫn, logo thường < 10KB	Trung bình (không mất dữ liệu)	Nhỏ (mất dữ liệu)
Nền trong suốt	✅	✅	❌
Hỗ trợ hoạt hình	✅ SMIL / CSS / JS	❌ (cần APNG)	❌
Đổi màu bằng CSS	✅ currentColor / biến fill	❌	❌
Ứng dụng phù hợp	Icon, logo, vector UI	Tài liệu nền trong suốt, ảnh chụp màn hình	Ảnh chụp, gradient lớn

Authoritative References

ReferenceMDN - Hướng dẫn SVG
ReferenceMDN - Phần tử <svg>
ReferenceWikipedia - Scalable Vector Graphics
ReferenceW3C - Đặc tả SVG