（2146期）SVG – 生产级SVG工程化规范

生产级SVG工程化规范 专业级SVG图形创建与优化工具，支持viewBox配置、无障碍访问及CSS主题化，解决响应式缩放与代码精简难题。 使用说明 核心用法 SVG技能提供一套完整的可缩放矢量图形工作流，通过模块化参考文档覆盖从创建到部署的全生命周期。核心功能包括： ViewBox与响应式缩放：通过viewbox.md指导正确的坐标系定义，避免"Missing viewBox = no scaling"经典陷阱，确保图形在任何容器尺寸下完美适配 无障碍访问支持：accessibility.md明确区分informative与decorative场景，要求informative SVG必须设置role="img"并将<title>作为首个子元素，decorative场景则使用aria-hidden="true" 代码优化配置：optimization.md警示SVGO默认配置会误删viewBox和title等关键属性，需自定义保留规则 嵌入策略选择：embedding.md对比inline SVG与<img>标签的差异，指出后者无法应用CSS样式的限制 主题化样式：styling.md推广currentColor用法，避免硬编码fill值阻断主题切换 技能采用"最小可行SVG"模板作为起点，并提供7项常见错误检查清单。用户偏好通过~/svg/memory.md持久化存储，支持学习演进。 显著优点 问题预防导向：每个参考文件都标注"Key Trap"，直击开发者高频痛点 无障碍优先：将a11y作为一级公民而非事后补丁，符合现代Web标准 工具链整合：原生集成SVGO优化流程，兼顾性能与功能保留 渐进式学习：记忆文件机制让工具随使用频次提升个性化程度 多平台兼容：支持Linux、macOS、Windows三端运行 潜在局限 依赖外部文件结构，单文件迁移时可能丢失上下文 无实时预览或可视化编辑能力，纯代码工作流 优化配置需手动编写，对SVGO新手存在学习曲线 记忆文件格式为自定义Markdown解析，非标准化配置 适合人群 前端开发者、UI工程师、设计系统维护者，以及需要生产环境级SVG代码的Web项目团队。特别适合已将无障碍合规纳入质量门禁的组织。 常规风险 优化过度：SVGO误配置可导致viewBox丢失，引发布局灾难 ID冲突：多SVG内联时重复ID会破坏DOM引用和样式隔离 安全扫描缺失：认证报告显示未执行实际安全检测，XSS向量（如<script>内嵌SVG）需额外审查 主题断裂：硬编码颜色值会阻断dark mode等系统级主题适配 原始说明 Create and optimize SVG graphics with proper viewBox, accessibility, and CSS styling.