最近想在 markdown 里搞图文混排，遇到一个大图把版面占完了，想缩小一些，由于 .md 渲染器安全限制，没法直接指定宽高

只能从图片本身想办法，首先最直接的手段就是服务器再缩放一次，但是蛋痛的问题是缩放之后文件怎么存，怎么给静态文件路由，怎么保障图片可用性，怎么兼容各种尺寸，想想都头大。

想到一个 hack，要不直接放一个 .svg 进去，因为 svg 支持加载位图资源，所以把 svg 位图缩小一点，让浏览器渲染 svg 不就行了。

没想到就被这个 hack 坑了。原因是 svg 如果被 <img> 标签渲染，那么禁止加载任何外部资源，脚本也禁止执行。

为了证明这个限制，我写了个 demo 放在 https://lab.est.im/shit_svg/

这个问题太隐蔽了。stackoverflow 上只有 Robert Longson、ThangLeQuoc、TheHippo
的答案提到隐约线索：

后来搜了到 skychx 把这个问题研究透了。罪魁祸首 SVG Security

If an SVG file is fetched as image, then certain requirements apply to this document:

• The SVG document is not allowed to fetch any resources. This also applies to scripts, stylesheets or images.
• Fonts shouldn't be loaded as well. The situation in UAs seems to still be unclear though.
  Scripts must not be executed.
• Event listeners must be disabled at all times.

浪费我好多时间。SVG2里把这个说得很明白了 https://www.w3.org/TR/SVG2/conform.html#processing-modes

When external references are disabled in an SVG document, any attempt to fetch a document through an external reference must instead be treated as if a network error occurred and no data was received.

不过查阅资料的时候发现个好玩的，SVG 1.1 支持 URL fragments

比如：

• 原图 https://lab.est.im/shit_svg/1.svg
• 放大 https://lab.est.im/shit_svg/1.svg#svgView(viewBox(20,20,60,60))