SVG is too complex/heavy for simple tasks and actually is not that good for complex tasks - more or less complex image requires special editing WYSIWYG application to create it.<p>Let's imagine that you need to render simple icon using CSS that should change color on :hover:<p><pre><code> div.icon {
background: url(simple.svg) no-repeat;
background-size: 1em 1em;
}
div.icon:hover { ??? what to do here to change the color ??? }
</code></pre>
Just to render this thing you will need: to download the file, parse SVG, build DOM tree and "play" that DOM tree on canvas. Each task is not trivial.<p>While ago I've proposed at w3c-styles simple and lightweight solution for vector images and shapes in CSS - so called path URLs:<p><pre><code> div.icon {
background: url(path:c 50,0 50,100 100,100 c 50,0 50,-100 100,-100) no-repeat;
background-size: 1em 1em;
stroke: #000; /* vector stroke color */
}
div.icon:hover {
stroke: #F00;
}
</code></pre>
The path uses the same format as "d" attribute in SVG's <path> element:<p><pre><code> <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" fill="#000" />
</code></pre>
Parsing is trivial and rendering of such "images" is just a set of primitive drawing operations. No DOM or anything like that.<p>More on the subject (with illustrations in Sciter) : <a href="http://sciter.com/lightweight-inline-vector-images-in-sciter/" rel="nofollow">http://sciter.com/lightweight-inline-vector-images-in-sciter...</a>