Markdown SVG 升级
Markdown SVG upgrades
Simon Willison 自五月起构建 markdown-svg-renderer 工具，现已支持将含 SVG 的 Markdown 文本渲染为网页，并可通过 URL 或 GitHub Gist 加载内容。工具新增 PNG、JPEG 标签页，可在浏览器中将 SVG 转为图片格式；MP4 标签页则检测动画 SVG，渲染帧序列并加载 30+MB 的 ffmpeg.wasm，利用编译为 WebAssembly 的 FFMPEG 在浏览器内生成 MP4 视频，便于在原生不支持 SVG 动画的平台分享。
我从五月开始构建我的 markdown-svg-renderer 工具，但此后我为其添加了足够多的功能，值得在此再次讨论。它已演变成我分享包含 SVG 文档的 Markdown 转录文本的理想工具。鉴于我热衷于绘制骑自行车的鹈鹕，这是一个我需要解决的问题！这个工具非常简单。在浏览器中导航到 markdown-svg-renderer，粘贴一些 Markdown 即可查看渲染效果……或者将 Markdown 保存到支持 CORS 的 URL 或 GitHub Gist，然后粘贴该文档的 URL。URL 选项会给你一个可书签的页面，例如 https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657 - 其中嵌入了这个 Gist 的 URL。如果你访问该 Gist，你会看到原始 SVG：在渲染工具中，它看起来像这样：如你所见，Markdown 中的那个 SVG 块已被转换为渲染后的 SVG（在此例中为动画），外加几个标签页。标签页是最有趣的部分。PNG 和 JPEG 标签页在浏览器中将该 SVG 渲染为这些图像格式，并允许你复制或下载它们——这对于在不直接支持 SVG 的平台上分享非常有用。MP4 标签页是今天新增的——它检查 SVG 是否包含任何动画，尝试猜测循环视频应该有多长，然后渲染一整批动画帧，并加载 30+MB 的 ffmpeg.wasm，以便使用编译为 WebAssembly 并在浏览器中运行的完整 FFMPEG 功能，将这些帧编译成 MP4 视频。能够将动画 SVG 再次转换为 MP4，使其易于在原生不支持 SVG 动画的平台上分享。这是一个巧妙的技巧！标签：svg、markdown、tools