2016-11-20 284 views
0

我將圖標存儲在SVG中(因爲質量問題)。我想知道哪種方式更好:SVG圖像vs SVG嵌入

  1. 認沽SVG作爲圖像<img src="icon.svg">
  2. 就在HTML <svg>... </svg>

有時候很複雜的形狀放。例如Android圖標:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40" viewBox="0 0 32 32"> 
<path d="M5,8.978c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2s2-0.896,2-2v-8C7,9.873,6.104,8.978,5,8.978z" fill="#85C808"/> 
<path d="M27,8.978c-1.104,0-2,0.896-2,2v8c0,1.104,0.896,2,2,2s2-0.896,2-2v-8C29,9.873,28.104,8.978,27,8.978z" fill="#85C808"/> 
<path d="M8,24.978h2v5c0,1.104,0.896,2,2,2s2-0.896,2-2v-5h4v5c0,1.104,0.896,2,2,2s2-0.896,2-2v-5h2v-15H8V24.978z" fill="#85C808"/> 
<path d="M20.723,2.53l1.027-1.779c0.139-0.24,0.057-0.545-0.184-0.684c-0.238-0.139-0.545-0.057-0.683,0.184 l-1.001,1.734C18.732,1.345,17.41,0.978,16,0.978c-1.409,0-2.731,0.367-3.882,1.008L11.116,0.25 c-0.139-0.239-0.443-0.321-0.684-0.183c-0.238,0.138-0.32,0.443-0.183,0.683l1.028,1.78C9.294,3.986,8,6.328,8,8.978h16 C24,6.328,22.706,3.986,20.723,2.53z M13,5.978c-0.553,0-1-0.447-1-1s0.447-1,1-1s1,0.447,1,1S13.553,5.978,13,5.978z M19,5.978 c-0.553,0-1-0.447-1-1s0.447-1,1-1s1,0.447,1,1S19.553,5.978,19,5.978z" fill="#85C808"/> 
</svg> 

在第一種情況下,我們減少了http請求的數量。在第二種情況下,瀏覽器呈現比較複雜的svg。或者瀏覽器在第一種情況下渲染它?或者瀏覽器可以將其緩存下次?

任何想法?

+1

瀏覽器總是呈現svg標記,其他組件應該這樣做?一個圖片標籤總是意味着一個額外的請求,儘管它實際上可以緩存。 – arkascha

回答

1

如果圖像很複雜,我的建議是不要嵌入它,就像我們通常不嵌入CSS樣式表一樣。這樣瀏覽器可以緩存圖像,以便以後使用。

如果圖像非常簡單,我的建議是嵌入它,因爲HTTP請求開銷會比下載圖像更大。

+0

但另一方面,這意味着一個額外的http請求。 – arkascha

+0

如果訪問了包含複雜SVG圖像的兩個頁面,那麼您是否會再發出一個http請求,或者您是否會再次下載該圖像? – glauxosdever

+0

事情是你的陳述中的「如果」。對於這個問題,一個明確的答案是不可能的,因爲優點和缺點完全取決於具體情況。然而,你發表了一個清楚地表明:做到這一點的聲明。 _爲什麼?_ – arkascha