Trình xem SVG miễn phí

Xem trước và kiểm tra các tệp SVG với thông tin chi tiết.

Dữ liệu của bạn không rời khỏi thiết bị
Tải lên tệp SVG

hoặc kéo và thả

Về SVG

SVG (Scalable Vector Graphics) là một định dạng XML cho đồ họa vector. Khác với các định dạng raster (PNG, JPG), hình ảnh SVG thích ứng hoàn hảo với mọi kích thước mà không mất chất lượng. Chúng nhẹ, dễ tiếp cận và được hỗ trợ rộng rãi bởi các trình duyệt hiện đại.

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

SVG là gì?

SVG (Scalable Vector Graphics) là định dạng đồ họa 2D sử dụng các đường cong và đường vẽ toán học thay vì pixel. Điều này làm cho các tệp SVG độc lập với độ phân giải, chúng vẫn sắc nét ở mọi kích thước, từ các biểu tượng nhỏ đến biển quảng cáo.

Sự khác biệt giữa SVG và PNG là gì?

PNG là raster (dựa trên pixel) và có kích thước cố định, phóng to nó gây ra mờ. SVG là vector (dựa trên toán học) và phóng to vô tận mà không mất chất lượng. SVG lý tưởng cho logo, biểu tượng và hình minh họa. PNG phù hợp hơn cho ảnh và hình ảnh phức tạp.

Tôi có thể sửa mã SVG trực tiếp không?

Có, SVG là văn bản XML, vì vậy bạn có thể chỉnh sửa nó trong bất kỳ trình soạn thảo văn bản nào. Bạn có thể thay đổi màu sắc, kích thước, vị trí và hơn thế nữa bằng cách sửa đổi các thuộc tính. Sử dụng trình xem này để dán mã của bạn và xem các thay đổi tức thì.

SVG đã thắng cuộc chiến định dạng, hai lần

Trước khi SVG tồn tại, hai định dạng vector cạnh tranh đã được trình lên W3C vào đầu năm 1998. PGML (Precision Graphics Markup Language), được nộp ngày 10 tháng 4 năm 1998 bởi Adobe, IBM, Netscape và Sun, bắt nguồn từ mô hình hình ảnh Adobe PostScript. VML (Vector Markup Language), được nộp ngày 13 tháng 5 năm 1998 bởi Microsoft, Macromedia, Hewlett-Packard, Autodesk và Visio, sử dụng cú pháp gần với những gì Microsoft đã cung cấp trong Office 2000 và Internet Explorer 5. W3C không chọn người thắng. Thay vào đó, họ thành lập Nhóm Làm việc SVG do Chris Lilley làm chủ tịch để thiết kế một tiêu chuẩn duy nhất thay thế cả hai. Bản thảo Làm việc công khai đầu tiên của SVG xuất hiện vào ngày 11 tháng 2 năm 1999.

SVG 1.0 được xuất bản dưới dạng Khuyến nghị W3C vào ngày 4 tháng 9 năm 2001, với biên tập viên Jon Ferraiolo (Adobe) và những người đóng góp từ Adobe, IBM, Sun, Apple, Canon, Corel, Kodak, Macromedia, Microsoft, Netscape, Oracle, Sharp, Quark và Xerox, một trong những liên minh nhà cung cấp rộng rãi nhất của bất kỳ thông số W3C nào. SVG 1.1 tiếp theo vào ngày 14 tháng 1 năm 2003 và vẫn là đường cơ sở thực tế của web hiện đại; Ấn bản Thứ hai (16 tháng 8 năm 2011) đã tích hợp các errata. SVG 1.1 chia thông số thành các mô-đun và xác định ba cấu hình (Full, Basic, Tiny). VML tiếp tục được cung cấp trong IE 5 đến 9 và được Microsoft Office sử dụng nội bộ, nhưng bị ngừng trong IE 9 (tháng 3 năm 2011) để ủng hộ SVG native và thực sự đã chết vào IE 11. SVG 2 đã là Bản thảo Làm việc W3C từ năm 2016 mà không có ngày Khuyến nghị nào trong tầm nhìn; các trình duyệt cung cấp tính năng từng phần khi có nhu cầu tương tác.

Điều gì khiến SVG thực sự khác biệt

Hỗ trợ trình duyệt đã đồng nhất từ năm 2011

