Img 或 SVG 文件加载性能？答案

【问题标题】：Img or SVG File loading Performance?Img 或 SVG 文件加载性能？
【发布时间】：2018-08-10 20:44:22
【问题描述】：

我正在网站上进行图形设计。所以这是图形设计 SVG 文件或图像（PNG JPEG 或任何其他 img）的最佳选择我的意思是 HTML 页面中的快速加载响应。

注意：不要将 SVG 和图像文件作为结果质量进行比较

喜欢这里的月亮

图片

月亮 SVG

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"> 
<g> 
<circle stroke-width="3" stroke="#000" fill="#fff" r="16" cy="25" cx="25"/>
<path stroke-width="0" fill="#000" d="m25,9a16,16 0 0 1 0,32l0,-1.5a18,18 0 0 1 0,-29l0,-1.5z"/>
</g>
</svg>

【问题讨论】：

标签： html svg

【解决方案1】：

取决于您对“最佳”一词的定义。

如果 best 表示矢量化，那么 SVG，请参阅 the advantages and disadvantages of SVG。
如果best表示压缩图片，则创建图片。
如果 best 意味着互动性很强的东西，比如游戏，那么画布和 Javascript 可能最适合您。
如果 best 意味着某种一致的设计，那么使用 HTML 和 CSS 解决问题（当我们谈论绘制半月形时，情况并非如此）。

因此，首先，您需要考虑您的设计目的是什么，并尝试使用 HTML 和 CSS（使用媒体查询）实现所有可以实现的功能，并确保您的图片实现良好。请注意，如果您创建 svg，您可以随时export it into an image，因此这可能是您在等待工作的进一步规范时可以临时选择 svg 的线索。

【讨论】：

【解决方案2】：

我会说这取决于图像应该达到的效果。查看此链接以了解一些不同方法之间的一些比较：SVG icons vs. PNG icons in modern web sites。讨论讨论了不同方法在文件大小、兼容性等方面的优缺点。

（标题在图标上，但它应该不仅仅适用于网页上的图标。）

【讨论】：