【文章标题】:Markdown SVG upgrades 【文章标题】:Markdown SVG 升级

【文章正文】: I started building my

我开始构建我的

markdown-svg-renderer

markdown-svg-renderer

tool

工具

in May

在五月

, but I’ve since added enough features to it that it’s worth talking about here again.

,但此后我为它添加了足够多的功能,值得再次在这里讨论。

It’s evolved into my ideal tool for sharing Markdown transcripts that include SVG documents. Given my

它已经演变成我分享包含SVG文档的Markdown文本的理想工具。鉴于我

proclivity for drawing pelicans riding bicycles

喜欢画骑自行车的鹈鹕

this is a problem that I needed to solve!

这是我需要解决的问题!

The tool is very simple. Navigate to

这个工具非常简单。在浏览器中导航到

markdown-svg-renderer

markdown-svg-renderer

in your browser and paste in some Markdown to see it rendered… or save that Markdown to a CORS-friendly URL or a GitHub Gist and paste in a URL to that document.

并粘贴一些Markdown即可查看渲染效果……或者将Markdown保存到支持CORS的URL或GitHub Gist,然后粘贴该文档的URL。

The URL option will give you a bookmarkable page, for example

URL选项会给你一个可加书签的页面,例如

https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657

https://tools.simonwillison.net/markdown-svg-renderer#url=https%3A%2F%2Fgist.github.com%2Fsimonw%2F6f9e48293be5c916652d29f0dc0b0657

  • which bakes in the URL to

  • 它将URL嵌入到

this Gist

这个Gist

.

。

If you visit

如果你访问

the Gist

这个Gist

you’ll see raw SVG:

你会看到原始SVG:

In the rendered tool that

而在渲染工具中,它

looks like this

看起来像这样

instead:

:

As you can see, that SVG block in the Markdown has been transformed into a rendered SVG (in this case animated) plus several tabs.

如你所见,Markdown中的那个SVG块已被转换为渲染后的SVG(在这个例子中是动画),外加几个标签页。

The tabs are the really fun bit. The PNG and JPEG tabs render that SVG to those image formats in the browser and lets you copy or download them - useful for sharing on platforms that don’t support SVG directly.

标签页才是真正有趣的部分。PNG和JPEG标签页会在浏览器中把SVG渲染为这些图像格式,并允许你复制或下载它们——这对于在不直接支持SVG的平台上分享非常有用。

The MP4 tab is

MP4标签页是

new today

今天新增的

  • it examines the SVG to see if it contains any animations, attempts to guess how long the looped video should be, then renders a whole bunch of frames of the animation and loads 30+MB of

  • 它会检查SVG是否包含任何动画,尝试猜测循环视频应该有多长,然后渲染动画的整个帧序列,并加载30+MB的

ffmpeg.wasm

ffmpeg.wasm

so it can compile those frames into an MP4 video using the full power of FFMPEG compiled to WebAssembly and running in the browser.

以便利用编译为WebAssembly并在浏览器中运行的FFMPEG的全部功能,将这些帧编译成MP4视频。

Being able to turn an animated SVG into a MP4 again makes it easy to share on platforms that can’t support SVG animation natively. It’s a neat trick!

能够将动画SVG再转成MP4,使得在不原生支持SVG动画的平台上分享变得容易。这是个巧妙的技巧!

Tags:

标签:

svg

svg

,

markdown

markdown

,

tools

tools