IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    SVG放在 img 中不能加载图片/字体

    est发表于 2023-10-17 22:13:18
    love 0

    最近想在 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))


沪ICP备19023445号-2号
友情链接