指南与教程

SVG 与 PNG 对比：您应该选择哪种格式？

网站图标、品牌标志和界面设计请使用 SVG 格式，因为矢量路径在任何分辨率屏幕上都清晰锐利。需要用于邮件签名或社交平台固定尺寸图片时请选择 PNG。

如何使用 CSS 为 SVG 图标添加动画

为内联 SVG 元素添加 CSS 类名并应用 transform 或 stroke-dasharray 关键帧动画。使用我们的实时编辑器无需 JavaScript 即可生成流畅的 60fps 动画。

如何在 Figma 或浏览器中编辑 SVG 图标

从 SVG Nexus 复制 SVG 代码并直接粘贴到 Figma 或 Illustrator 画布中即可编辑矢量节点；也可直接在浏览器中打开矢量工作室修改图层与颜色。

如何在 React、Next.js 和 Vue 中使用 SVG 图标

在任意图标页面切换到 React TSX 或 Vue 3 标签页即可复制组件代码，支持 currentColor 自动跟随 Tailwind CSS 文字颜色。

内联 SVG 与图片标签

需要悬停变色和 CSS 动画时用内联 SVG 或组件。希望图标被图片搜索收录时，用带宽度、高度和替代文字的图片标签。

避免渐变与裁剪 ID 冲突

多色图标集常复用 paint0_linear 之类的内部 ID。同一页面两个图标共用 ID 时，会渲染出错误的渐变。SVG Nexus 会为每个图标的内部 ID 自动划出独立范围。

无障碍图标与 RTL 镜像

装饰性图标用 aria-hidden 与 focusable false 隐藏。只有图标的按钮要给出清晰的 aria-label。面向从右到左书写的语言，把箭头水平翻转。

清理第三方 SVG 文件

SVG 是 XML 格式，不受信任的文件可能带有脚本和事件处理。请删除 script 节点，并用严格内容安全策略和 nosniff 响应头发送 SVG。