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。

他們得到很好的支持，工作很好。更好的辦法是使用免費的字體創建工具，並將來自插圖畫家的矢量圖形粘貼到字體中，這樣您就可以使用網頁字體來簡單地調出任意大小的圖標。我們使用這種技術。