Press⌘+Kto search
IP: 获取中...
为效率而生, Just tools.goodssoft.com
SVG图标库 - 常用SVG图标在线预览工具
一款免费的在线 SVG Icon Library。提供常用SVG图标预览、搜索、复制和下载。支持导出SVG代码，帮助开发者快速获取所需图标资源。
# 什么是 SVG 图标？
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式。 与位图图像（如 JPG、PNG）不同，SVG 图标是使用数学公式描述的路径， 可以无限缩放而不会损失质量。这使得 SVG 成为现代 Web 设计中图标的首选格式。
使用 SVG 图标的优势包括： 1. 任意尺寸下都保持清晰锐利 2. 文件体积通常比 PNG 更小 3. 可以使用 CSS 控制颜色、大小、动画等 4. 支持所有现代浏览器 5. 可以内联在 HTML 中，减少 HTTP 请求
# 如何在项目中使用 SVG 图标
<!-- 方法1: 内联SVG -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
</svg>
<!-- 方法2: 作为背景图 -->
.icon {
background-image: url('icon.svg');
background-size: contain;
background-repeat: no-repeat;
}
<!-- 方法3: 使用 img 标签 -->
<img src="icon.svg" alt="图标" /># SVG 图标最佳实践
- 优化 SVG 文件：移除不必要的元数据、注释和空白，减小文件大小
- 使用语义化命名：为图标和文件使用清晰的名称
- 添加 title 和 desc：提高可访问性，帮助屏幕阅读器用户
- 使用 aria-label：为纯装饰性图标添加 aria-hidden="true"
- 考虑使用图标库：如 Lucide、Heroicons、Feather Icons 等
- 保持一致性：在项目中统一图标的线条粗细和风格
# 常用图标库推荐
Lucide Icons
轻量级、一致性的图标库，源自 Feather Icons
Heroicons
由 Tailwind CSS 团队制作的精美图标集
Feather Icons
简洁的开源图标集，易于定制
Tabler Icons
超过 4000 个免费的开源图标
# 常见问题 (FAQ)
SVG 图标适合所有场景吗？
SVG 非常适合图标、logo、插画等简单图形。 但对于复杂照片或高度细节的图像，位图格式（如 WebP、AVIF）可能更合适。 选择合适的格式取决于您的具体需求和使用场景。
如何优化 SVG 文件大小？
可以使用 SVGO 或其他 SVG 优化工具来减小文件大小。 主要方法包括：移除不必要的元数据、简化路径、合并相似的形状、 删除隐藏元素、移除注释等。许多构建工具（如 Vite、Webpack）都有 SVG 优化插件。
SVG 图标的浏览器兼容性如何？
SVG 支持所有现代浏览器，包括 Chrome、Firefox、Safari、Edge 等。 对于 IE 等旧浏览器，建议提供降级方案或使用 polyfill。 绝大多数情况下，您可以直接使用 SVG 而无需担心兼容性问题。