Web上可伸缩矢量图形的最佳文件格式？

Question

我正在建设一个新网站，我希望该网站的徽标在所有设备（从桌面电脑到iPhone和iPad上的视网膜显示器）上看起来都同样清晰。

我拥有的徽标不包含任何渐变或像素，因此我可以轻松地将其保存为矢量格式。但是，没有人能真正知道最佳格式是什么。

是SVG还是PNG？

如何创建一个SVG文件？

即使在Google上也没有太多可用的信息。

感谢您与我们分享您的体验。

Answer 1

由于SVG代表“可缩放矢量图形”，这可能是您的最佳选择;）PNG是一种像素格式，因此在放大或缩小时不会像放大或缩小那样很好地缩放。

一个用于制作SVG图像的公共库是Processing.js，看看它是否做到了你想做的事！

Answer 2

好吧，正确的答案是：“取决于”，SVG更难以通过浏览器绘制，并且正确显示有一些因素涉及，另一方面PNG更容易显示，特别是在移动设备平台，例如iOS设备进行了优化，以绘制PNG图像。

另一方面，svgs的优点是可以随心所欲地缩放它们，并且它们很轻便，可以通过网络传输。

您可以使用Inkscape或Adobe Illustrator创建SVG图像。

干杯

Answer 3

哦，孩子 - 有many of them。还有复合格式可保存光栅+矢量数据（如流行的PDF格式）。 我怀疑pdf解决方案将是最便携的，因为您以某种方式将您的徽标导出为PDF作为矢量数据。地狱，你甚至可以用只有JavaScript的display PDF。或者你可以采取Adobe Flash路径...

Answer 4

标志设计最好只保留几种格式： PDF，SVG，AI，EPS，& DXF。 （真实矢量格式 - 可扩展/无损） 真正的矢量图像可以缩放到无尽，无像素或失真。

而且，如果你使用位图格式，一定要坚持PNG文件。 PNG支持透明度并且是无损位图，但仍然是光栅图像，因此它们在缩放时会显示某种程度的质量损失。因此，PNG对于某些网页使用非常适用，但不是我推荐用于打印的内容。

我推荐用于网页显示的.png格式，但打印设计/版本应该是真正的矢量格式。