SVG 编辑与转换

编辑 SVG 代码，修改颜色，优化代码，并转换为 React JSX 或 PNG 格式。

SVG Preview ViewportWidth: 150px | Height: 150px
Drag SVG file inside or click Upload to select a file.

No color attributes detected in this SVG.

SVG 编辑与代码转换

SVG 是用文本写成的矢量图，可以直接编辑。你可以修改颜色、删除元数据来减小文件体积，并导出为 React 组件（JSX）、可直接用于 CSS 的 Data URI，或栅格化的 PNG 图片。

使用方法

  1. 粘贴 SVG 代码或载入文件。
  2. 调整颜色和尺寸，然后执行优化。
  3. 导出为 JSX、Data URI 或 PNG。

常见问题

把 SVG 粘贴到 React 里报错了。
JSX 需要驼峰命名的属性，例如 strokeWidth 而不是 stroke-width。导出为 JSX 时会自动帮你改好属性名。
如何把 SVG 用作 CSS 背景？
将其转换为 Data URI，把字符串直接放进 background-image: url(...) 即可，不会产生额外的网络请求。