使用 foreignObject 把 HTML 與內嵌 CSS 包進可縮放的 SVG。即時預覽並下載可直接使用的 .svg 檔案。全部在你的瀏覽器中執行。
SVG 的 foreignObject 元素可以把可運作的 HTML 與 CSS 嵌入向量影像中。成品縮放後依然乾淨俐落，凡是接受 SVG 的地方都能使用 — 很適合製作徽章、卡片與精緻標籤。
用 foreignObject 產生的 SVG 不是截圖 - 你的標記會原封不動地留在檔案裡。文字仍然是真正的文字，內嵌 CSS 繼續發揮作用，全程不做點陣化，因此不論放大到什麼程度都保持銳利，而檔案本身通常只有幾 KB。這讓它非常適合用在 README 徽章、個人資料卡、儀表板小工具，以及任何你希望把一段有樣式的 HTML 當成單一影像檔來託管、嵌入或版本控管的場合。
如果成品會在網頁瀏覽器中呈現，就用這個工具，因為瀏覽器原生支援 foreignObject，畫面能保持銳利。如果你需要一張到處都能用的像素影像 - 在聊天軟體、文件或設計軟體中 - 請改用我們的 HTML 轉影像 轉換器，它可以輸出 PNG、JPG 或 PDF。這兩個工具相輔相成：一個把 HTML 保留成可縮放的向量，另一個則把它凍結成點陣圖。
關於把 HTML 轉成 SVG，你需要知道的一切。
你的 HTML 會被放進 SVG 的 <foreignObject> 中，瀏覽器會把它當成向量圖的一部分來轉譯，整體縮放時不會出現鋸齒。
內嵌 CSS 與 data-URI 影像的效果最好。SVG 若在你的網站之外開啟，外部資源可能無法載入，因此能內嵌的盡量內嵌。
不會。SVG 完全在你的瀏覽器中產生。
可以。產生前輸入任意寬度與高度（像素）即可，這會決定 SVG 的畫布與 viewBox；由於檔案是向量圖，日後縮放也不會失去銳利度。
foreignObject 由網頁瀏覽器負責轉譯，但 Inkscape、Illustrator 等許多繪圖軟體並未完整支援。建議把 SVG 用在網頁或瀏覽器類的工具上，效果最好。
這個工具會把標記保留成向量，絕不點陣化。如果你需要像素影像，請用我們的 HTML 轉影像工具轉譯同一段 HTML，它可輸出 PNG、JPG 或 PDF。