使用 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。