On: A Single Div

[c-smile]

1. Each DOM element is about 200-400 bytes (YMMV) in memory. You will need at least two of those. So to parse that SVG and build DOM structure.

2. Yet just to get that file over HTTP you will need to execute around 40,000 machine instructions. You can use data URLs to encode your SVG but that looks even more uglier.

3. With such path images you can write:

    button { background-image: url(path: ...);
             fill: blue;  }
    button:hover { 
             fill: red;  }

With SVG you cannot do that - each SVG is a standalone document. So you will need two such images, see #1 and #2 above.

4. And one more: CSS needs the way to define arbitrary shapes : https://www.w3.org/TR/css-shapes-1/#supported-basic-shapes . Ugly and far from complete set. Why not proven construct that we already have WYSIWYG tools for editing?

That if to look on the problem as a whole ... But CSS is split on modules these days. Each module have their own authors that do whatever is more convenient for them. Christmas tree design, sigh.

[scottmmjackson → c-smile]

3 is one of my biggest pet peeves with SVG. Accessing the SVG document from its container is extremely annoying and not necessarily straightforward to debug, as I learned in one of my recent side projects: http://scottmmjackson.com/weekend-project-offline-fullscreen...

[jakobegger → c-smile]

Re 3: You can use CSS to change the color of inline SVG on hover. I used this trick for the download button on https://eggerapps.at/postico/

[c-smile → jakobegger]

Nothing happens in Chrome and FF on hover of that button.

[minitech → c-smile]

On that website, the styles are on :active (press and hold). It does need the SVGs to be inline with <svg>, though, which isn't great.