10 ms·
Having spent the last 3 years building complex visualisations with SVG, the biggest drawbacks I found are: - Poor optimisation. Browsers have done a lot to spe
by stupidcar 10y ago
Having spent the last 3 years building complex visualisations with SVG, the biggest drawbacks I found are:
- Poor optimisation. Browsers have done a lot to speed up HTML + CSS rendering via the GPU, and you can you use WebGL to make canvas fast. SVG seems to have been neglected in comparison.
- No layout management. HTML + CSS isn't perfect in this regard, but you still get blocks + inline text, floats, absolute positioning, tables and flexbox (and soon, grids). In SVG, you get absolute positioning, and that's it. If you want to do any kind of complex layout, you have to calculate everything yourself in script.
I'm not sure the major browser vendors really care too much about SVG. Compare the huge advances made in other areas of the web platform with the years-long, incredibly unambitious SVG 2 specification process.
It's a real shame as as this presentation shows, you can do some incredible stuff with SVG. But it could be so much more if there was just a bit more effort invested.
- Kinnard 10y agoLet's do something about it. I'm done with HTML+CSS.
- deleted 10y ago[deleted]
- sydd 10y agoAlso what about editors? In my experience writing graphics this way (via XML files) scares off 95% of the artists. Programmers can do it, but they make crap art. A designer who is good/interested enough in doing these is very rare. So unless there is excellent support (can make animations, generates nice code,..) by Adobe products it wont catch on.
- lj3 10y agoAdobe Illustrator exports to SVG. https://helpx.adobe.com/illustrator/how-to/export-svg.html https://helpx.adobe.com/illustrator/how-to/export-svg.html
- sydd 10y agoAnd how good is it? Does anyone knows examples/has done some serious work in it?
- jjcm 10y agoFor what it's worth the SVGs exported by Sketch are workable. I usually go in by hand and clean up the exports, but it's nowhere near as bad as old dreamweaver html exports.
- nobleach 10y agoI've had the opposite experience. Exports from sketch have the potential to be way off the canvas. This page has helped quite a bit: https://medium.com/sketch-app-sources/exploring-ways-to-export-clean-svg-icons-with-sketch-the-correct-way-752e73ec4694#.yt67hz8oy https://medium.com/sketch-app-sources/exploring-ways-to-expo...
- whyileft 10y agoIn my experience the exported SVGs from Illustrator can be pretty noisey.
- matthewmacleod 10y agoI routinely use Illustrator for fairly complex SVGs that are subsequently included in web pages, and the code is pretty serviceable. SVGO will clean it up a lot, but usually to the point of make it much hard to hand-tune.
- adamriggs 10y agoI do frontend web dev in a big, mixed-media advertising agency. The logo's that we design for clients are created in Illustrator so they can scale to billboards or banner ads. The psd's that I receive for websites often contain icons done in illustrator. Exporting to svg is easy to do but yields code that is messy in the way that exporting a Word document to html is. It works but I'm not going to edit the code.
- 10y ago
- Kinnard 10y agoI think artists and prgrammers ahve more in common than you think, so does pg . . . he even wrote a book about it— Hackers and Painters: http://paulgraham.com/hp.html http://paulgraham.com/hp.html
- stupidcar 10y agoIt's less of an issue for visualisations, as if a designer creates a mock-up, it's only used as a guide for implementation by a programmer, rather than an actual asset. However we have used Sketch's SVG export for things like icons, and I've found it to be pretty good. There's even an CLI export tool than you can integrate into your build process.
- netghost 10y agoMost vector tools export to SVG, and you can use SVGO[1] to clean it up and optimize it. 1: https://github.com/svg/svgo https://github.com/svg/svgo
- Steeeve 10y agoSVGO is interesting. One of my biggest complaints over the years has been that most tools that export to SVG do it in such a way that the file is so difficult to understand and edit that the results are useless.
- emmelaich 10y agoUse https://inkscape.org/ https://inkscape.org/
- kruipen 10y agohttps://github.com/artursapek/mondrian https://github.com/artursapek/mondrian
- shmerl 10y agoInkscape is a good vector editor and works with SVG.
- lj3 10y agoIs it worth investing that effort, though? WebAssembly has entered its public alpha on multiple browsers and is coming a long way. It'll make WebGL easier to use and will probably give rise to other graphical UI APIs that run directly in the browser. Does SVG still have a place in a WebAssembly world?
- sydd 10y agoI dont think that many websites will be made in webassembly. Its more made for full webapps and games. CSS/SVG is used for websites.
- Kinnard 10y agoThat's a great point. I bet WebAssembly will result in an altogether next generation of technology given what we want to achieve today, not what we wanted to achieve in the early 1990s. But I have a feeling svg will have a big roll to play, and not only as inspiration either.
- stupidcar 10y agoI don't know, but I really, really don't hope we get to the point where every web application ships a bespoke, WebAssembly rendering engine and treats the browser as WebGL dumb terminal. That sounds like a complete dystopia. Think loading times are bad on script-heavy websites now? Wait until every web app uses its own mix of graphics, font and layout libraries, all compiled from C/C++ to WebAssembly and shipped in a 100MB blob. And rendered without any integration with accessibility technologies, and with basic things like copy and paste disabled to stop you "stealing" content. No thanks.
- jstewartmobile 10y agoThat's probably going to happen anyway. Just sayin'.
- int_19h 10y agoThat'll be the first step. Then people will notice all those crazy download times, and someone will figure out that things could be better if they could write a single reusable "container" app in WebAssembly and WebGL that could host nearly arbitrary content, described in some kind of high-level markup language that's reasonably concise...
- aidos 10y agoI've also spent the last 3 years doing a lot of svg work. The experience is really enjoyable for me, as a coder it's great to know what's going on and make things work using maths. My work involves working with huge svg documents (up to 500k Dom nodes) with a relatively well defined structure so there are lots of bits of svg that I'm less familiar with. Because I'm fairly sensitive to performance issues I've seen the work that goes on there and you're right, it's second class compared to html but there's still development happening. The layout management is definitely substandard. It's a bit of a kludge but you can use foreignobject to put HTML inside svg and do the layout there. On paper it doesn't look too bad [0] but YMMV and I haven't played with it myself. All in all I'd like to see more activity in the svg space. It's a great tool and with a bit more awareness I think it could have a great future in the web development world. [0] https://jsfiddle.net/leaverou/qwg3r/ https://jsfiddle.net/leaverou/qwg3r/
- jordache 10y ago"using maths". that sounds like an entirely different solution than building interfaces, which is what this presentation was about. The example you cited with 500K DOM nodes.. Really? How as the browser performance? Why not just convert to canvas at that high level of DOM elements?
- aidos 10y agoIt is different but I guess my point was that SVG is a brilliant tool for developers. We (generally) approach problems in a programatic way, and SVG allows you to do that for graphics, which is incredibly liberating. Performance is good! I've definitely had to come up with some pretty clever hacks but it feels smooth once the SVG has loaded. In our case we need to be able to zoom in to arbitrary levels and still have crisp vectors. Here's an example of a document with about 150,000 dom nodes. You'll see that it's a little sluggish when you're zooming in and out but after it catches up it's really quick to move around. Most of our documents are much smaller than this so there's no real delay on zoom in those cases. https://dl.dropboxusercontent.com/u/233998/example_movement.mov https://dl.dropboxusercontent.com/u/233998/example_movement....
- spdustin 10y agoI often use other elements for layout and set their background image to an SVG. Benefit of both worlds there. Does that help with any use case?
- stupidcar 10y agoWe've experimented with this, and it can help, but it's not a silver bullet. For example, we had a stacked bar chart where we used a horizontal flexbox for the core of the chart. Each entry in the flexbox was a separate SVG. This let use do nice things like set a minimum size for each bar and have the chart overflow and scroll if there wasn't enough space to draw all the bars. But then we got a requirement to overlay a line chart on the bars. And that meant layering a separate SVG on top, and doing a bunch of script work to make sure everything lined up correctly. E.g. detecting when the window resized, or when the content overflowed, etc. It worked, but the resulting code is not at all fun to work with. The frustrating thing is the that the layout is trivial in pure HTML + CSS, and the graphics are trivial in pure SVG. But neither has the complete story, and so you end up having to jump through so many hoops, when it feels like it could be so much easier.
- dangoor 10y agoI wonder if you can use Facebook's JS flexbox implementation to do the layout calculations for you: https://github.com/facebook/yoga https://github.com/facebook/yoga
- untog 10y agoI think the question is whether you can do it performantly. Adding that overhead to your client JS feels like it would be a drag.
- Yabood 10y agoI found tools like http://editor.method.ac/ http://editor.method.ac/ incredibly helpful with editing and positioning SVG elements.
- NL807 10y ago> In SVG, you get absolute positioning, and that's it. If you want to do any kind of complex layout, you have to calculate everything yourself in script. Depends on what you mean by absolute. The current transformation matrix (CTM) in each group hierarchy is computed relative to the parent element.