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

Question

我刚开始学习svg。困惑我的一件事是我发现一些网站使用svg / path来绘制文本徽标。像这样：http://www.desiringgod.org/

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

据我所知，使用SVG我们可以扩展徽标，但如果此徽标基于.png文件，我看不出任何差异。那么真正的好处是什么？

其次，我不喜欢＆＃39;想想像

这样的东西

<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的优点：

• Resolution Independence
• 超级可访问的基于DOM节点的API
• 没有不必要的HTTP请求
• Easy Interactive Scripting

详细了解：Why Aren’t You Using SVG?

Answer 3

SVG offers a way to do full resolution graphical elements, no matter what size screen, what zoom level, or what resolution your user's device has.

So you write HTML? JavaScript? CSS? Good. Then you already know a lot of what you need to know to get writing SVG.

SVG actually uses an XML-compatible format to define its rendering shapes. Beyond this, you can actually style shapes in CSS, and make them interactive with JavaScript. Multiple JS libraries exist to assist you in this world, like D3.js and Raphael. Here's an example of an SVG element group (the Envato leaf).

The other benefit of SVG is, When you use images in an html document with the tag, you are defining a file that the user's browser will request. This request will take up bandwidth and require more precious time to download. If your image is instead a set of dom nodes, it cuts that extra HTTP request out, making your website faster and more user friendly.

An SVG XML document of any complexity looks relatively archaic and complicated, and seemingly isn't nearly as easy as just using an image.

Answer 4

在这里，我将描述从应用程序角度使用SVG和PNG之间的一些区别：

1. 部署到您的时，SVG文件比PNG文件轻 应用
2. 就文件而言，PNG在UI响应方面更有效率 已经在你的应用程序中，并且不需要缩放，但它比你的SVG文件重。
3. PNG比SVG更好地关注照片或详细图像。

我个人使用 SVG用于图标和徽标和 PNG用于照片或详细图片。