SVG native xuất hiện trong Firefox 1.5 (tháng 11 năm 2005), Opera 9 (tháng 6 năm 2006), Safari 3.0 (tháng 6 năm 2007), Chrome 1.0 (tháng 9 năm 2008), và cuối cùng là Internet Explorer 9 (tháng 3 năm 2011): đây là điểm uốn. Trước IE 9, các trang web phải cung cấp VML conversion shim hoặc plugin Adobe SVG Viewer để hỗ trợ IE 6-8. iOS Safari có SVG một phần từ khi ra mắt và hỗ trợ đầy đủ từ iOS 5 (tháng 10 năm 2011); Android đạt được điều này với Honeycomb 3.0 (tháng 2 năm 2011) và ChromeWebView đã thay thế trình duyệt AOSP khoảng Android 4.4 (2013). Giới hạn dưới thực tế cho SVG-as-image (<img src="x.svg">) là khoảng cuối năm 2011. Đến năm 2026, không có dự án web thực tế nào cần hỗ trợ các trình duyệt không có SVG đầy đủ.

SVG không chỉ là định dạng hình ảnh, đây là kiểu tài liệu có thể thực thi

Đây là điều quan trọng nhất cần hiểu về bảo mật SVG. Một SVG độc hại có thể chứa các khối <script>, trình xử lý sự kiện (onload, onclick, onmouseover), hoặc các liên kết <a xlink:href="javascript:...">. Khi SVG như vậy được tải trong ngữ cảnh hoạt động (qua <object>, <iframe>, điều hướng trình duyệt đến URL .svg, hoặc qua chèn innerHTML) trình duyệt thực thi script. Các trang web cho phép SVG được tải lên nhúng theo cách này có thể bị người tải lên khai thác XSS.

Thẻ <img> là đường an toàn. Khi SVG được tải qua <img src="x.svg"> hoặc là background-image CSS, trình duyệt chạy SVG trong chế độ sandbox vô hiệu hóa script, không fetch bên ngoài. Script bên trong không thực thi, các fetch bên ngoài bị chặn, và SVG không thể tương tác với trang cha. CSS bên trong SVG được hiển thị, nhưng mọi thứ có thể gây tác dụng phụ đều bị vô hiệu hóa. Đây là cách được khuyến nghị để sử dụng SVG hiện nay.

Để bảo vệ phía server, OWASP khuyến nghị sanitize các SVG được tải lên với DOMPurify (DOMPurify.sanitize(svg, {USE_PROFILES: {svg: true}})), svg-sanitizer (PHP), sanitize-svg (Node) hoặc Bleach (Python), loại bỏ <script>, <foreignObject> và tất cả trình xử lý on*, và từ chối các giá trị xlink:href bắt đầu bằng javascript: hoặc data:. Đặt Content-Security-Policy nghiêm ngặt trên trang hiển thị SVG do người dùng cung cấp và phục vụ SVG được tải xuống với Content-Disposition: attachment là các biện pháp an toàn bổ sung. Trình xem này hoàn toàn phía client và SVG không bao giờ rời khỏi thiết bị của bạn, nhưng nếu bạn đang nhúng SVG do người dùng cung cấp trên một trang công khai, hãy sanitize nó.

SVG so với PNG so với JPG so với WebP so với AVIF, khi nào dùng cái nào

WebP (Google, 2010) và AVIF (AOMedia, 2019) là các định dạng raster hiện đại cạnh tranh với PNG và JPG, không phải với SVG, chúng không phải vector. Điểm yếu của SVG là ảnh chụp và hình ảnh tông màu liên tục: biểu diễn mọi pixel dưới dạng phần tử vector nguyên thủy làm phình to tệp vượt xa JPEG. Với các trường hợp icon và logo, SVG vẫn không có đối thủ.

Tối ưu hóa SVG của bạn với SVGO

Một SVG điển hình được xuất từ Adobe Illustrator, Sketch, Figma hoặc Inkscape chứa rất nhiều overhead, siêu dữ liệu dành riêng cho trình soạn thảo (<sodipodi:namedview>, <inkscape:groupmode>), tên lớp mặc định và cấu trúc nhóm, độ chính xác quá mức trong tọa độ đường dẫn (d="M 12.000023 18.999991 ..."), thuộc tính inline style có thể chuyển thành lớp CSS, các khối comment xác định trình soạn thảo.

