【文章标题】: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选项会给你一个可加书签的页面,例如
-
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