HTML sang SVG
Gói HTML và CSS nội tuyến của bạn vào một SVG co giãn được bằng foreignObject. Xem trước trực tiếp rồi tải xuống dưới dạng .svg, PNG hoặc JPG. Mọi thứ đều chạy trong trình duyệt của bạn.
HTML bên trong vector có thể co giãn
Phần tử foreignObject của SVG cho phép bạn nhúng HTML và CSS trực tiếp vào bên trong một ảnh vector. Kết quả co giãn mượt mà và có thể dùng ở bất cứ đâu chấp nhận SVG - rất phù hợp cho huy hiệu, thẻ và nhãn phong phú.
Vì sao nên bọc HTML trong SVG?
Một SVG được tạo bằng foreignObject không phải là ảnh chụp màn hình - mã của bạn vẫn hoạt động ngay bên trong tệp. Văn bản vẫn là văn bản thật, CSS nội tuyến của bạn vẫn tiếp tục định dạng nó, và không có gì bị rasterize, vì vậy hình ảnh luôn sắc nét hoàn hảo ở mọi mức thu phóng trong khi bản thân tệp thường chỉ nặng vài kilobyte. Điều đó khiến cách tiếp cận này rất phù hợp cho huy hiệu README, thẻ hồ sơ, tiện ích bảng điều khiển và bất kỳ nơi nào khác mà bạn muốn một đoạn HTML được định dạng hoạt động như một tệp ảnh đơn lẻ có thể lưu trữ, nhúng hoặc quản lý phiên bản.
Vector hay ảnh chụp màn hình - Bạn cần loại nào?
Hãy dùng công cụ này khi kết quả sẽ được hiển thị trong trình duyệt web, vì trình duyệt kết xuất foreignObject một cách tự nhiên và giữ cho hình sắc nét. Vector giữ cho mã đánh dấu của bạn còn sống và co giãn được, nên nó vẫn sắc nét ở mọi kích thước và tệp vẫn nhỏ. Ngược lại, ảnh chụp màn hình đóng băng chính mã đánh dấu đó thành một lưới điểm ảnh cố định: tiện ở những nơi không hỗ trợ SVG, nhưng sau đó không thể tạo kiểu lại hay phóng to.
Câu hỏi thường gặp
Mọi điều bạn cần biết về việc chuyển HTML sang SVG.
HTML của bạn được đặt bên trong một <foreignObject> của SVG, được trình duyệt kết xuất như một phần của vector. Toàn bộ sẽ co giãn mà không bị vỡ hình.
CSS nội tuyến và ảnh dạng data-URI hoạt động tốt nhất. Tài nguyên bên ngoài có thể không tải được khi SVG được mở ngoài website của bạn, vì vậy hãy nhúng trực tiếp những gì có thể.
Không. SVG được tạo hoàn toàn trong trình duyệt của bạn.
Có. Nhập chiều rộng và chiều cao tính bằng pixel trước khi tạo. Chúng xác định khung vẽ SVG và viewBox của nó, và vì tệp là vector nên bạn có thể co giãn nó sau này mà không mất độ sắc nét.
foreignObject được kết xuất bởi trình duyệt web, nhưng nhiều trình chỉnh sửa đồ họa như Inkscape hay Illustrator lại không hỗ trợ đầy đủ tính năng này. Để có kết quả tốt nhất, hãy dùng SVG trên trang web hoặc trong các công cụ chạy trên trình duyệt.
Công cụ này giữ mã của bạn ở dạng vector và không bao giờ rasterize nó. Nếu cần ảnh pixel, hãy kết xuất cùng đoạn HTML đó với công cụ HTML sang ảnh của chúng tôi, công cụ này xuất ra PNG, JPG hoặc PDF.