Bọc HTML và CSS nội tuyến của bạn trong một SVG có thể co giãn bằng foreignObject. Xem trước trực tiếp và tải xuống tệp .svg sẵn sàng sử dụng. Mọi thứ đều chạy trong trình duyệt của bạ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ú.
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.
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 gốc và giữ nó sắc nét. Nếu bạn cần một ảnh pixel hoạt động ở mọi nơi - trong ứng dụng nhắn tin, tài liệu hoặc phần mềm thiết kế - hãy kết xuất cùng mã đó với công cụ HTML sang ảnh của chúng tôi, công cụ này tạo ra ảnh PNG, JPG hoặc PDF. Hai công cụ bổ trợ cho nhau: một giữ HTML của bạn ở dạng vector co giãn, công cụ còn lại đóng băng nó thành ảnh bitmap.
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.