4 ms·

While ago I've proposed at W3C CSS WG so called vector images ( see: http://sciter.com/lightweight-inline-vector-images-in-sciter/ http://sciter.com/lightweight

by c-smile 10y ago

While ago I've proposed at W3C CSS WG so called vector images ( see: http://sciter.com/lightweight-inline-vector-images-in-sciter/ http://sciter.com/lightweight-inline-vector-images-in-sciter... ). With them, without any hacks like those you can define arbitrary shapes in CSS and in <img src="...">: div { background-image: url(path:c 50,0 50,100 100,100 c 50,0 50,-100 100,-100); background-repeat: no-repeat; } Symbols on the right of path: are the same that appear in SVGs path d attribute: <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" fill="#000" /> But in significantly more lightweight manner. Proposal did not go through. Nobody cares, sigh. So people keep hacking gradients with CSS.

ihuman 10y ago
At that point, why not just use an svg file?
- c-smile 10y ago
  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 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.
  - jakobegger 10y ago
    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/ https://eggerapps.at/postico/
    - c-smile 10y ago
      Nothing happens in Chrome and FF on hover of that button.
      - minitech 10y ago
        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.
  - scottmmjackson 10y ago
    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-fullscreenable-html5-compass-with-svg/ http://scottmmjackson.com/weekend-project-offline-fullscreen...

by c-smile 10y ago

ihuman 10y ago

At that point, why not just use an svg file?

c-smile 10y ago
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 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.
- jakobegger 10y ago
  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/ https://eggerapps.at/postico/
  - c-smile 10y ago
    Nothing happens in Chrome and FF on hover of that button.
    - minitech 10y ago
      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.
- scottmmjackson 10y ago
  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-fullscreenable-html5-compass-with-svg/ http://scottmmjackson.com/weekend-project-offline-fullscreen...