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

51–60 of 202 posts

Re: SVG can do that?

#51

Post by mrb »

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…

There is https://www.w3.org/TR/SVGTiny12/ which is a subset of SVG without scripting, without CSS styling. Not sure why it never gained more traction.

Re: SVG can do that?

#52

Post by noonespecial »

jiggunjer wrote: post #50
noonespecial wrote: post #26

Earlier quoted context omitted.

The most impressive rabbit I've pulled out of the SVG hat in this regard is being given a 2.1MB logo and told that it had to appear full screen during the log in and be "crisp and not all jaggy". Did it in about 900 bytes .

With inkscape?

You got it. Imported the jpg and traced it with Inkscape. Hand optimized the SVG and inlined it right into the html of the login page.

Re: SVG can do that?

#53

Post by ivm »

byron_fast wrote: post #23

It's nice that we've got the most valuable part of Flash: a vector rendering engine. I do miss Flash's editor for these types of content, though.

Experienced Flash developers would rasterize complex vector shapes on the first load to consume less CPU by raw vector rendering, especially animations. So it's still not a Flash replacement.

Re: SVG can do that?

#54

Post by seanwilson »

Tagbert wrote: post #39
yosito wrote: post #25

Earlier quoted context omitted.

I just spent all day trying to manually wrangle SVG in the browser. I'd be happy with a good static SVG editor to be honest.

Inkscape is OK, but a little rough. Take a look at Affinity Designer. It is very polished and has a feature set approaching Adobe illustrator at a very reasonable price. It's also well supported by the publisher.

I've been using both recently. Affinity Designer has a much, much better interface but I keep finding features and options missing that make it frustrating for coding projects. You can't easily open an SVG file, edit it and quickly save to the same SVG file without going through several clicks and setting options to export ("save" will save in a proprietary format). There isn't a command line interface for exporting either. I can't see a way to edit the SVG XML either (you can do that in Inkscape) which is important when you're wanting to script it later.

For previous projects, I've had workflows where images were extracted from one place, added into existing SVG files and Inkscape was scripted to slice up and export sections into PNG files. I can't see a way to do anything similar with Affinity Designer.

Re: SVG can do that?

#55

Post by abritinthebay »

polymeris wrote: post #28

SVG works so fantastically well with React -- it's just part of the DOM, after all. Unless there are performance concerns, that reason alone would make me choose it over Canvas every time. Shameless plug, one of my first experiments with SVG+react (+cljs): https://polymeris.github.io/carlos/ Done in one day, without knowing the tech.

We do exactly this (SVG + React) at Bleacher Report.

It’s basically the best of every world for us (visuals, code, etc) and we’re trying to convert as much as we can to this (takes a while... we have a LOT of logos for example)

Re: SVG can do that?

#56

Post by abritinthebay »

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.

Re: SVG can do that?

#57

Post by abritinthebay »

TazeTSchnitzel wrote: post #15
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.

In my experience, canvas 2D also has a number-of-elements performance ceiling if you're drawing things rather than using images, which feels like it defeats the purpose. For example, try drawing hundreds of coloured rectangles per frame. Easy, right? If you're using WebGL, or any sensible graphics API, yes. If you're using canvas, the web-browser will parse and re-parse your colour expression CSS n times per frame. E…

That’s not exactly surprising - you’re describing a problem with basically every graphics engine.

Rasterizing expensive operations before drawing to screen is usually job one of a rendering pipeline

Re: SVG can do that?

#58

Post by abritinthebay »

ivm wrote: post #53
byron_fast wrote: post #23

It's nice that we've got the most valuable part of Flash: a vector rendering engine. I do miss Flash's editor for these types of content, though.

Experienced Flash developers would rasterize complex vector shapes on the first load to consume less CPU by raw vector rendering, especially animations. So it's still not a Flash replacement.

That’s Canvas+SVG+JS then. Basically.

Re: SVG can do that?

#59

Post by marcus_holmes »

polymeris wrote: post #28

SVG works so fantastically well with React -- it's just part of the DOM, after all. Unless there are performance concerns, that reason alone would make me choose it over Canvas every time. Shameless plug, one of my first experiments with SVG+react (+cljs): https://polymeris.github.io/carlos/ Done in one day, without knowing the tech.

When I started learning React, I realised a dream of mine could finally come true: a proper Celtic Knotwork generator. Uses SVG and React together in harmony.

http://celtic-knotwork.online

Re: SVG can do that?

#60

Post by _greim_ »

polymeris wrote: post #28

SVG works so fantastically well with React -- it's just part of the DOM, after all. Unless there are performance concerns, that reason alone would make me choose it over Canvas every time. Shameless plug, one of my first experiments with SVG+react (+cljs): https://polymeris.github.io/carlos/ Done in one day, without knowing the tech.

Agreed. Elm+SVG is also a dream.
Post reply on HN