3 ms·
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 applicat
by c-smile 10y ago
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.
Let's imagine that you need to render simple icon using CSS that should change color on :hover:
div.icon {
background: url(simple.svg) no-repeat;
background-size: 1em 1em;
}
div.icon:hover { ??? what to do here to change the color ??? }
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.
While ago I've proposed at w3c-styles simple and lightweight solution for vector images and shapes in CSS - so called path URLs:
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;
}
The path uses the same format as "d" attribute in SVG's <path> element:
<path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" fill="#000" />
Parsing is trivial and rendering of such "images" is just a set of primitive drawing operations. No DOM or anything like that.
More on the subject (with illustrations in Sciter) : http://sciter.com/lightweight-inline-vector-images-in-sciter/ http://sciter.com/lightweight-inline-vector-images-in-sciter...
- yoz-y 10y agoI would argue that rendering simple paths is not really the goal of CSS (or implementing icons for that matter). We already have images, we already have fonts. If there is a third way to render simple vector paths then transitioning to something more powerful (when somebody decides that they want colour in their icons) will be just more painful.
- masklinn 10y ago> I would argue that rendering simple paths is not really the goal of CSS The goal of CSS is styling and decoration, simple vector paths seem comparable to border images (and border image slices) and a simple and great way to implement responsive decorative elements.
- z3t4 10y agoWhat about: img.some_icon element:hover {color: brown};
- ZeroGravitas 10y agoYou can do that (hover effects via CSS), as long as you include the SVG in the HTML directly, not link to it as a file. I believe this is what Github recently started doing: https://github.com/blog/2112-delivering-octicons-with-svg https://github.com/blog/2112-delivering-octicons-with-svg > You can see we’ve landed on directly injecting the SVGs directly in our page markup. This allows us the flexibility to change the color of the icons with CSS using the fill: declaration on the fly.
- talmand 10y ago>> more or less complex image requires special editing WYSIWYG application to create it I agree, it's like having to deal with images all over again; which we all know was a severe problem for the industry. >> ??? what to do here to change the color ??? You see, that's because you picked one of the ways to use SVG that doesn't work the way you say you want it to. You are ignoring the other ways to handle the situation without the problem you're claiming. I would say you are being borderline dishonest just to make your false point. As for the path idea, I don't think I would necessarily be against such a thing. But it would seem unwieldy with a complicated path.