离线 · 无上传 · 浏览器本地完成Offline · no uploads · runs in the browser
SVG 转 HTML——矢量留在页面里，本地离线SVG to HTML offline — the artwork stays vector
一张 SVG 想放进网页、或者只是想在浏览器里看清楚它画了什么，最省事的做法是有一张能直接打开的 HTML。这条链路是 SVG → HTML，一步到位，而且**不栅格化**：图形作为矢量留在页面里，放大看到的是路径而不是像素。净化用的是保留 svg 与 svgFilters 的配置——渐变、滤镜这些可见结果留下，脚本与事件处理器去掉。要位图请走 SVG 转 PNG；进 Word 或 PDF 最终也会变位图——PDF 那条在第一步 `svg>png` 栅格化，Word 那条在第二步 `html>docx` 栅格化。Getting an SVG into a web page, or simply seeing clearly what it draws, is easiest as an HTML file you can open. This route is SVG → HTML in one step, and it does not rasterise: the artwork stays vector, so zooming shows paths rather than pixels. The sanitising profile keeps `svg` and `svgFilters` — gradients and filters survive, scripts and event handlers do not. For a bitmap take SVG to PNG; the PDF route rasterises in its first step (`svg>png`) and the Word route in its second (`html>docx`).
这条链路怎么走How the route runs
SVGSVG HTMLHTML
共 1 步，由扩展的路径搜索自动选出，中间产物不落盘。1 step, chosen by the extension's own path search; intermediate results never touch the disk.
会保留什么What carries over
- 矢量本身：路径、形状、渐变、滤镜与文字的可见结果都按 SVG 原样进页面，放大不产生锯齿或马赛克（不被带过去的那几类写在限制里）The vectors themselves: paths, shapes, gradients, filters and text enter the page as drawn, so zooming produces no jaggies or mosaic — the elements that do not travel are listed under limits
- 自适应显示：页面里图形居中、`max-width: 100%`，窄窗口下不会撑出横向滚动条It fits the window: the graphic is centred with `max-width: 100%`, so a narrow viewport does not gain a horizontal scrollbar
- 净化只砍活动性内容：走的是保留 svg 与 svgFilters 的配置，脚本与 `on*` 事件属性被去掉，绘图能力留下Sanitising only cuts active content: the profile keeps `svg` and `svgFilters`, so scripts and `on*` handlers go while the drawing stays
- 文档标题取你自己的文件名，中英两边都不额外加一句「PNG image」这类不属于你选的语言的说明The document title is your own file name, with no extra sentence in a language you did not pick
如实说明的限制What it does not do
- 活动性内容整类不留：`<script>`、事件属性，以及 `<use>`、`<foreignObject>`、`<font-face*>` 与 SMIL 动画标签都在净化这一步被删掉——靠「点开才展开」「动画驱动」的那部分不会动，这是刻意的安全取舍，不是丢件Nothing active survives: `<script>`, event attributes and the element classes the sanitizer disallows — `<use>`, `<foreignObject>`, `<font-face*>` and the SMIL animation elements — are all removed, so anything that expanded on click or moved by animation stays still. That is a deliberate safety trade-off, not a lost asset
- 外部引用在写文件之前就被剥掉：`<image href>`、`feImage`、`fill="url(…)"`、样式里的 `url()` 与 `@import` 都不留，所以产出的 HTML 打开时不会替你发任何请求；缺的那部分按缺的样子显示Outside references are removed before the file is written: `<image href>`, `feImage`, `fill="url(…)"` and every `url()` / `@import` in the styles are cut, so the delivered page issues no request when you open it — and the gap it leaves shows as a gap
- 整份文件净化后一个字都不剩时，直接报「图片解码失败」而不是给你一张空白页面报成功；只剩 `<use>` 引用那一类不算「空」——`<svg>` 外壳还在，产物照样交给你，只是画不出东西（见下一条）It fails with «image decode failed» only when nothing at all is left after sanitising; a sprite that is nothing but `<use>` references does not count as «nothing» — the `<svg>` shell survives, so the artifact still ships and simply draws no content (see the next item)
- 依赖 `<use>` 的雪碧图会画不出东西：`<symbol>` 的定义留着，引用它的那一层被删——图标符号表这类文件更适合先转 PNG 再交A sprite sheet built on `<use>` comes out blank: the `<symbol>` definitions stay, the layer that references them is removed — for an icon sheet, convert to PNG first
- 要位图（放进只收图片的地方、或者要固定像素尺寸），走 SVG 转 PNG / JPG / WebP；要进文档，走 SVG 转 Word 或 SVG 转 PDF——PDF 那条在第一步 `svg>png` 就栅格化，Word 那条在第二步 `html>docx` 栅格化For a bitmap (somewhere that only takes pictures, or fixed pixel dimensions) take SVG to PNG / JPG / WebP; for documents take SVG to Word or SVG to PDF — those rasterise first
实操提示Working with it
- 一批最多 200 个文件，单个文件上限 100 MB；多个 .svg 一起转逐个产出各自的 .html，想一次拿走就打成一个 ZIPUp to 200 files per batch and 100 MB per file; several .svg files yield one .html each, and the set can be taken as a single ZIP
- 反过来那条路也在：HTML 转 SVG 不存在，但 HTML 里的内联 SVG 在转 Word 时会被逐个栅格化成 PNG 保留下来（不然净化器会把图整块删掉）The other direction is covered differently: there is no HTML to SVG route, but an inline SVG inside HTML is rasterised to PNG one by one on the way into Word — otherwise the sanitizer would delete the diagram outright
常见问题Questions people actually ask
转出来的 HTML 里图还是矢量的吗？Is the artwork still vector in the resulting HTML?
是。这条链路只做「净化 + 包一层文档」，不画到画布上，所以放大看到的是清晰的路径。这也是它与 SVG 转 PNG、SVG 转 Word、SVG 转 PDF 最实际的区别——那三条都会先栅格化。Yes. The route only sanitises and wraps the markup in a document; nothing is painted to a canvas, so zooming shows clean paths. That is the practical difference from SVG to PNG, SVG to Word and SVG to PDF — all three rasterise first.
从别处下载的 SVG 敢直接转吗？Is it safe to convert an SVG downloaded from somewhere else?
比直接双击打开安全。产物里的 SVG 先经 DOMPurify 按 svg + svgFilters 配置净化，脚本与事件属性被剥掉；产出的 HTML 也不去取任何远端资源。最坏情况是画得不一样，而不是执行里面的代码。Safer than double-clicking it. The SVG is sanitised through DOMPurify with the svg + svgFilters profiles, which strip scripts and event attributes, and the page fetches no remote resource. Worst case for an SVG of unknown origin is that it looks different, not that its code runs.
图标库要批量包成页面，文件会外发吗？If I wrap an icon set in pages, do the files leave my machine?
不会。读文件、净化、写页面都在扩展的标签页里完成，只申请 storage 权限、没有 host 权限，产物里也没有从网络取来的代码。No. Reading, sanitising and writing the page all happen inside the extension’s tab: the storage permission only, no host permissions, and no remotely hosted code in the bundle.
不需要账号，也不需要联网：装好扩展后点图标，在新标签页里打开工作台，文件从磁盘直接选。No account and no network: install the extension, click its icon, and the workbench opens in a new tab reading straight off your disk.
从 Chrome 应用商店安装Install from the Chrome Web Store 安装步骤Install steps GitHub 源码Source on GitHub