Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

SVG can do that?

slides.com

Post reply on HN
Print view View original

91–100 of 202 posts

Re: SVG can do that?

#91

Post by k_sh »

sAbakumoff wrote: post #63
vturner wrote: post #36

It's always been a curiosity of mine why SVG didn't get more attention from browsers through the years to solve the performance issues. It's open source, cross platform, "dynamic" in a sense AKA no compiling needed, light weight, supports shapes and text, offers immediate responsiveness, etc. Why the lack of love while we pour ever increasing energy into mangling HTML and CSS and every six months a new JS framework/m…

>>offers immediate responsiveness does it? Any examples of responsive grid system on SVG? What would be interesting.

I think GP was referring to the fact that you don't need to generate SVG assets at multiple sizes for size/picture clarity balance, as you do with popular raster formats.

Re: SVG can do that?

#92

Post by aidos »

jordache wrote: post #11

SVG has the opposite performance profile of Canvas. SVG hits a performance ceiling as number of elements increases. Canvas, since it's rasterized image can handle a rasterized representation of millions of SVG elements. However as Canvas dimension increase, it will hit a performance ceiling.

(Edit moved to here from the wrong thread)

This comes up on each SVG thread and I post the same comment each time (so excuse me if you've heard this from me before).

We render SVG that contain beyond 100k nodes in the browser and find that it works fine. You need to be careful with your manipulations and we've developed a couple of tricks to keep things snappy, but the final experience is great.

Here's a demo of it in action with a smaller SVG

https://www.countfire.com/product-demo/

Re: SVG can do that?

#93

Post by anilgulecha »

Tajnymag wrote: post #90
anilgulecha wrote: post #80

Earlier quoted context omitted.

Wow, this is cool. It looks like an API capable of things that Vector Magic[1] can do, but FOSS. Vector Magic has been excellent for some occasions where you have a rasterized clipart, but need it as a vector. [1] https://vectormagic.com/

Inkscape does have such a feature too. While importing a bitmap image, you can specifically "convert" it to vector graphic. Works fairly well.

I love and use Inkscape exclusively for any SVG editing, but this particular feature in Inkscape is woefully under anything I've seen vector magic provides.

Re: SVG can do that?

#94

Post by dmytroi »

starmole wrote: post #49

This showcases what's wrong with SVG: It does way too much! To be useful as a vector image format, there should be strict rules (and less cruft). Why is there no libsvg like libjpeg or libpng? Why have interaction as part of an image format? SVG lives in an uncanny valley between jpeg and flash/js. I think there is still a big need for a real vector interchange and display format. Right now people pick a "good" subse…

This! I've started to look for usable vector image format for game development somewhere in 2004, now it's 2017 and there is still nothing available. For SVG you literally need to pull-in whole browser engine, which is most likely 2-3 times the size of your whole game.

Re: SVG can do that?

#95

Post by ygra »

jordache wrote: post #11

SVG has the opposite performance profile of Canvas. SVG hits a performance ceiling as number of elements increases. Canvas, since it's rasterized image can handle a rasterized representation of millions of SVG elements. However as Canvas dimension increase, it will hit a performance ceiling.

I wouldn't say the opposite, just ... different.

Basically, canvas performance depends a lot on how many pixels you draw and how you draw them (blitting an image vs. drawing a gradient are very different things, obviously).

SVG performance depends on how many things in the DOM are changed at the same time (and then it's mostly dependent on how well the browser can avoid redraws – that's an area where we frequently encounter bugs when either too much or too little is redrawn). A large static image¹ manipulated only via affine transforms performs quite well; an image containing lots of different things that all vary constantly is bad. But as long as the viewport isn't too large, canvas can be a viable alternative to SVG if the visualization is simple.

¹ Unless written like this one: https://upload.wikimedia.org/wikipedia/commons/4/4e/Sierpins...

Re: SVG can do that?

#96

Post by vbuwivbiu »

aidos wrote: post #92
jordache wrote: post #11

SVG has the opposite performance profile of Canvas. SVG hits a performance ceiling as number of elements increases. Canvas, since it's rasterized image can handle a rasterized representation of millions of SVG elements. However as Canvas dimension increase, it will hit a performance ceiling.

(Edit moved to here from the wrong thread) This comes up on each SVG thread and I post the same comment each time (so excuse me if you've heard this from me before). We render SVG that contain beyond 100k nodes in the browser and find that it works fine. You need to be careful with your manipulations and we've developed a couple of tricks to keep things snappy, but the final experience is great. Here's a demo of it i…

that's not 100k unique elements though, it's 100k instances of a set of isn't it ?

Re: SVG can do that?

#97

Post by ygra »

abritinthebay wrote: post #56
kevinb7 wrote: post #4

While SVG can do a lot, there are certain things that it isn't optimized for. In particular animating lots of shapes simultaneously. The animation of the globe exploding into a bunch of triangles from the slides is a good (bad?) example of this. Also, there can also be inconsistencies is in the rendering of SVGs between browsers.

That’s not really SVG that’s being bad there - it’s that browsers haven’t optimized for it. They will if more people use it. SVG in Chrome can be particularly painful due to their mediocre support of some things (sometimes outright contradicting the spec). That’s a vendor issue tho, nothing intrinsic to the format.

Ironically we found that IE had the best SVG performance for quite a while (by now the others have mostly caught up). And then they broke a lot of things behaviour-wise in Edge again for quite some time. Performance was still great, but if your image doesn't look like it should it doesn't help.

Re: SVG can do that?

#98

Post by sooper »

gugagore wrote: post #81
dnautics wrote: post #47

Earlier quoted context omitted.

My biggest gripe with inkscape is that it suffers from some sort of floating point precision error, when you do certain copy/paste/transformation operations it mercilessly outputs more digits of significance than are necessary, which bloats the text and peeves off someone who must obsessively keep their ml clean

I would guess it's just outputting the 16 or so (decimal) digits of a IEEE float using one of the round-tripable representations. Not sure what else would be reasonable. Could you round the output with some specialized tool? Also what does "ml" mean?

Markup Language, I'd guess.

Re: SVG can do that?

#99

Post by jinqueeny »

anilgulecha wrote: post #93
Tajnymag wrote: post #90

Earlier quoted context omitted.

Inkscape does have such a feature too. While importing a bitmap image, you can specifically "convert" it to vector graphic. Works fairly well.

I love and use Inkscape exclusively for any SVG editing, but this particular feature in Inkscape is woefully under anything I've seen vector magic provides.

I love using Inkscape too. Never realized it has such a feature. Couldn't help trying it out.

Re: SVG can do that?

#100

Post by eponeponepon »

mikekchar wrote: post #67

One of funnest projects I worked on at Corel was called "Smart Graphics Studio" (I'm guessing most of the people who worked on it also read HN, so "Hi!"). It was an absolutely stupid idea: Some insane PGM read that XSLT could transform any XML into any other XML. Then they read that SVG was XML. They put 2 and 2 together and got a billion: You could draw a picture in SVG and then modify it intelligently (through XSLT…

It's such a shame that XSLT has such a poor image - v1.0 was troublesome for sure, but the modern language is remarkably flexible, expressive and elegant, as long as you leave your procedural baggage at the door.

It's not without its wobbly bits, but show me a language that isn't.

Post reply on HN