Tools & Resources
轻量、实用、工业级
开放共进,努力构建最大化价值技术生态 ...
工具资源
工欲善其事,必先利其器
SVG Data URL

现代网络平台大量采用 SVG 制作图标、插画、背景和动画等,可以获得丰富而细腻的表现力,相比采用 PNG 或 JPG 等图像格式的文件可以节省大量的网络传输。

使用本工具可以将 SVG 转换为 utf8 编码的 Data URL,与 Base64 比起来可以节省更多数据。

选择文件并编码
简要说明

比如,DDZEB 图标的原始 SVG 代码为:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1215 1215"><path d="M607.5 0C943.013 0 1215 271.987 1215 607.5S943.013 1215 607.5 1215 0 943.013 0 607.5 271.987 0 607.5 0zM351.68 371.315s3.708-72.9 77.76-72.9h204.12s119.437-.1 204.12 75.33c0 0 111.843 93.612 116.64 235.71 0 0 1.962 119.045-72.9 211.41 0 0-77.931 121.5-262.44 121.5H441.59s-89.91 11.049-89.91-85.05v-486zM119.344 553.659s.906-17.82 19.008-17.82h49.9s29.2-.023 49.9 18.414c0 0 27.339 22.883 28.512 57.618 0 0 .48 29.1-17.82 51.678 0 0-19.05 29.7-64.152 29.7h-43.37s-21.978 2.7-21.978-20.79v-118.8z" fill="#Ff506E" fill-rule="evenodd"/></svg>

考虑将此 SVG 图形直接嵌入 CSS 中作为标准图标使用,如果采用传统的 Base64 编码来进行 Data URL 编码,结果大概是这样:

.ddzeb{background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjE1IDEyMTUiPjxwYXRoIGQ9Ik02MDcuNSAwQzk0My4wMTMgMCAxMjE1IDI3MS45ODcgMTIxNSA2MDcuNVM5NDMuMDEzIDEyMTUgNjA3LjUgMTIxNSAwIDk0My4wMTMgMCA2MDcuNSAyNzEuOTg3IDAgNjA3LjUgMHpNMzUxLjY4IDM3MS4zMTVzMy43MDgtNzIuOSA3Ny43Ni03Mi45aDIwNC4xMnMxMTkuNDM3LS4xIDIwNC4xMiA3NS4zM2MwIDAgMTExLjg0MyA5My42MTIgMTE2LjY0IDIzNS43MSAwIDAgMS45NjIgMTE5LjA0NS03Mi45IDIxMS40MSAwIDAtNzcuOTMxIDEyMS41LTI2Mi40NCAxMjEuNUg0NDEuNTlzLTg5LjkxIDExLjA0OS04OS45MS04NS4wNXYtNDg2ek0xMTkuMzQ0IDU1My42NTlzLjkwNi0xNy44MiAxOS4wMDgtMTcuODJoNDkuOXMyOS4yLS4wMjMgNDkuOSAxOC40MTRjMCAwIDI3LjMzOSAyMi44ODMgMjguNTEyIDU3LjYxOCAwIDAgLjQ4IDI5LjEtMTcuODIgNTEuNjc4IDAgMC0xOS4wNSAyOS43LTY0LjE1MiAyOS43aC00My4zN3MtMjEuOTc4IDIuNy0yMS45NzgtMjAuNzl2LTExOC44eiIgZmlsbD0iIzE1N0VGQiIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+") 50% 50% / contain no-repeat}

要更加节省代码量和传输量,就需要使用 utf8 编码,结果如下,少了 192 个字符(字节):

.ddzeb{background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1215 1215'%3E%3Cpath d='M607.5 0C943.013 0 1215 271.987 1215 607.5S943.013 1215 607.5 1215 0 943.013 0 607.5 271.987 0 607.5 0zM351.68 371.315s3.708-72.9 77.76-72.9h204.12s119.437-.1 204.12 75.33c0 0 111.843 93.612 116.64 235.71 0 0 1.962 119.045-72.9 211.41 0 0-77.931 121.5-262.44 121.5H441.59s-89.91 11.049-89.91-85.05v-486zM119.344 553.659s.906-17.82 19.008-17.82h49.9s29.2-.023 49.9 18.414c0 0 27.339 22.883 28.512 57.618 0 0 .48 29.1-17.82 51.678 0 0-19.05 29.7-64.152 29.7h-43.37s-21.978 2.7-21.978-20.79v-118.8z' fill='%23Ff506E' fill-rule='evenodd'/%3E%3C/svg%3E") 50% 50% / contain no-repeat}