使用base64、SVG、PNG的优缺点

Question

使用每个选项的优缺点是什么？

例如，是否可能说哪一个加载速度最快？

分辨率和图像质量是否有更好的选择？

data:image/svg+xml;base64

<img src='data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg==''>

VS.

SVG

 <svg viewBox="0 0 1226 1481" >
  <path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="#0059dd"/>
 </svg>

VS.

PNG

 <img src="https://i.imgur.com/Z3AgRDe.png"> 

- user8859973

Answer 1

Base64 中最大的问题之一是大小，增加了原始图像大小的近30%。

- Pierre Abreu

---

欢迎提供解决方案的链接，但请确保您的答案即使没有链接也是有用的：为链接添加上下文，以便您的同行用户了解它是什么以及为什么需要它，然后如果目标页面不可用，请引用您链接的页面中最相关的部分。 只包含链接的答案可能会被删除。 - randomuser5215

Answer 2

SVG base 64

1. 具有出色的图像分辨率
2. 100%矢量图形
3. 节省向服务器发送请求的时间
4. 比普通SVG文件更大
5. 加载后可以更改对象的颜色、边框等外观
6. Base64通常比原始文件大（30%）。
7. SVG可以包含脚本、动画、滤镜、遮罩、剪辑等内容。

SVG

1. 具有出色的图像分辨率
2. 100%矢量图形
3. 不需要向服务器发送请求
4. 加载后可以更改对象的颜色、边框等外观
5. SVG可以包含脚本、动画、滤镜、遮罩、剪辑等内容。

PNG

1. 对于给定的分辨率，具有最佳大小。
2. 调整大小时会失去质量。
3. 不需要向服务器发送请求
4. 加载后无法更改对象的颜色、边框等外观。
5. 最流行的图像格式。数百万张图片可供使用。

我是SVG的粉丝，事实上我正在开发一个Web应用程序，用于创建、编辑和修改SVG。 实际上，我展示的图像是由SVG对象制作的。还可以添加更多的对象（框、文本、圆等）。

- Muisca

---

无法通过数据URL访问嵌入的SVG中的样式属性（无论是base64还是转义/ URL编码）。相关问题：Can SVG <use xlink> be used in a CSS background-image? - herrstrietzel