webkit栅格vs矢量图像

Question

我正试图解决Webkit浏览器的HTML设计时的解决方案问题。 所以基本上问题是，webkit浏览器可以从240x320到960x640任意位置的分辨率，我不能为每一个设置单独的图像/图标，但我希望页面在所有设备上看起来都一样（或者非常接近最小）。

缩放图像（百分比工作）的作品，但它是一个性能下降： http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

正在使用的是WebKit的支持，但我不知道那是要对性能的矢量图形的另一种选择有在网页/应用程序。

另一种选择是为一些标准的众所周知的解决方案设置几个图标集，当您获得这些组以外的浏览器时，您会在与用户原始分辨率最接近的集上应用一些较小的缩放比例。

所以基本上我要问的是，如何在实现这一目标的过程中实现这一目标？

感谢 -Assaf

Answer 1

Vector graphics是总是在运行时性能方面更加昂贵复杂的方程运行创建它们。话虽如此，我不知道他们是否从头开始重绘每一帧，或者结果是否缓存，除非它处于肮脏状态。

我建议为众所周知的解决方案有几个不同的图标集，如果需要应用较小的缩放比例。

Answer 2

第一个答案根本没有帮助。矢量图形可以像PNG一样小，并且正确使用可以支持透明度和各种其他优良特性。

唯一的问题是，如果您寻找具有一些图像放大的像素完美完美可能会导致问题。

您还可以使用illustrator将html5 canvas插件直接导出到html5 canvas。

对于我们在行图标上的webkit浏览器，我们设置了一个属性，该属性不允许webkit扩展桌面浏览器的图标。或者对于一些图标我们包含一个小的SVG。

他们得到很好的支持，工作很好。更好的办法是使用免费的字体创建工具，并将来自插图画家的矢量图形粘贴到字体中，这样您就可以使用网页字体来简单地调出任意大小的图标。我们使用这种技术。