CSS 网络上可缩放矢量图形的最佳文件格式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10260523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best file format for scalable vector graphics on the web?
提问by Tintin81
I am building a new website and I would like the logo of that website to look equally sharp across all devices (ranging from desktop computers to retina displays on the iPhone and iPad).
我正在构建一个新网站，我希望该网站的徽标在所有设备（从台式计算机到 iPhone 和 iPad 上的视网膜显示器）上看起来同样清晰。
The logo I have doesn't contain any gradients or pixels, so I could easily save it in a vector format. However, nobody can really tell what the best format would be for this.
我拥有的徽标不包含任何渐变或像素，因此我可以轻松地将其保存为矢量格式。然而，没有人能真正说出最好的格式是什么。
Is it SVG or PNG e.g.?
例如，它是 SVG 还是 PNG？
And how would I create an SVG file?
我将如何创建 SVG 文件？
There is not much information available even on Google.
即使在谷歌上也没有太多可用的信息。
Thanks for sharing your experience with this.
感谢您分享您的经验。
回答by robbrit
Since SVG stands for "scalable vector graphics", that's probably your best choice ;) PNG is a pixel format, so it won't scale as nicely as you zoom in or out.
由于 SVG 代表“可缩放矢量图形”，这可能是您的最佳选择；) PNG 是一种像素格式，因此它不会像放大或缩小那样缩放。
A common library for doing SVG images is Processing.js, check it out and see if it does what you want it to do!
处理SVG 图像的常用库是Processing.js，检查一下，看看它是否能满足您的要求！
回答by Juan Alberto López Cavallotti
Well, the right answer is: "it depends", SVGs are more difficult to draw by the browsers and to be displayed correctly there are some factors involved, on the other hand PNGs are more easy to display, specially in mobile platforms, for example iOS devices are optimized to draw PNG images.
好吧，正确的答案是：“视情况而定”，SVG 更难被浏览器绘制并正确显示，这涉及到一些因素，另一方面 PNG 更容易显示，特别是在移动平台上，例如iOS 设备经过优化，可以绘制 PNG 图像。
On the other hand, svgs have the advantage that they can be scaled as much as you like, and they are lightweight to be transmitted over the network.
另一方面，svgs 的优点是它们可以随心所欲地缩放，并且它们是轻量级的，可以通过网络传输。
You may create SVG images with Inkscape or adobe illustrator.
您可以使用 Inkscape 或 adobe illustrator 创建 SVG 图像。
Cheers
干杯
回答by JuPengo
Logo Designs are better kept to just a few formats: PDF, SVG, AI, EPS, & DXF. (True Vector Formats - Scalable/lossless) A true vector image can be scaled to no end, with no pixels or distortion.
徽标设计最好只保留几种格式：PDF、SVG、AI、EPS 和 DXF。（真正的矢量格式 - 可缩放/无损）真正的矢量图像可以无限缩放，没有像素或失真。
And, if you use a bitmap format, be sure to stick to PNG files. PNG support transparency and are lossless bitmaps, but are still a raster image, so they will show some degree of quality loss when scaled, accordingly. So, PNG are great for some web uses, but not something I'd recommend for print.
而且，如果您使用位图格式，请务必坚持使用 PNG 文件。PNG 支持透明度并且是无损位图，但仍然是光栅图像，因此它们在缩放时会显示一定程度的质量损失，因此。因此，PNG 非常适合某些 Web 用途，但我不推荐用于打印。
I recommend .png format for web display, but print designs/versions should be in true vector format.
我推荐 .png 格式用于网页显示，但印刷设计/版本应该是真正的矢量格式。
回答by Agnius Vasiliauskas
Oh boy - there are many of them. Also there are compound formats which holds raster+vector data (such as popular PDF format). I suspect pdf solution would be most portable, given that you somehow will export your logo to PDF as vector data. Hell, you can even display PDFwith javascript only. Or you can take adobe flash path ...
哦，天哪 - 其中有很多。还有一些复合格式可以保存光栅+矢量数据（例如流行的 PDF 格式）。我怀疑 pdf 解决方案将是最便携的，因为您会以某种方式将徽标作为矢量数据导出为 PDF。见鬼，您甚至可以仅使用 javascript显示 PDF。或者你可以使用adobe flash path ...
