Daryn K. Daryn K. - 9 months ago 43
HTML Question

SVG image vs. SVG embed

I store icons in SVG (because of quality). I would like to know which way is better:

  1. Put SVG as image
    <img src="icon.svg">

  2. Put right in html
    <svg>... </svg>

Sometimes it's complicated shapes. For example Android icon:

<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"/>

In the first case, we reduced number of http requests. In the second case, browser render relatively complicated svg. Or does browser render it in the first case? Or can browser cache it for next times?

Any ideas?

Answer Source

If the image is complex, my advice is not to embed it, the same way we usually don't embed a CSS stylesheet. This way the browser can cache the image so it is used later.

If the image is very simple, my advice is to embed it, since the HTTP request overhead would be bigger than just downloading the image.