404插图必须用内联SVG，禁用外部资源和CSS background-image；需含语义标签、正确尺寸控制、可访问动画、高对比度文字及响应式缩放。

404插图必须用内联SVG，不能用或CSS background-image

外部图片资源在404路径下极大概率加载失败：比如访问/blog/2024/post-abc触发404时，浏览器会尝试从/blog/2024/404-icon.svg加载资源——而这个路径本身也404。结果就是图标空白、布局塌陷。

内联SVG能彻底规避路径问题，且可直接加语义支持：

• <svg>标签必须包裹完整结构，不能只贴data:image/svg+xml,字符串
• 装饰性图标加aria-hidden="true"；主视觉图标（如大号“404”数字）必须带<title>和role="img"
• 尺寸控制用viewBox和CSS width/height，别用width/height属性硬设——会破坏缩放与可访问性计算
• 避免transform: scale()缩放SVG，会导致屏幕阅读器读取错乱

SVG动画要兜底，且禁用prefers-reduced-motion不兼容写法

CSS动画能缓解用户挫败感，但必须考虑晕动症用户。常见错误是直接写@keyframes spin { to { transform: rotate(360deg); } }然后应用——这在开启“减少运动”系统设置的设备上仍会执行。

正确做法是加媒体查询兜底：

立即学习“前端免费学习笔记（深入）”；

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

• 动画时长建议≥4s，太短反而显得卡顿
• 避免用animation-timing-function: cubic-bezier(0.1, 0.8, 0.2, 1)这类复杂贝塞尔曲线——部分旧Android WebView解析失败
• 不要在SVG里嵌<script>或<use href="#xxx">，它们依赖外部资源或JS执行环境

文字叠加在SVG上必须保证可读性，不能靠阴影或渐变蒙混

很多设计把“404”文字直接写进SVG里，再配个浅灰背景+模糊阴影——看似高级，实则违反WCAG 2.1 AA标准：文字与背景对比度必须≥4.5:1。

更稳妥的做法是分离渲染：

• SVG只负责图形底图（比如一个空书架、断链图标），不包含任何文字
• “404 Not Found”用独立<h1>写在SVG上方，字体栈用-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
• 如果非要SVG内嵌文字，必须用<text>元素，并显式设置fill色值（如#000）和font-family，不能依赖CSS继承
• 验证工具用webaim.org/contrastchecker测真实组合，别信设计稿里的“看起来还行”

响应式缩放不能靠vw或scale()，要用aspect-ratio + max-width

插图区域在手机上常被压扁或溢出，根本原因是用了width: 80vw或transform: scale(0.8)——前者在窄屏下过小，后者破坏可访问性尺寸计算。

现代方案更稳：

• 外层容器设aspect-ratio: 1 / 1，内部SVG设width: 100%; height: 100%
• 加max-width: 300px限制大屏宽度，小屏自动收缩
• 禁用object-fit: contain——部分iOS Safari对SVG支持不稳定
• 测试关键节点：iPhone SE（375px）、iPad（768px）、桌面（1440px），确保插图始终居中、不裁切、文字不重叠

真正难的不是画个好看图标，而是让这个图标在没网络、没CDN、没JS、甚至路径深达/a/b/c/d/e/f/g/404时，依然能稳稳显示出来——那几百字节的<svg>代码，就是最后的防线。