Xem trước / Chỉnh sửa SVG

Trình xem / Chỉnh sửa SVG hoạt động như thế nào

Công cụ làm gì

SVG Preview / Editor render markup SVG trực tiếp khi bạn chỉnh sửa và trích xuất metadata (width, height, viewBox, số lượng phần tử) để kiểm tra nhanh. Một công tắc thêm nền caro để bạn nhìn rõ các vùng trong suốt. Công cụ cũng tạo ra một data URI được URL-encode, phù hợp để dùng trực tiếp trong CSS background-image hoặc thuộc tính src của HTML.

Các trường hợp sử dụng phổ biến cho lập trình viên

Nhà thiết kế icon kiểm tra phép tính viewBox và độ dày nét ở các kích thước khác nhau. Lập trình viên frontend xác minh rằng một icon SVG chỉnh tay vẫn render đúng sau khi tối ưu (thủ công hoặc qua SVGO). Lập trình viên email tạo các phiên bản data URI gọn cho logo/nhãn hiệu để nhúng inline trong HTML. Giảng viên minh họa cách các thuộc tính như preserveAspectRatio và overflow ảnh hưởng đến việc render.

Định dạng dữ liệu, kiểu hoặc biến thể

Đầu vào là markup XML SVG thô. Đầu ra là chính SVG đó được render trong một iframe sandbox, cộng với một data URI được URL-encode (data:image/svg+xml;charset=utf-8,…). Chỉ số đếm phần tử tính mọi thẻ mở (bao gồm defs, g, gradients và các phần tử lồng tương tự), cho bạn một cảm nhận sơ bộ về độ phức tạp. Các giá trị thuộc tính được trích xuất được hiển thị ở dạng thô.

Các lỗi thường gặp và trường hợp biên

Các tài nguyên bên ngoài được tham chiếu bởi phần tử `use` hoặc `image` với href sẽ không tải được bên trong iframe sandbox. JavaScript inline trong các phần tử script bị chặn bởi sandbox — animation nên dựa vào SMIL hoặc CSS keyframes. Các SVG phụ thuộc vào một font cụ thể không có sẵn trong hệ thống sẽ rơi về font mặc định; hãy nhúng font hoặc dùng font hệ thống khi xem trước.

Khi nào nên dùng công cụ này thay vì viết mã

Dùng công cụ trên trình duyệt cho thiết kế icon một lần, debug, hoặc tạo data URI. Với asset production, hãy chạy SVG qua SVGO với cấu hình được tinh chỉnh để loại metadata và rút gọn markup, và dùng hệ thống sprite hoặc tích hợp bundler phù hợp để tải icon trong ứng dụng thay vì nhúng data URI ở khắp nơi.