离线 · 无上传 · 浏览器本地完成Offline · no uploads · runs in the browser
SVG 转 Markdown——离线、内联图形变 PNG 一行SVG to Markdown offline — inline art becomes a PNG line
这一格的方向很容易讲反，先把链摆正：`svg>md` = `svg>html` + `html>md`（基线现读）。**第一步不栅格化**——`svg>html` 用保留 svg 与 svgFilters 的配置把图形作为矢量包进一份能直接打开的网页，脚本与事件属性去掉，渐变滤镜留下。栅格化发生在**第二步内部**：`html>md` 在序列化之前先跑 `replaceInlineSvgWithPng`（`utils/converters/html-to-md.ts:39`），把文档里每一个内联 SVG 画上画布、输出 PNG 数据 URL、换成一个 `<img>`，Turndown 再把这个 `<img>` 写成 ``。所以「SVG 转 Markdown」的真相是**一行内联 PNG 图片语法**：`<svg>` 标记不会留在 `.md` 里（实测：不经那一步预处理的 Turndown 会把 svg 整个丢掉、只漏出里面的文字），而图形的**可见结果**以位图形式跟着走。产物侧还有两处诚实细节：一，若图被塞在表格单元格里，`gfmTable` 规则会把格子摊平成纯文本，那张图**不会**出现在 Markdown 里；代码因此把「已栅格化」的标记条件写成「产物里真的含有 PNG 数据 URL」，而不是照抄内部计数——界面那行提示只会说文件本身撑得住的话。二，进 .md 之后是否显示、显示多大，由渲染那份 Markdown 的一方决定，本页不替它承诺。想要矢量继续是矢量，请走 SVG→HTML（页面里放大看到的仍是路径）；要固定像素尺寸的位图文件，走 SVG→PNG / JPG / WebP，那边才有最长边与质量开关。全程只有 storage 权限，不联网、不上传。The direction here is easy to state backwards, so lay the chain straight first: `svg>md` = `svg>html` + `html>md`, read live from the baseline. **Step one does not rasterise** — `svg>html` wraps the artwork as a vector into a page you can open, sanitising with a profile that keeps `svg` and `svgFilters`, dropping scripts and event handlers while gradients and filters survive. The rasterising happens **inside step two**: before serialising, `html>md` runs `replaceInlineSvgWithPng` (`utils/converters/html-to-md.ts:39`), painting every inline SVG onto a canvas as a PNG data URI, swapping in an `<img>`, which Turndown then writes as ``. So the truth about “SVG to Markdown” is **one inline PNG image line**: no `<svg>` markup survives into the `.md` (measured — Turndown without that pre-pass discards the element and leaks only its text), while the artwork’s visible result travels as a bitmap. Two honest details on the artifact side. If the diagram sits inside a table cell, the `gfmTable` rule flattens that cell to plain text and the picture **does not** reach the Markdown; the code therefore conditions its «rasterised» flag on the output genuinely containing a PNG data URL rather than on an internal counter, so the line the interface shows only ever says what the file supports. And whether the image displays, and how large, belongs to whatever renders that Markdown — this page promises nothing for them. If the artwork must stay vector, take SVG to HTML, where zooming still shows paths; for a bitmap file at a fixed pixel size take SVG to PNG, JPG or WebP, where the longest-edge and quality controls live. All of it on the storage permission, with no network and no upload.
这条链路怎么走How the route runs
SVGSVG HTMLHTML MarkdownMarkdown
共 2 步，由扩展的路径搜索自动选出，中间产物不落盘。2 steps, chosen by the extension's own path search; intermediate results never touch the disk.
会保留什么What carries over
- 可见结果跟着走：内联 SVG 被画成 PNG 数据 URL，一行 `` 就带着图The visible result travels: each inline SVG becomes a PNG data URI, and one `` line carries the picture
- 栅格化在序列化之前做：所以 `svg` 与 `svgFilters` 保留下来的渐变、滤镜效果能进位图Rasterising happens before serialisation, so what the svg and svgFilters profiles keep — gradients, filters — reaches the bitmap
- 「已栅格化」的提示以产物为准：只有 `.md` 里真的有 PNG 数据 URL 时才说，表格被摊平的情况不会误报The “rasterised” notice is judged from the artifact: it appears only when the .md really contains a PNG data URL, so a flattened table cell cannot trigger a false claim
- 产物自包含：拷走单个 `.md` 就带着这张图，不必另存附件目录Self-contained: copying a single `.md` carries the image with it, no attachments folder needed
- 一批最多 200 个文件、单个 100 MB，与其他路线共用同一道闸门Up to 200 files per batch and 100 MB each — the same gate every other route shares
如实说明的限制What it does not do
- 矢量结构到此为止：`.md` 里没有 `<svg>` 标记，放大看到的是像素The vector ends here: no `<svg>` markup survives in the `.md`, and zooming shows pixels
- 图在表格单元格里时不会进 Markdown——那张表被摊平成纯文本，只留文字A diagram inside a table cell does not reach the Markdown — that table is flattened to text and only the words remain
- 能否显示、显示多大由渲染那份 Markdown 的一方决定，本页不替它承诺Whether it displays, and at what size, is up to whoever renders the Markdown; nothing here promises for them
- 整段 base64 挤在一行里，diff 与审阅都不友好；要可版本化的形状请自己写外链图片The whole base64 payload sits on one line, hostile to diff and review — write an external reference for a versionable shape
- 不做尺寸与质量调节：那些开关在 SVG→PNG / JPG / WebP 那几页No resizing or quality knobs here: those live on the SVG to PNG, JPG and WebP pages
- 最长边 8192 px 的钳制这条路上也有：`svg-embed` 同样走 `fitToMaxDim`（`MAX_CANVAS_EDGE` = 8192），只是这里没有滑杆——超尺寸的原图会被等比缩下来，且不另行通知The 8192 px longest-edge clamp applies on this route too — `svg-embed` goes through the same `fitToMaxDim` (`MAX_CANVAS_EDGE` = 8192) — but here there is no slider, so an oversized drawing is scaled down on the way in without a word
实操提示Working with it
- 要保留矢量：SVG→HTML，图形作为 svg 留在页面里，放大仍是路径To keep it vector: SVG to HTML, where the artwork stays svg and zooming shows paths
- 要位图文件：SVG→PNG / JPG / WebP，那里能定最长边与质量For a bitmap file: SVG to PNG, JPG or WebP, which carry the longest-edge and quality settings
- 要一份文档：SVG→Word 会走同一套「先栅格化再打包」，只是终点是包内图片部件For a document: SVG to Word uses the same rasterise-then-pack machinery, ending in an image part inside the package
常见问题Questions people actually ask
我的图变没了，是没转换成功吗？My drawing disappeared — did the conversion fail?
先分清两种情况。图在正文里时，它被画成 PNG 并以一行内联图片跟着走，`.md` 里没有 `<svg>`；看不到通常是**渲染那一边**不肯画 `data:` 图片。图在被摊平的场合（例如表格单元格）才会真的不进 Markdown——那种情况下产物里也没有 PNG 负载，界面那行「已栅格化」的提示同样不会出现。Separate the two cases. A diagram in the body is painted to PNG and carried as one inline image line, so no `<svg>` remains in the `.md` — if it does not show, that is usually the rendering side refusing to draw a `data:` picture. A diagram in a place that gets flattened, such as a table cell, genuinely does not reach the Markdown, and then there is no PNG payload in the file either, so the «rasterised» notice stays silent as well.
为什么不直接把 `<svg>` 原样写进 Markdown？Why not keep the `<svg>` markup inline in the Markdown?
这条路不做这件事：Turndown 不认识 svg 元素，实测在没有预处理时它会把整个元素丢掉、只漏出里面的文字——那才是真正的静默丢失。本扩展因此在序列化前先把图形画成 PNG，让「看得见的内容」以位图继续存在，代价是矢量结构不再保留。要继续是矢量就写外链、或走 SVG→HTML。This route does not do that: Turndown has no notion of svg elements, and measured without the pre-pass it drops the whole element and leaks only its text — that would be the real silent loss. So the extension paints the artwork to PNG before serialising, keeping what you can see as a bitmap, at the price of the vector structure. To stay vector, use an external reference or take SVG to HTML.
转换后还能改这张图吗？Can I still edit the picture afterwards?
在 Markdown 侧它就是一张图片，只能整体替换或重新引用；要改图形本身，请回到源 SVG 编辑后再转。要不同的输出形状，选另一条路：SVG→HTML 保留矢量，SVG→PNG 给可指定尺寸的位图。Inside Markdown it is just an image: you can replace or re-reference it wholesale, nothing more. To change the drawing itself, edit the source SVG and convert again. For a different output shape choose another route — SVG to HTML keeps the vector, SVG to PNG gives a bitmap at a size you set.
不需要账号，也不需要联网：装好扩展后点图标，在新标签页里打开工作台，文件从磁盘直接选。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