在线SVG的URL编码工具
工具简介:
在线SVG的URL编码工具，支持自动生成SVG的URL编码结果、以及基于Data URI Scheme编码方式将SVG设置为背景图的CSS代码。data的MIME类型为image/svg+xml，在CSS中表示为data:image/svg+xml，支持background-image、mask-image、border-image。
引号 : /
请输入 SVG :
SVG URL编码结果 :
在 CSS 中背景图设置使用SVG :
预览 :
背景 :
关于在线SVG的URL编码工具：
在页面嵌入SVG的优化方式，可能基于以下两方面进行考虑：
- 考虑SEO我们会精简页面中的HTML代码，可以把SVG代码放到CSS中。
- 考虑减少单独引入SVG文件带来的网络请求，也会把SVG代码放到CSS中。
SVG不进行编码的话，虽然可以data URI 形式在CSS中直接使用SVG，但这仅在基于Webkit的浏览器中有效； 为了兼容其它浏览器，需要使用encodeURIComponent()对SVG 编码。本工具支持对SVG进行URL编码，并直接生成对应CSS代码。
CSS中嵌入SVG，可以使用data:image/svg+xml，data:image/svg+xml 是一种基于Data URI Scheme的编码方式，用于将图像数据（如SVG代码）直接嵌入到HTML、CSS或其他支持的上下文中，而无需通过外部文件引用。 这种方式可以减少HTTP请求，优化网页加载速度，同时保持图像的可访问性和可扩展性。
通常的，SVG必须有xmlns属性，例如：xmlns='http: //www.w3.org/2000/svg'。如果不存在则会自动添加。 编码后的SVG可在CSS的background-image、mask-image、border-image中使用。