Ảnh vector SVG (.svg)
W3C Tiêu chuẩnScalable Vector Graphics (SVG) là định dạng hình ảnh vectơ dựa trên XML dành cho đồ họa hai chiều với khả năng hỗ trợ tính tương tác, kiểu dáng CSS và hoạt ảnh.
Chuyển đổi SVG sang PNG
Trình chuyển đổi từ SVG sang PNG miễn phí trên trình duyệt. Chuyển đổi tệp ngay lập tức trên thiết bị của bạn.
Nén SVG trực tuyến
Riêng tư - tệp không bao giờ rời khỏi thiết bị của bạn
Kiểm tra & Siêu dữ liệu
Các hệ điều hành và trình phân tích tệp nhận dạng tệp SVG bằng cách kiểm tra chuỗi byte nhị phân đầu tệp:
Chữ ký ở đầu tệp (mẫu byte nhận diện)
Các hệ điều hành và trình phân tích tệp nhận dạng tệp SVG bằng cách kiểm tra chuỗi byte nhị phân đầu tệp:
CHỮ KÝ HEX (OFFSET 0):
3C 73 76 67BIỂU DIỄN ASCII: <svg
Tiêu chuẩn hóa: W3C Recommendation (SVG 1.1 / SVG 2)
Thông số kỹ thuật
| Kiến trúc Container | Tài liệu đánh dấu văn bản dựa trên XML xác định hình học vectơ 2D |
| Nén | Nén văn bản Gzip / Brotli (SVGZ sử dụng nén gzip) |
| Thứ tự byte | Không áp dụng (Dòng ký tự UTF-8 / UTF-16 dựa trên văn bản) |
| Không gian màu | sRGB, Mô-đun màu CSS 4 (Display P3, lab, lch) |
| Kênh & Cấu trúc | Hình dạng vectơ độ phân giải vô hạn, đường cong bezier, kiểu chữ và mặt nạ độ mờ |
| Kích thước tối đa | Không phụ thuộc vào độ phân giải (thu phóng vô hạn đến bất kỳ khung nhìn nào mà không bị vỡ hạt) |
| Độ trong suốt | Độ trong suốt alpha biến đổi hoàn toàn và chế độ hòa trộn CSS |
| Truyền phát & Tăng dần | Hỗ trợ phân tích cú pháp luồng văn bản lũy tiến bởi trình phân tích cú pháp XML của trình duyệt |
Ma trận so sánh kỹ thuật: SVG so với các đối thủ
| Thuộc tính kỹ thuật | SVG (Hiện tại) | HTML5 Canvas | PNG | |
|---|---|---|---|---|
| Mô hình kết xuất | DOM vectơ chế độ lưu giữ | Canvas bitmap chế độ tức thời | Vùng chứa trang cố định dạng retained mode | Lưới pixel raster |
| Tạo kiểu & CSS | Hoàn toàn có thể tạo kiểu qua các lớp và biến CSS | Yêu cầu vẽ lại API canvas JavaScript | Không có kiểu dáng CSS động | Pixel raster cố định |
| khả năng thu phóng vô hạn | Có (đường cong vectơ toán học) | Yêu cầu thu phóng độ phân giải thủ công | Có (các thành phần vectơ) | Không (vỡ hạt khi phóng to) |
| Tính tương tác | Sự kiện DOM gốc (di chuột, nhấp chuột, hoạt ảnh) | Yêu cầu tính toán thủ công để phát hiện vùng tương tác | Tài liệu tĩnh | Yêu cầu bản đồ hình ảnh hoặc canvas |
Các dạng hỏng thường gặp và hướng dẫn khôi phục bằng mã hex
Trình duyệt hiển thị Lỗi phân tích cú pháp XML: thẻ chưa đóng hoặc thẻ không khớp.
Nguyên nhân gốc rễ: Cú pháp XML không hợp lệ, thiếu thẻ đóng hoặc ký tự và (&) không được thoát ('&' thay vì '&').
Khắc phục: Xác thực bằng công cụ kiểm tra XML (xmllint file.svg) và sửa các thẻ không cân bằng.
Phân tích bảo mật và các đường tấn công nhằm vào bộ phân tích cú pháp
Vì SVG là XML có thể thực thi hỗ trợ thẻ '<script>' và các thực thể bên ngoài, nó tiềm ẩn các rủi ro XSS và SSRF đáng kể nếu các SVG không đáng tin cậy được hiển thị.
Các véc-tơ tấn công đã biết
- Cross-Site Scripting (XSS) được lưu trữ thông qua thẻ '<script>' được nhúng hoặc trình xử lý sự kiện 'onload='.
- Các cuộc tấn công XML External Entity (XXE) đọc tệp máy chủ cục bộ khi được phân tích cú pháp trên máy chủ backend.
- Sự mở rộng thực thể XML Billion Laughs gây ra từ chối dịch vụ.
Biện pháp phòng thủ tốt nhất: Luôn làm sạch SVG bằng DOMPurify trước khi nhúng, hoặc phân phối SVG với 'Content-Security-Policy: default-src 'none'' hoặc dưới dạng thẻ '<img>' để tự động vô hiệu hóa tập lệnh.
Nguồn gốc lịch sử và các cột mốc
Ưu điểm & Lợi ích chính
- Độc lập độ phân giải vô hạn: các đường nét và kiểu chữ sắc nét trên mọi màn hình hoặc tỷ lệ in.
- Kích thước tệp cực kỳ nhỏ cho logo, biểu tượng và các thành phần giao diện UI.
- Hoàn toàn có thể viết tập lệnh và tạo kiểu thông qua CSS và JavaScript bên trong DOM của trình duyệt.
Hạn chế & Nhược điểm kỹ thuật
- Không phù hợp cho ảnh chụp hoặc hình ảnh có sắc thái liên tục phức tạp.
- Các đường dẫn vectơ phức tạp với hàng nghìn nút có thể gây ra độ trễ kết xuất CPU và tiêu thụ nhiều pin.
- Bản chất XML cho phép nhúng tập lệnh, đòi hỏi phải làm sạch nghiêm ngặt trước khi kết xuất các tệp tải lên không đáng tin cậy.
Thông tin kỹ thuật thú vị
- Gzip có thể giảm đáng kể dung lượng một số tệp SVG; mức giảm tùy nội dung tài liệu và cài đặt nén.
- Thuộc tính viewBox xác định một vùng canvas tọa độ trừu tượng ánh xạ động tới các pixel màn hình vật lý.
- Các trình duyệt web ban đầu thiếu các công cụ SVG gốc, khiến Adobe phân phối trình cắm trình duyệt Adobe SVG Viewer trước khi sự hỗ trợ gốc của trình duyệt được củng cố vào khoảng năm 2011.
Các câu hỏi kỹ thuật thường gặp
Tệp SVG có thể chứa mã độc hại không?
Có. Vì SVG là XML hợp lệ, nó có thể chứa JavaScript được nhúng ('<script>') sẽ thực thi nếu SVG được tải trực tiếp trong trình duyệt hoặc mở trong một phần tử '<svg>' nội tuyến. Việc phân phối SVG qua thẻ '<img>' sẽ tự động vô hiệu hóa việc thực thi tập lệnh.
Khi nào tôi nên sử dụng SVG thay vì PNG?
Hãy sử dụng SVG cho biểu tượng, logo, biểu đồ, hình minh họa và kiểu chữ khi cần thu phóng sắc nét trên mọi kích thước màn hình và kích thước tệp nhỏ. Sử dụng PNG hoặc WebP cho ảnh chụp.
Làm thế nào tôi có thể tối ưu hóa các tệp SVG lớn hoặc phức tạp?
Bạn có thể dọn dẹp các đường dẫn vectơ bằng cách loại bỏ siêu dữ liệu dư thừa, bình luận của trình chỉnh sửa (từ Inkscape hoặc Illustrator), các nhóm ẩn và các khai báo không gian tên không sử dụng bằng các công cụ như SVGO hoặc bằng cách chạy nén SVG.
Các cặp chuyển đổi SVG liên quan
Chuyển tệp vector SVG thành ảnh raster PNG, biến đồ họa dựa trên mã có thể co giãn thành lưới điểm ảnh cố định để tương thích với nhiều ứng dụng.
Đóng gói hình ảnh raster PNG bên trong vùng chứa vector SVG XML để hiển thị co giãn trên web và tích hợp vào bố cục tương thích với vector.
Chuyển đổi các bản ghi vẽ vector GDI 16-bit cũ của Windows thành các đường dẫn SVG hiện đại có thể phóng to mà không giảm độ phân giải.
Chuyển đổi đồ họa Enhanced Metafile 32-bit của Windows thành ảnh vector SVG rõ nét, thích ứng tốt với web và phần mềm thiết kế.
Chuyển bản vẽ DXF sang tệp SVG xuất từ CAD, biến dữ liệu vector kỹ thuật phức tạp thành đồ họa XML nhẹ dùng trên trình duyệt web và trong các trình chỉnh sửa vector.
Chuyển Scalable Vector Graphics (SVG) sang Drawing Exchange Format (DXF) giúp biến các vector trực quan sẵn sàng cho web thành tọa độ toán học chính xác mà phần mềm CAD yêu cầu.
Chia sẻ logo hoặc hình minh họa SVG dưới dạng PDF một trang. Các đường vector có thể co giãn được chuyển thành ảnh có độ phân giải cố định, nên phóng to không thể khôi phục chi tiết vector.