SVG 工具

SVG 代码复制工具

将SVG代码即时复制到剪贴板。清理、格式化和准备SVG标记,用于直接嵌入HTML、CSS或JS。

svgcopycodeclipboardsvg code

SVG Code Copy

Raw SVG
Original SVG markup
240 B
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M16 18l6-6-6-6"/>
  <path d="M8 6l-6 6 6 6"/>
</svg>
Minified
Compressed SVG code
233 B
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></svg>
Data URL (UTF-8)
data:image/svg+xml;charset=utf-8,...
425 B
data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%232563eb%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%3Cpath%20d%3D%22M16%2018l6-6-6-6%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M8%206l-6%206%206%206%22%2F%3E%0A%3C%2Fsvg%3E
Data URL (Base64)
data:image/svg+xml;base64,...
346 B
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMyNTYzZWIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICA8cGF0aCBkPSJNMTYgMThsNi02LTYtNiIvPgogIDxwYXRoIGQ9Ik04IDZsLTYgNiA2IDYiLz4KPC9zdmc+
CSS Background
background: url(...)
445 B
background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20stroke%3D%22%232563eb%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%20%20%3Cpath%20d%3D%22M16%2018l6-6-6-6%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M8%206l-6%206%206%206%22%2F%3E%0A%3C%2Fsvg%3E");

What is SVG 代码复制工具?

SVG代码复制工具是一款便利工具,用于从SVG文件快速获取干净可直接粘贴的SVG标记,并带有针对常见Web开发使用模式定制的自动格式化选项。开发者经常需要将SVG代码直接嵌入HTML文档、CSS数据URI、JavaScript React或Vue组件或设计令牌中,但原始SVG文件通常包含不需要的额外内容(XML声明、命名空间、编辑器元数据),在直接粘贴到代码时会导致问题。本工具接受粘贴的SVG标记或上传的文件,然后提供多种优化的复制格式,包括原始SVG代码、移除XML声明的最小版本、已添加用于样式设置的id和class属性的HTML嵌入就绪版本、已准备用于CSS background-image的数据URI格式、用于内联CSS的无base64的URL编码SVG,以及base64编码的数据URL格式。其他格式化选项包括用于美化打印的缩进大小、压缩单行模式、属性引号样式以及是否包含注释或元数据。为每种格式提供一键复制按钮,并在剪贴板操作成功时提供视觉确认。实时预览渲染SVG,以便您在复制前验证其外观。工具还显示每种复制格式的字节大小、字符数和估计的gzip大小,以便您可以对嵌入方法做出明智的决策。所有处理都在浏览器本地进行。

When to Use SVG 代码复制工具

用于在没有外部文件的情况下直接将SVG嵌入HTML、为CSS background-image属性准备SVG数据URI、将SVG标记粘贴到React或Vue组件中、在设计工具和代码编辑器之间复制SVG,或快速将SVG文件转换为用于Web项目的各种嵌入格式。

How to Use SVG 代码复制工具

粘贴SVG标记或上传SVG文件。选择所需的复制格式(原始SVG、HTML就绪、数据URI、URL编码、base64等)。调整格式化选项,如缩进、压缩和元数据剥离。点击复制按钮即时传输到剪贴板。预览和大小信息帮助验证正确性。