服务端面试题手册

SVG 优化对于提升网页性能和用户体验非常重要。以下是常见的 SVG 优化技巧：1. 移除不必要的代码删除编辑器添加的元数据（如 <title>Created with...</title>）移除注释和空行删除未使用的定义和样式使用工具如 SVGO 进行自动优化2. 简化路径使用更短的路径命令（如用 h 代替 H）合并相邻的相同命令减少小数位数精度（如 50.123456 改为 50.12）使用相对坐标代替绝对坐标3. 优化属性移除默认值属性（如 fill="black" 可以省略）使用简写属性（如 stroke 代替 stroke-color）合并相同的样式到 class 或 <style> 标签4. 压缩 SVG 文件使用 gzip 压缩（服务器配置）使用 SVGO 等工具进行优化移除 DOCTYPE 声明（不影响渲染）5. 使用 SVG Sprite将多个图标合并到一个 SVG 文件中使用 <symbol> 和 <use> 元素复用图形减少 HTTP 请求示例：<svg style="display: none;"> <symbol id="icon-home" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> </symbol> <symbol id="icon-user" viewBox="0 0 24 24"> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/> </symbol></svg><!-- 使用图标 --><svg><use href="#icon-home"/></svg><svg><use href="#icon-user"/></svg>6. 内联关键 SVG首屏渲染的关键 SVG 内联到 HTML避免额外的 HTTP 请求非关键 SVG 可以延迟加载7. 使用 viewBox 代替 width/height使用 viewBox 实现响应式缩放通过 CSS 控制显示尺寸提高灵活性8. 减少元素数量合并可以合并的路径使用 <g> 分组而不是多个独立元素避免不必要的嵌套9. 优化动画性能优先使用 CSS 动画（GPU 加速）使用 transform 和 opacity 属性避免动画 width、height、left、top 等属性10. 工具推荐SVGO：强大的 SVG 优化工具SVGOMG：在线 SVG 优化工具Iconfont：图标字体和 SVG 管理Figma/Sketch：导出时优化 SVG优化示例：# 使用 SVGO 优化npx svgo input.svg -o output.svg# 批量优化npx svgo -f ./icons -o ./optimized性能测试：使用 Lighthouse 测试页面性能检查 SVG 文件大小和加载时间监控渲染性能

SVG 动画可以通过多种方式实现，每种方式都有其特点和适用场景：1. SMIL 动画（原生 SVG 动画）SMIL（Synchronized Multimedia Integration Language）是 SVG 原生支持的动画语法。常用元素：<animate>：基本属性动画<animateTransform>：变换动画（旋转、缩放、平移、倾斜）<animateMotion>：沿路径运动示例：<svg width="200" height="200"> <circle cx="50" cy="50" r="20" fill="red"> <animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" /> <animate attributeName="fill" values="red;blue;red" dur="2s" repeatCount="indefinite" /> </circle></svg>优点：原生支持，无需 JavaScript声明式语法，易于理解性能良好缺点：Chrome 已宣布弃用 SMIL灵活性有限调试困难2. CSS 动画使用 CSS 的 @keyframes 和 transition 属性。示例：<svg width="200" height="200"> <style> .circle { animation: move 2s infinite alternate; transition: fill 0.3s; } .circle:hover { fill: blue; } @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } </style> <circle class="circle" cx="50" cy="50" r="20" fill="red" /></svg>优点：广泛支持，标准技术性能优秀（GPU 加速）易于维护和调试支持 hover 等交互状态缺点：无法直接操作 SVG 内部属性复杂动画需要大量 CSS3. JavaScript 动画使用 JavaScript 操作 SVG DOM 或使用动画库。原生 JavaScript 示例：const circle = document.querySelector('circle');let position = 50;function animate() { position += 1; circle.setAttribute('cx', position); if (position < 150) { requestAnimationFrame(animate); }}animate();使用 GSAP 库示例：gsap.to('circle', { attr: { cx: 150 }, duration: 2, repeat: -1, yoyo: true});优点：最大灵活性可以实现复杂逻辑丰富的动画库支持（GSAP、Anime.js 等）可以与其他 JavaScript 交互缺点：需要编写更多代码性能需要优化依赖 JavaScript选择建议：简单动画：优先使用 CSS 动画复杂交互：使用 JavaScript + 动画库向后兼容：避免使用 SMIL性能关键：优先 CSS 和 requestAnimationFrame

