不推荐用直接引入空状态插画，因其会导致加载闪动、无法动态换色、seo与可访问性弱；应内联svg并配合viewbox、flex布局和语义化属性实现响应式、高可访问、主题自适应的空状态。
空状态插画要不要用 <img> 直接引入
绝大多数情况下，不推荐。直接用 <img src="empty.svg"> 看似简单，但会带来三个实际问题：首次加载时闪动（图片未加载完前空白）、无法动态换色（比如主题切换时图标颜色要同步变）、SEO 和可访问性支持弱（缺乏语义、无法被屏幕阅读器识别为“空”意图）。
更稳妥的做法是内联 SVG：
<svg viewbox="0 0 240 160" width="240" height="160" aria-label="暂无内容"><path d="M120 40c-22.1 0-40 17.9-40 40s17.9 40 40 40 40-17.9 40-40S142.1 40 120 40z" fill="#e0e0e0"></path><text x="50%" y="60%" text-anchor="middle" font-size="14" fill="#999">暂无数据</text></svg>
- SVG 内联后可直接用 CSS 控制
fill、stroke，适配深色模式只需加一条@media (prefers-color-scheme: dark) -
aria-label让读屏软件明确知道这是空状态，比alt=""更精准 - 避免额外 HTTP 请求，首屏渲染更快
怎么让空状态图随文字一起居中且响应式
常见错误是给 SVG 设固定 width/height，结果在小屏上溢出或比例失真。关键不是“撑满”，而是“按容器缩放”。
推荐组合使用：
- SVG 本身去掉
width和height属性，只留viewBox（保证缩放不失真） - 外层包裹一个
<div class="empty-state">，用 Flex 布局控制对齐 <li>文字用 <code>em或rem单位，和图标形成视觉比例关系
示例 CSS：
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
}
.empty-state svg {
max-width: 100%;
height: auto;
margin-bottom: 1rem;
}
.empty-state p {
font-size: 1.125rem;
color: #666;
text-align: center;
margin: 0;
}
React/Vue 里复用空状态组件要注意什么
空状态不是“画个图贴上去”就完事，它往往需要承载业务语义：是列表为空？搜索无结果？权限不足？网络失败？不同原因对应不同操作按钮和文案。
建议把空状态拆成两个层级：
- 基础组件：
EmptyIllustration—— 只负责渲染 SVG，接受color、size等展示参数 - 业务组件：
EmptyList、NoSearchResult、PermissionDenied—— 封装具体文案、按钮逻辑、事件回调（比如点击“刷新”触发onRetry）
这样既避免重复绘图，又防止“一个空状态组件到处传 type 判断分支”，后期维护成本低得多。
SVG 插画导出时容易忽略的细节
设计师给的 SVG 文件常带冗余代码，直接扔进 HTML 可能导致渲染异常或样式冲突。
- 删掉
<defs></defs>、<style></style>、<metadata></metadata>等非必要节点（可用 SVGOMG 在线压缩） - 确保所有颜色用
fill="#xxx"而非fill="currentColor"—— 后者虽灵活，但若父元素没设color，图标可能变黑或不可见 - 检查是否有
transform或clip-path，这些属性在内联后可能因坐标系变化导致错位
真正难的从来不是画一个空状态，而是让这个状态在各种尺寸、主题、交互路径下都“说得清、看得懂、点得着”。细节卡在 SVG 的 viewBox 值、CSS 的 max-width 行为、以及组件 props 的语义分层上。