SVGO (SVG Optimizer), ban đầu được viết bởi Kir Belevich năm 2012, là công cụ trong ngành. Đây là công cụ dòng lệnh Node.js với khoảng 50 plugin xử lý từng phần tối ưu hóa riêng lẻ: removeComments, removeMetadata, removeEditorsNSData, convertColors (chuyển rgb(255,0,0) thành #f00), convertPathData (thu gọn các lệnh đường dẫn và loại bỏ độ chính xác thừa), mergePaths, cleanupNumericValues (làm tròn về độ chính xác có thể cấu hình, mặc định 3 chữ số thập phân). Mức nén điển hình là tệp nhỏ hơn 30-70% đối với SVG được thiết kế từ công cụ thiết kế, đôi khi đạt 80% với các xuất từ Inkscape do siêu dữ liệu trình soạn thảo nặng. SVGOMG (svgomg.net) là giao diện web cho SVGO của Jake Archibald (Google) và phiên bản GUI được sử dụng nhiều nhất.

Hệ sinh thái thư viện icon

Các thư viện icon SVG chiếm ưu thế trong stack web hiện đại. Các bộ lớn bạn sẽ gặp là Heroicons (Tailwind Labs, ~280 icon, MIT), Lucide (fork của Feather, ~1.400 icon), Bootstrap Icons (~2.000), Material Symbols (Google, ~3.000 trên nhiều trọng số), Font Awesome 6 (~30.000 miễn phí + Pro), Phosphor Icons (~9.000 trên sáu trọng số), và Tabler Icons (~5.200). Bộ tổng hợp Iconify lưu trữ hơn 200.000 icon nguồn mở từ 150+ bộ icon sau một API duy nhất; developer có thể viết <iconify-icon icon="mdi:home"></iconify-icon> và framework tải SVG của chỉ icon đó theo nhu cầu. Sự chuyển dịch từ icon-font (thời Font Awesome 4 / Glyphicons) sang icon SVG xảy ra khoảng 2017-2019, được thúc đẩy bởi khả năng truy cập, khả năng đổi màu và loại bỏ FOUT (flash of unstyled text khi font icon chưa tải).

Thêm câu hỏi

Sự khác biệt giữa viewBox và width/height là gì?

viewBox="0 0 100 100" xác định hệ tọa độ người dùng nội bộ của SVG, canvas «tự nhiên» của nó là 100×100 đơn vị, bất kể kích thước pixel được render. width và height đặt kích thước hiển thị được render. Khi cả hai có mặt, SVG co giãn viewBox để vừa khớp với hộp được render. preserveAspectRatio (mặc định xMidYMid meet) kiểm soát cách co giãn xử lý sự không khớp tỷ lệ khung hình: meet bảo toàn tỷ lệ và căn giữa, none kéo dãn, slice cắt để lấp đầy. Chỉ đặt viewBox và để CSS kiểm soát width và height là thực hành tốt nhất hiện đại cho các hệ thống icon.

Tại sao icon SVG của tôi trông mờ trên màn hình?

Hầu như luôn là một trong ba nguyên nhân: (1) SVG đang được render vào kích thước pixel cố định không khớp với tỷ lệ khung hình viewBox, khiến trình duyệt kéo dãn nó; (2) SVG được xuất từ công cụ thiết kế với tọa độ sub-pixel («M 12.5 7.5 L ...»), và tính năng anti-aliasing của trình duyệt đang làm hết sức với các cạnh không nguyên; hoặc (3) đã đặt preserveAspectRatio="none", cho phép SVG kéo dãn tùy ý. Khắc phục bằng cách đảm bảo container được render khớp với tỷ lệ viewBox, làm tròn tọa độ thành số nguyên trong tùy chọn xuất của công cụ thiết kế, và tránh preserveAspectRatio="none" trừ khi bạn cụ thể muốn kéo dãn.

Tôi có thể dùng SVG làm favicon không?

Có. <link rel="icon" type="image/svg+xml" href="icon.svg"> được hỗ trợ trong Chrome 80+, Firefox 41+ và Safari 14+. Mẫu phổ biến là cung cấp một SVG favicon cho trình duyệt hiện đại và một ICO dự phòng (<link rel="icon" sizes="any" href="favicon.ico">) cho các client cũ. SVG favicon cũng có thể sử dụng media query prefers-color-scheme bên trong SVG để tự động chuyển đổi giữa các biến thể theme sáng và tối.

Thuộc tính d của đường dẫn có thực sự là một ngôn ngữ mini không?

Có, và việc học khoảng chục lệnh là điều gần nhất với việc học đọc SVG bằng tay. Các lệnh là: M/m (di chuyển đến, tuyệt đối/tương đối), L/l (vẽ đường đến), H/h (đường ngang), V/v (đường dọc), C/c (Bezier bậc ba với hai điểm kiểm soát), S/s (Bezier bậc ba mượt, phản chiếu điểm kiểm soát trước), Q/q (Bezier bậc hai), T/t (Bezier bậc hai mượt), A/a (cung elip, phức tạp nhất), và Z/z (đóng đường dẫn). Một d icon điển hình như M5 12h14M12 5l7 7-7 7 là «di chuyển đến (5,12), đường ngang 14 đơn vị, di chuyển đến (12,5), đường 7-phải 7-xuống, đường 7-trái 7-xuống», tức là mũi tên hướng phải.

Công cụ liên quan

Trình chuyển đổi ICO

Chuyển hình ảnh sang định dạng ICO.

Trình thay đổi kích thước hình ảnh

Thay đổi kích thước hình ảnh thành kích thước chính xác.

Hình nền gradient

Tạo hình nền gradient.