svg本身非html5语义化标签，但可内联嵌入、等语义容器中，通过fill="currentcolor"、aria-label、精简代码等方式实现语义清晰、响应式、无障碍的矢量图标。
SVG 标签本身不是 HTML5 语义化标签，但它可以自然嵌入在语义化结构中，既保持语义清晰，又实现高保真、可交互的矢量图标。关键不在“SVG 是否语义化”，而在于如何让它配合 <button></button>、<nav></nav>、<header></header> 等语义容器，做到结构合理、样式可控、无障碍友好。
用内联 SVG 替代 img，嵌入语义化容器
别把 SVG 当图片塞进 <img>。例如，在导航菜单中放一个“首页”图标：
- ❌ 错误：（图标不可变色、无法继承文字大小、暗色模式易失效）
- ✅ 正确：
这样，<svg></svg> 成为链接的直接子元素，和文字同级，语义上属于“可点击内容的一部分”，且 fill="currentColor" 让图标自动响应父级 color 和主题切换。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
配合语义化按钮，确保可访问性与交互
带图标的按钮必须兼顾功能与无障碍：
- 给
<button></button>添加明确文本（哪怕视觉隐藏），如<span class="sr-only">搜索</span>；SVG 不替代文字说明 - SVG 内部不写
alt（<svg></svg>不支持该属性），若纯装饰，加aria-hidden="true"；若具功能（如“关闭”），用role="img" aria-label="关闭" - hover/focus 状态通过 CSS 控制：
button:hover .icon path { fill: #007bff; }，前提是路径没锁死内联 fill 值
响应式与缩放适配文字流
让 SVG 图标随文字大小自然缩放，是语义化排版的关键：
- 删掉 SVG 内所有固定
fill="#xxx"或stroke="#xxx"，统一用fill="currentColor" - CSS 中设
.icon { width: 1em; height: 1em; vertical-align: -0.125em; }—— 宽高基于当前字体大小，vertical-align微调基线对齐，避免文字上下偏移 - 避免只设
width: 24px，否则小屏字体缩小时图标不会缩小，破坏视觉节奏
清理导出代码，保障语义与性能
设计工具导出的 SVG 常含冗余内容，影响语义解析和样式控制：
- 删除顶部
<?xml ...?>、..>（HTML 中非法） - 移除无用
<defs></defs>、<style></style>及外部引用（如url(#shadow)） - 确认
<svg></svg>根节点有viewBox（如viewBox="0 0 24 24"），且未带xmlns（HTML5 中非必需，保留也不报错） - 精简后整个 SVG 块体积通常仅 200–500 字节，比 HTTP 请求一个 SVG 文件更轻量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
