为什么使用svg作为文字标识？

Question

我刚开始学习svg。有一件事困扰我，我发现一些网站使用svg /路径来绘制文本标志。像这样一个：http://www.desiringgod.org/

该标志本身很简单，但是，它使用的SVG包含一个可怕的<path>标签，其中有很多数字。

我明白，使用SVG我们可以缩放徽标，但是如果此徽标基于.png文件，则看不到任何区别。那么真正的好处是什么？

其次，我不认为像

<path d="M115.326252,8.93098333 L115.326252,16.3798167 L113.923083,16.3798167 L113.923083,14.96265 L113.878305,14.96265 C113.092947,16.0569833 111.560896,16.5939833 109.858654,16.5939833 C106.367752,16.5939833 103.855367,14.0609833 103.855367,8.63131667 C103.855367,3.20098333 106.367752,0.667483333 109.858654,0.667483333 C112.454152,0.667483333 114.454146,1.91331667 115.390858,5.21765 L113.771894,5.53931667 C113.007521,3.07148333 111.7296,2.12731667 109.943088,2.1273166 ....</path> 

由人写的。这必须由某种东西产生，不是吗？

Answer 1

使用SVG徽标在PNG标识的好处有以下几点：

• 缩放到任何尺寸，非常适合网站的响应。
• 在视网膜显示器上看起来很清晰。
• 不要失去清晰度，除了非常小的尺寸（与PNG相同）。

随着PNG文件，你将最有可能需要生成相同的图像的多个分辨率的版本，并希望将原始图像足够大，以支持未来的显示分辨率（8K为例）。

是的，路径不是由人写的。 It's a standard part of an SVG file。你也可以像导出SVG文件那样做一些东西，例如Inkscape中带有ink2canvas扩展名的HTML5画布代码。

Answer 2

SVG提供了一个方法来做到全分辨率的图形元素，无论什么 尺寸的屏幕，什么缩放级别，或者你的用户的 设备具有的分辨率。

那么你写HTML？ JavaScript的？ CSS？好。那么你已经知道了很多你需要知道什么来编写SVG。

SVG实际上使用XML兼容格式来定义其渲染形状。除此之外，您可以在CSS中实际设置形状，并使其与JavaScript交互。存在多个JS库来帮助你在这个世界上，比如D3.js和Raphael。这是一个SVG元素组（Envato叶）的例子。

SVG的其他好处是， 当您在带有标记的html文档中使用图像时，您正在定义用户浏览器将请求的文件。该请求将占用带宽，并且需要更多宝贵的时间来下载。如果您的图像是一组dom节点，它会将该额外的HTTP请求剪掉，从而使您的网站更快，更方便用户使用。

任何复杂的SVG XML文档看起来都比较古老和复杂，看起来并不像使用图像那么容易。

Answer 3

在这里，我将介绍从应用的角度使用SVG和PNG之间存在一些差异：在部署到你的应用程序

1. SVG文件比PNG文件轻。
2. 由于文件为 已经在您的应用程序中，并且没有缩放需要，但是它比您的SVG文件更重，所以就UI响应性而言，PNG效率更高。
3. 与SVG相比，PNG对照片或细节图像给予更好的关注。

我个人使用SVG的图标和标识和PNG的照片或详细的图像。 SVG的

Answer 4

优点：

• 分辨率无关
• 超级访问的基于节点DOM API
• 没有不必要的HTTP请求
• 交互式脚本

阅读更多详情：Why Aren’t You Using SVG?