SVG 和 Canvas 都是用于在网页上绘制图形的技术，但它们在工作原理、性能和适用场景上有显著差异：1. 工作原理SVG：基于 DOM 的矢量图形，每个图形元素都是独立的 DOM 节点Canvas：基于像素的位图，通过 JavaScript 在画布上绘制，最终生成位图2. 图形类型SVG：矢量图形，无限缩放不失真Canvas：位图，缩放会失真3. DOM 交互SVG：每个元素都可以绑定事件（click, hover 等）可以通过 CSS 样式化支持标准的 DOM 操作适合需要交互的场景Canvas：整个画布是一个 DOM 元素需要手动计算点击位置和碰撞检测无法直接通过 CSS 样式化内部元素适合纯展示场景4. 性能对比SVG：元素数量较少时性能良好元素数量过多（数千个）时性能下降适合图标、图表、简单动画Canvas：元素数量多时性能优秀渲染大量对象时性能稳定适合游戏、数据可视化、复杂动画5. 可访问性SVG：支持屏幕阅读器可以添加 title 和 desc 元素搜索引擎可以索引内容SEO 友好Canvas：可访问性较差需要额外实现 ARIA 支持搜索引擎难以索引内容6. 文件大小SVG：简单图形文件小复杂图形文件可能较大可以 gzip 压缩Canvas：不涉及文件大小（动态生成）导出为图片时文件大小取决于分辨率7. 适用场景SVG 适合：图标和 logo简单到中等复杂度的图表需要交互的图形需要缩放的图形打印和高质量输出SEO 重要的内容Canvas 适合：游戏开发大数据可视化复杂动画图像处理实时渲染高性能要求的场景8. 选择建议需要交互和可访问性：选择 SVG需要高性能渲染大量对象：选择 Canvas需要矢量缩放：选择 SVG需要像素级控制：选择 Canvas可以结合使用两者，发挥各自优势

