SVG 优化器、转换器和生成器

二十三个，分为四个区域。优化：优化器、缩小器、清理器、格式化器和路径简化器。转换：SVG 到 PNG/JPG/WebP、SVG 到 React、数据 URI 以及查看器和验证器。编辑：路径编辑器、ViewBox 和裁剪、颜色替换器和 Sprite 生成器。生成：波浪、斑点、图案、网格渐变、噪声、形状分隔线、多边形、星形、螺旋形和波形图。

打开优化器，粘贴 SVG 或放入一个或多个 .svg 文件，然后选择一种预设（仅限平衡、最大或干净）或切换 21 种优化中的任意一种。该工具显示原始尺寸、优化尺寸和压缩尺寸以及并排目视检查。然后复制结果、下载它或将每个文件下载为 ZIP。

使用“波浪”或“斑点”生成器，调整滑块（图层、幅度、复杂性、随机性）和颜色，矢量就会实时更新。点击“随机”探索变化，打开动画以获得变形效果，然后复制 SVG 或将其导出。

是的。每个结果都有原始 SVG、React、紧凑 URL 编码数据 URI、Base64 和可粘贴 CSS 规则的导出选项卡，以及 .svg 和 PNG/JPG/WebP 下载。数据 URI 工具还生成 CSS 掩码片段，并可以将数据 URI 解码回 SVG。

来自 Inkscape、Sodipodi、Illustrator、Sketch、Serif 和 Figma 的 XML 声明、DOCTYPE、注释、<metadata> 和编辑器命名空间和属性。它使标记保持缩进和可读，因此当您仍想手动编辑文件时，这是正确的选择。

不会。一切，包括优化、PNG 渲染和 ZIP 创建，都在您的浏览器中本地运行。您的文件永远不会离开您的设备，因此它是私密且即时的。

粘贴或上传您的 SVG，优化器会删除编辑器元数据、注释、未使用的定义和冗余代码、舍入数字并压缩路径数据（如 SVGO）。这通常会将文件缩小 30-70%，而不会改变其外观，并且一切都在您的浏览器中运行。

设计工具增加了诸如生成器注释、层 ID、空组和六位十进制数字等膨胀。将导出粘贴到 Cleaner（保持可读）或 Optimizer（最小输出）中以获得轻量级、Web 就绪标记。

是的。在任何结果上使用“数据 URI”工具或“数据 URI”选项卡。它使用 URL 编码，通常比 Base64 小 30% 左右，并且还为您提供 Base64、CSS 背景规则和 <img> 标记。

打开 SVG 到 PNG / JPG，添加文件，选择 PNG 和比例（例如 4×）或精确的宽度或高度，并保持透明背景打开。您可以将许多 SVG 批量转换为 ZIP，选择 JPG 或 WebP，或者选择图标集以导出 16–512 px PNG 作为网站图标和应用程序图标。

将 SVG 粘贴到 SVG to React (JSX) 中，命名组件并选择 TypeScript 或 JavaScript、React 或 React Native。属性被转换为驼峰命名法，内联样式成为对象，{...props} 被传播到根上。您还可以将颜色切换为 currentColor 并添加可访问的标题属性。

不适用于默认的平衡预设。其中的每个优化仅删除不可见的数据或等效地重写值。非常低的精度（0-1 位小数）可能会稍微移动小图标上的点，这就是优化器在下载之前并排显示原始结果和结果的原因。

打开 ViewBox & Crop，粘贴 SVG，然后单击“裁剪到内容”。该工具测量绘图的实际边界，使用您选择的填充设置紧密的视图框，并且可以更新或删除宽度和高度属性。

颜色替换器检测每种填充、描边和渐变颜色（十六进制、rgb()、hsl() 和命名颜色）并列出每种颜色出现的频率。您可以一一重新映射它们，改变整个文件的色调、饱和度和亮度，转换为灰度或反转，或者用 currentColor 替换所有内容，以便图标遵循您的 CSS 文本颜色。

精灵是一个包含许多图标作为 <symbol> 元素的 SVG 文件。将图标添加到 Sprite Generator，然后使用 <svg><use href="#icon-id"/></svg> 引用每个图标。该工具可以为内部 ID 添加前缀以避免渐变冲突，并将颜色转换为 currentColor，并为您生成使用代码。

是的。预览在隔离的 <img> 内呈现，其中脚本无法运行。验证器会标记 <script> 标记、事件处理程序和外部链接，优化器会在您将文件嵌入到站点之前默认删除脚本和处理程序。

是的。 Wave 和 Blob 生成器有一个 Animate 切换开关，可以添加独立的 SMIL 变形。它可以在 <img>、CSS 背景和内联 SVG 内的浏览器中播放，无需 JavaScript 或 CSS。