SVG 图标系统是现代 Web 开发中的重要组成部分。以下是创建和管理 SVG 图标系统的最佳实践：1. SVG Sprite 技术将多个图标合并到一个 SVG 文件中，减少 HTTP 请求。<!-- icons.svg --><svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="icon-home" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/> </symbol> <symbol id="icon-user" viewBox="0 0 24 24"> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/> </symbol> <symbol id="icon-search" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="currentColor"/> </symbol></svg>2. 使用 SVG Sprite在 HTML 中引用图标。<!-- 引用图标文件 --><body> <!-- 隐藏的 SVG sprite --> <svg style="display: none;"> <use href="icons.svg#icon-home" /> <use href="icons.svg#icon-user" /> <use href="icons.svg#icon-search" /> </svg> <!-- 使用图标 --> <button> <svg width="24" height="24"> <use href="#icon-home" /> </svg> 首页 </button> <button> <svg width="24" height="24"> <use href="#icon-user" /> </svg> 用户 </button></body>3. 内联 SVG 图标直接在 HTML 中内联 SVG 代码。<button> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> </svg> 首页</button>4. CSS 图标类使用 CSS 类管理图标样式。.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; fill: currentColor;}.icon-sm { width: 16px; height: 16px;}.icon-md { width: 24px; height: 24px;}.icon-lg { width: 32px; height: 32px;}.icon-xl { width: 48px; height: 48px;}/* 图标颜色 */.icon-primary { color: #3498db;}.icon-success { color: #2ecc71;}.icon-warning { color: #f39c12;}.icon-danger { color: #e74c3c;}5. React 组件封装在 React 中封装 SVG 图标组件。// Icon.jsximport React from 'react';const Icon = ({ name, size = 24, color = 'currentColor', className = '' }) => { const icons = { home: ( <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /> ), user: ( <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /> ), search: ( <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" /> ) }; return ( <svg width={size} height={size} viewBox="0 0 24 24" fill={color} className={`icon ${className}`} aria-hidden="true" > {icons[name]} </svg> );};export default Icon;// 使用示例<Icon name="home" size={24} color="#3498db" /><Icon name="user" size={32} />6. Vue 组件封装在 Vue 中封装 SVG 图标组件。<!-- Icon.vue --><template> <svg :width="size" :height="size" viewBox="0 0 24 24" :fill="color" class="icon" aria-hidden="true" > <slot /> </svg></template><script>export default { name: 'Icon', props: { size: { type: Number, default: 24 }, color: { type: String, default: 'currentColor' } }}</script><!-- 使用示例 --><Icon :size="24" color="#3498db"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></Icon>7. 自动化工具使用工具自动生成图标系统。使用 SVGO 优化：npx svgo -f ./icons -o ./optimized使用 Iconify：<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script><span class="iconify" data-icon="mdi:home"></span>8. 最佳实践性能优化：使用 SVG Sprite 减少 HTTP 请求优化 SVG 文件大小（SVGO）首屏图标内联，其他延迟加载使用 gzip 压缩可访问性：添加 aria-hidden="true"（装饰性图标）添加 aria-label（功能性图标）使用 role="img"支持键盘导航维护性：统一命名规范使用组件封装版本控制图标库文档化图标使用响应式设计：使用 viewBox 实现响应式通过 CSS 控制尺寸支持不同屏幕密度测试各种设备

SVG 图表是数据可视化的重要工具，可以创建各种类型的图表。以下是使用 SVG 创建图表的方法：1. 柱状图使用 <rect> 元素创建柱状图。<svg width="400" height="300" viewBox="0 0 400 300"> <!-- 坐标轴 --> <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" /> <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" /> <!-- 柱子 --> <rect x="70" y="100" width="40" height="150" fill="#3498db" /> <rect x="130" y="80" width="40" height="170" fill="#e74c3c" /> <rect x="190" y="120" width="40" height="130" fill="#2ecc71" /> <rect x="250" y="60" width="40" height="190" fill="#f39c12" /> <rect x="310" y="90" width="40" height="160" fill="#9b59b6" /> <!-- 标签 --> <text x="90" y="270" text-anchor="middle" font-size="12">Q1</text> <text x="150" y="270" text-anchor="middle" font-size="12">Q2</text> <text x="210" y="270" text-anchor="middle" font-size="12">Q3</text> <text x="270" y="270" text-anchor="middle" font-size="12">Q4</text> <text x="330" y="270" text-anchor="middle" font-size="12">Q5</text></svg>2. 折线图使用 <polyline> 或 <path> 元素创建折线图。<svg width="400" height="300" viewBox="0 0 400 300"> <!-- 坐标轴 --> <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" /> <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" /> <!-- 网格线 --> <line x1="50" y1="200" x2="380" y2="200" stroke="gray" stroke-dasharray="5,5" /> <line x1="50" y1="150" x2="380" y2="150" stroke="gray" stroke-dasharray="5,5" /> <line x1="50" y1="100" x2="380" y2="100" stroke="gray" stroke-dasharray="5,5" /> <!-- 折线 --> <polyline points="70,200 130,150 190,180 250,100 310,120" fill="none" stroke="#3498db" stroke-width="3" /> <!-- 数据点 --> <circle cx="70" cy="200" r="5" fill="#3498db" /> <circle cx="130" cy="150" r="5" fill="#3498db" /> <circle cx="190" cy="180" r="5" fill="#3498db" /> <circle cx="250" cy="100" r="5" fill="#3498db" /> <circle cx="310" cy="120" r="5" fill="#3498db" /></svg>3. 饼图使用 <path> 元素创建饼图。<svg width="300" height="300" viewBox="0 0 300 300"> <g transform="translate(150, 150)"> <!-- 扇形 1: 30% --> <path d="M 0 0 L 0 -100 A 100 100 0 0 1 95.1 -30.9 Z" fill="#3498db" /> <!-- 扇形 2: 25% --> <path d="M 0 0 L 95.1 -30.9 A 100 100 0 0 1 58.8 80.9 Z" fill="#e74c3c" /> <!-- 扇形 3: 20% --> <path d="M 0 0 L 58.8 80.9 A 100 100 0 0 1 -58.8 80.9 Z" fill="#2ecc71" /> <!-- 扇形 4: 15% --> <path d="M 0 0 L -58.8 80.9 A 100 100 0 0 1 -95.1 -30.9 Z" fill="#f39c12" /> <!-- 扇形 5: 10% --> <path d="M 0 0 L -95.1 -30.9 A 100 100 0 0 1 0 -100 Z" fill="#9b59b6" /> </g></svg>4. 散点图使用 <circle> 元素创建散点图。<svg width="400" height="300" viewBox="0 0 400 300"> <!-- 坐标轴 --> <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" /> <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" /> <!-- 数据点 --> <circle cx="80" cy="200" r="5" fill="#3498db" /> <circle cx="120" cy="150" r="5" fill="#3498db" /> <circle cx="160" cy="180" r="5" fill="#3498db" /> <circle cx="200" cy="100" r="5" fill="#3498db" /> <circle cx="240" cy="120" r="5" fill="#3498db" /> <circle cx="280" cy="80" r="5" fill="#3498db" /> <circle cx="320" cy="140" r="5" fill="#3498db" /> <circle cx="360" cy="60" r="5" fill="#3498db" /></svg>5. 面积图使用 <path> 元素创建面积图。<svg width="400" height="300" viewBox="0 0 400 300"> <!-- 坐标轴 --> <line x1="50" y1="250" x2="380" y2="250" stroke="black" stroke-width="2" /> <line x1="50" y1="50" x2="50" y2="250" stroke="black" stroke-width="2" /> <!-- 面积 --> <path d="M 70 200 L 130 150 L 190 180 L 250 100 L 310 120 L 310 250 L 70 250 Z" fill="#3498db" opacity="0.5" /> <!-- 折线 --> <polyline points="70,200 130,150 190,180 250,100 310,120" fill="none" stroke="#3498db" stroke-width="3" /></svg>6. 动态图表使用 JavaScript 创建动态图表。function createBarChart(data, containerId) { const svgNS = 'http://www.w3.org/2000/svg'; const container = document.getElementById(containerId); const svg = document.createElementNS(svgNS, 'svg'); svg.setAttribute('width', '400'); svg.setAttribute('height', '300'); svg.setAttribute('viewBox', '0 0 400 300'); const maxValue = Math.max(...data); const barWidth = 40; const gap = 20; const startX = 50; const startY = 250; data.forEach((value, index) => { const height = (value / maxValue) * 200; const x = startX + index * (barWidth + gap); const y = startY - height; const rect = document.createElementNS(svgNS, 'rect'); rect.setAttribute('x', x); rect.setAttribute('y', y); rect.setAttribute('width', barWidth); rect.setAttribute('height', height); rect.setAttribute('fill', `hsl(${index * 60}, 70%, 50%)`); svg.appendChild(rect); }); container.appendChild(svg);}// 使用示例const data = [100, 150, 120, 180, 90];createBarChart(data, 'chart-container');最佳实践：使用 viewBox 实现响应式图表添加适当的标签和图例使用颜色区分不同数据系列考虑添加交互效果（hover、tooltip）优化性能，避免过多元素为图表添加可访问性支持使用 CSS 动画增强视觉效果

SVG 在响应式设计中有独特的优势和应用方式，可以创建适应各种屏幕尺寸的图形：1. 使用 viewBox 实现响应式viewBox 是 SVG 响应式设计的核心，定义了内部坐标系。<svg viewBox="0 0 100 100" width="100%" height="auto"> <circle cx="50" cy="50" r="40" fill="blue" /></svg>关键点：viewBox 定义内部坐标系width/height 使用百分比或 autoSVG 会根据容器自动缩放2. preserveAspectRatio 控制缩放行为控制 SVG 如何适应容器。<!-- 保持比例，完整显示 --><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" width="100%" height="100%"><!-- 保持比例，填充容器 --><svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" width="100%" height="100%"><!-- 拉伸填充 --><svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%">3. 响应式图标系统创建可缩放的图标系统。<!-- 图标定义 --><svg style="display: none;"> <symbol id="icon-home" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/> </symbol> <symbol id="icon-search" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </symbol></svg><!-- 使用图标，自动适应容器 --><svg class="icon" width="24" height="24"> <use href="#icon-home"/></svg><svg class="icon" width="48" height="48"> <use href="#icon-search"/></svg>CSS 样式：.icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle;}/* 不同尺寸的图标 */.icon-sm { width: 16px; height: 16px;}.icon-md { width: 24px; height: 24px;}.icon-lg { width: 48px; height: 48px;}4. 响应式图表创建适应屏幕的图表。<svg viewBox="0 0 400 200" width="100%" height="auto" preserveAspectRatio="xMidYMid meet"> <!-- 柱状图 --> <rect x="20" y="80" width="40" height="100" fill="blue" /> <rect x="80" y="50" width="40" height="130" fill="green" /> <rect x="140" y="30" width="40" height="150" fill="red" /> <rect x="200" y="60" width="40" height="120" fill="yellow" /> <!-- 坐标轴 --> <line x1="10" y1="190" x2="390" y2="190" stroke="black" stroke-width="2"/> <line x1="10" y1="10" x2="10" y2="190" stroke="black" stroke-width="2"/></svg>5. 媒体查询结合 SVG使用 CSS 媒体查询调整 SVG 显示。/* 小屏幕 */@media (max-width: 768px) { .responsive-svg { width: 100%; height: auto; }}/* 大屏幕 */@media (min-width: 769px) { .responsive-svg { width: 50%; height: auto; }}6. 响应式背景 SVG使用 SVG 作为响应式背景。.hero-section { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%233498db"/></svg>'); background-size: cover; background-position: center; background-repeat: no-repeat;}7. JavaScript 动态调整使用 JavaScript 根据容器动态调整 SVG。function resizeSVG() { const container = document.querySelector('.svg-container'); const svg = container.querySelector('svg'); const containerWidth = container.offsetWidth; const containerHeight = container.offsetHeight; svg.setAttribute('width', containerWidth); svg.setAttribute('height', containerHeight);}window.addEventListener('resize', resizeSVG);resizeSVG(); // 初始化最佳实践：始终使用 viewBox合理使用 preserveAspectRatio考虑移动端性能使用 CSS 控制尺寸测试各种屏幕尺寸优化 SVG 文件大小

SVG 在移动端的应用需要特别注意性能、兼容性和用户体验。以下是 SVG 在移动端开发的最佳实践：1. 响应式设计使用 viewBox 实现响应式：<svg viewBox="0 0 100 100" width="100%" height="auto"> <circle cx="50" cy="50" r="40" fill="blue" /></svg>使用媒体查询调整 SVG：/* 小屏幕 */@media (max-width: 768px) { .mobile-svg { width: 100%; height: auto; }}/* 大屏幕 */@media (min-width: 769px) { .mobile-svg { width: 50%; height: auto; }}2. 触摸事件支持添加触摸事件：const svg = document.querySelector('svg');// 触摸开始svg.addEventListener('touchstart', function(event) { event.preventDefault(); const touch = event.touches[0]; const point = svg.createSVGPoint(); point.x = touch.clientX; point.y = touch.clientY; const svgPoint = point.matrixTransform(svg.getScreenCTM().inverse()); console.log('Touch start:', svgPoint);});// 触摸移动svg.addEventListener('touchmove', function(event) { event.preventDefault(); const touch = event.touches[0]; // 处理触摸移动});// 触摸结束svg.addEventListener('touchend', function(event) { event.preventDefault(); // 处理触摸结束});3. 性能优化减少元素数量：<!-- 优化前：多个独立元素 --><circle cx="10" cy="10" r="5" fill="blue" /><circle cx="20" cy="10" r="5" fill="blue" /><circle cx="30" cy="10" r="5" fill="blue" /><!-- 优化后：使用 group --><g fill="blue"> <circle cx="10" cy="10" r="5" /> <circle cx="20" cy="10" r="5" /> <circle cx="30" cy="10" r="5" /></g>使用 CSS 动画代替 SMIL：/* CSS 动画（性能更好）*/.mobile-animated { animation: pulse 1s ease-in-out infinite;}@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); }}4. 移动端特定优化优化触摸目标大小：<svg width="44" height="44" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor" /></svg>使用合适的字体大小：<svg width="200" height="100" viewBox="0 0 200 100"> <text x="100" y="50" font-size="16" text-anchor="middle"> 移动端文本 </text></svg>5. 电池优化减少动画复杂度：/* 简单的动画（省电）*/.simple-anim { animation: fade 0.3s ease;}@keyframes fade { from { opacity: 0; } to { opacity: 1; }}/* 避免复杂的动画（耗电）*/.complex-anim { /* 避免在移动端使用 */}使用 prefers-reduced-motion：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}6. 网络优化延迟加载非关键 SVG：<!-- 关键 SVG 立即加载 --><svg class="critical" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></svg><!-- 非关键 SVG 延迟加载 --><img src="non-critical.svg" loading="lazy" alt="Non-critical" />使用 SVG Sprite：<!-- 合并多个图标 --><svg style="display: none;"> <symbol id="icon1" viewBox="0 0 24 24">...</symbol> <symbol id="icon2" viewBox="0 0 24 24">...</symbol></svg><!-- 使用图标 --><svg><use href="#icon1" /></svg>7. 兼容性处理检测 SVG 支持：function supportsSVG() { return !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;}if (!supportsSVG()) { // 回退到 PNG document.querySelector('.svg-icon').src = 'icon.png';}提供回退方案：<picture> <source type="image/svg+xml" srcset="icon.svg" /> <img src="icon.png" alt="Icon" /></picture>8. 可访问性添加适当的 ARIA 属性：<svg role="img" aria-labelledby="svg-title svg-desc" tabindex="0"> <title id="svg-title">图标</title> <desc id="svg-desc">点击打开菜单</desc> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" /></svg>支持屏幕阅读器：const svg = document.querySelector('svg');svg.setAttribute('role', 'img');svg.setAttribute('aria-label', '搜索图标');9. 调试和测试使用 Chrome DevTools 调试：检查渲染性能监控内存使用测试触摸事件在真实设备上测试：iOS SafariAndroid Chrome各种屏幕尺寸不同网络条件最佳实践：始终使用 viewBox 实现响应式优化触摸目标大小（至少 44x44px）减少动画复杂度以节省电池延迟加载非关键 SVG提供适当的回退方案添加可访问性支持在真实设备上测试监控性能指标

SVG 提供了 <defs> 和 <use> 元素，用于定义可重用的图形组件，这是 SVG 的一个强大特性：1. defs 元素<defs> 元素用于定义可重用的元素，这些元素不会直接渲染，只有被引用时才会显示。<svg width="200" height="200"> <defs> <!-- 定义渐变 --> <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#ff6b6b" /> <stop offset="100%" stop-color="#4ecdc4" /> </linearGradient> <!-- 定义滤镜 --> <filter id="myShadow"> <feDropShadow dx="3" dy="3" stdDeviation="2" flood-color="#000" flood-opacity="0.3" /> </filter> <!-- 定义图形 --> <circle id="myCircle" cx="0" cy="0" r="20" fill="url(#myGradient)" /> </defs> <!-- 使用定义的图形 --> <use href="#myCircle" x="50" y="50" /> <use href="#myCircle" x="150" y="50" /></svg>2. symbol 元素<symbol> 元素用于定义可重用的图形模板，类似于组件。<svg width="200" height="200"> <defs> <symbol id="icon-home" viewBox="0 0 24 24"> <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/> </symbol> <symbol id="icon-user" viewBox="0 0 24 24"> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/> </symbol> </defs> <!-- 使用定义的图标 --> <svg width="24" height="24"> <use href="#icon-home" /> </svg> <svg width="48" height="48"> <use href="#icon-user" /> </svg></svg>3. use 元素<use> 元素用于引用和重用定义的元素。基本用法：<use href="#elementId" x="50" y="50" />属性说明：href：引用元素的 ID（使用 # 前缀）x, y：引用位置width, height：引用尺寸（仅适用于 symbol）transform：变换4. 实际应用示例图标系统：<!-- 定义图标库 --><svg style="display: none;"> <defs> <symbol id="icon-search" viewBox="0 0 24 24"> <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> </symbol> <symbol id="icon-menu" viewBox="0 0 24 24"> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> </symbol> </defs></svg><!-- 使用图标 --><button> <svg width="20" height="20" aria-hidden="true"> <use href="#icon-search" /> </svg> 搜索</button><button> <svg width="20" height="20" aria-hidden="true"> <use href="#icon-menu" /> </svg> 菜单</button>图案填充：<svg width="200" height="200"> <defs> <pattern id="myPattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="5" fill="#ff6b6b" /> </pattern> </defs> <rect width="200" height="200" fill="url(#myPattern)" /></svg>5. 优势减少代码重复提高可维护性减小文件大小便于统一修改支持动态样式6. 最佳实践将常用图形定义为 symbol使用有意义的 ID 命名合理组织 defs 结构考虑使用 SVG sprite 技术为可重用元素添加适当的描述

SVG 在网页中有多种使用方式，每种方式都有其适用场景和优缺点：1. 内联 SVG（Inline SVG）<svg width="100" height="100"> <circle cx="50" cy="50" r="40" fill="red" /></svg>优点：可以通过 CSS 和 JavaScript 完全控制样式和交互；减少 HTTP 请求；支持动画和事件缺点：增加 HTML 文件大小；不适合重复使用的图形适用场景：需要交互的图标、动画、独特的图形2. 作为 img 标签引用<img src="icon.svg" alt="图标" />优点：代码简洁；可以缓存；适合重复使用的图形缺点：无法通过 CSS 控制内部样式；不支持交互和动画适用场景：静态图标、logo、不需要交互的图形3. 作为 background-image.icon { background-image: url('icon.svg'); background-size: contain;}优点：可以应用 CSS 效果（如 hover）；适合图标系统缺点：无法控制内部元素；不支持交互适用场景：图标字体替代方案、装饰性图形4. 使用 object 标签<object data="icon.svg" type="image/svg+xml"></object>优点：支持外部 CSS 文件；可以访问 SVG DOM缺点：浏览器兼容性稍差；加载方式复杂适用场景：需要外部样式控制的复杂图形5. 使用 embed 标签<embed src="icon.svg" type="image/svg+xml" />优点：支持脚本访问；兼容性较好缺点：非标准元素；不推荐使用适用场景：需要向后兼容的旧项目最佳实践建议：需要交互或动画时使用内联 SVG静态图标使用 img 或 background-image复杂图形考虑使用 object 或内联对于大量图标，考虑使用 SVG sprite 技术

SVG 提供了多种基本形状元素，每个元素都有其特定的属性和用途：1. 矩形（rect）<rect x="10" y="10" width="100" height="50" rx="5" ry="5" fill="blue" />x, y：矩形左上角坐标width, height：矩形宽度和高度rx, ry：圆角半径（水平和垂直）用途：按钮、卡片、背景等2. 圆形（circle）<circle cx="50" cy="50" r="40" fill="red" />cx, cy：圆心坐标r：半径用途：点、圆形装饰、头像等3. 椭圆（ellipse）<ellipse cx="100" cy="50" rx="50" ry="30" fill="green" />cx, cy：椭圆中心坐标rx, ry：水平和垂直半径用途：椭圆装饰、眼睛形状等4. 线条（line）<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />x1, y1：起点坐标x2, y2：终点坐标stroke：描边颜色stroke-width：描边宽度用途：分隔线、连接线等5. 折线（polyline）<polyline points="10,10 50,50 100,10 150,50" fill="none" stroke="blue" stroke-width="2" />points：点坐标列表（x1,y1 x2,y2 …）用途：图表、折线图等6. 多边形（polygon）<polygon points="50,10 90,90 10,90" fill="orange" />points：顶点坐标列表（自动闭合）用途：三角形、星形等封闭形状7. 路径（path）<path d="M 10 10 L 100 100 L 10 100 Z" fill="purple" />d：路径命令（最强大的形状元素）用途：复杂形状、自定义图形通用属性：fill：填充颜色stroke：描边颜色stroke-width：描边宽度stroke-linecap：线条端点样式（butt, round, square）stroke-linejoin：线条连接样式（miter, round, bevel）opacity：透明度（0-1）transform：变换（旋转、缩放、平移等）选择建议：简单形状优先使用基本元素（rect, circle, ellipse）复杂形状使用 path需要多个点的形状使用 polyline 或 polygon考虑代码可读性和维护性