15 ms·
Building Better Interfaces with SVG (2015)
- _nato_ 10y agoFor anyone who is a web hacker rather than a designer, I highly suggest trying out SVG here and there in your web projects. SVG is a fantastic bridge for anyone who wants to put some graphics (dynamic or otherwise) in place, is used to just having copy as content, and/or is a bit afraid of opening PS/Gimp.
- kevin_thibedeau 10y agoI'll second that. I converted a script that rendered images with Tk's canvas over to Cairo. Cairo's SVG output converts text to curves which makes embedded hyperlinks impractical. I added direct conversion to SVG and got nice results in short order. The big problem when doing layouts for SVG outside of a browser is determining the bounding box for text. The best I can do is get a box from Pango and hope browsers render text close to the same way.
- aidos 10y agoAh ha haaaa...I've spent a lot of time on this this week. I currently render the text inside phantom (headless chrome) so I can correct the positions. Do you have an example of using pango? (Ps, I now know the murky details of exactly how Firefox, chrome and Inkscape calculate their bounding box and clientBoundingRect, which is sort of sad but just the life of a coder I guess)
- leeoniya 10y agothere is also https://github.com/parametric-svg https://github.com/parametric-svg that could be helpful for more delcarative layout that doesnt need a bunch of hand-coded JS
- stupidcar 10y agoHaving 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...
- politician 10y agoFrom 2015. Still awesome.
- iamben 10y agoI think my biggest issue was(/is? ..and please reply if anyone knows a decent way around this) using an SVG icon is great - scalable, small, etc., but if you want full control over it in the CSS (for fills, outlines, hovers) you have to inline the SVG. If you're using it as part of the navigation or whatever, you have to load it over and over on every page. It would be amazing to be able to load an SVG icon as an image with a class, and then be able to use CSS to manipulate the image (change the colour etc) but know the image is cached by the browser.
- viraptor 10y agoYou may be interested in this then: https://gist.github.com/Bloggerschmidt/61beeca2cce94a70c9df https://gist.github.com/Bloggerschmidt/61beeca2cce94a70c9df If you inline using JS, you can use standard styling / classes to modify the display. Since it happens via standard browser requests, you get normal caching behaviour. One bad thing though is that you have to wait for the JS to execute, so there may be some blinking.
- jjcm 10y agoOne way to do it is to have an external file with all your svg data that you append to the dom afterwards. Wherever you want to use a svg, just reference the appended svgs: <svg><use xlink:href='#svg-id'></use></svg> Here's a quick example I threw together: http://syd.jjcm.org/svgCacheTest http://syd.jjcm.org/svgCacheTest If you click on the folder icon you can see it being changed by the css.
- rrrx3 10y agoThanks for posting this - I had been running into the same issues above.
- iamben 10y agoInteresting, thanks. Alas I think this solution still has its drawbacks in that you can't target classes within the SVG. Example: https://css-tricks.com/svg-use-with-external-reference-take-2/ https://css-tricks.com/svg-use-with-external-reference-take-...
- 10y ago
- Lapland 10y agoHere is the actual talk: https://www.youtube.com/watch?v=lMFfTRiipOQ https://www.youtube.com/watch?v=lMFfTRiipOQ
- sergiotapia 10y agoDoes SVG still murder battery life on mobile phones?
- deleted 10y ago[deleted]
- tbabb 10y agoI have no horse in the SVG vs. CSS race, but: Web designers, please, do not think that all the super-annoying gimmicky animations (rippling text inputs, wiggly text, excessively stretch-and-squashing motion) are a positive for user experience. It might be fine for showing technical flexibility, but they do not add to interaction; they are distracting, slow down responsiveness, and worse, are non-standard and unexpected. I hope this kind of stuff doesn't catch on.
- kirse 10y agoall the super-annoying gimmicky animations (rippling text inputs, wiggly text, excessively stretch-and-squashing motion) I like to call this trend "Flanders Computing" -- where developers and designers increasingly create obnoxiously friendly websites and apps that treat you as if they're your diddly-doodly buddy-ol-pal. A recent Windows 10 install told me "We're happy you're here!" Who exactly is "we" and why are they trying to be all buddy-buddy so soon? I assume the market research told them that this was the best start screen, but good grief is all the wiggly-wobbly buddy-ol-pal stuff so friggin annoying. It's like forced intimacy that can't be reciprocated, which feels weird.
- hroi 10y agoAKA Genuine People Personalities as predicted in Hitchhiker's Guide.
- andai 10y agohttp://webcomicname.tumblr.com/post/154211839894 http://webcomicname.tumblr.com/post/154211839894
- cha-cho 10y agoThis needs to develop into a grading system. A "Flanders Threshold" or something.
- Silhouette 10y agoHey cha-cho, thanks for reaching out. Love your idea for the Flanders Threshold. Hit me up any time at john@cheesierthanaripecamembert.com and tell me what you need. I'll be more than happy to help. Looking forward to making magic with you on the Flanders Threshold, cha-cho! Best, John CEO/Sales/Customer Support* Cheesier Than A Ripe Camembert, Inc. (Every time I get a mail like this from some trendy tech firm, I die a little inside, but somewhere in the past year or two I think they all read the same book and now they're all doing it.)
- hardwaresofton 10y agoThis slide deck blew me away -- thanks for posting. I didn't even know these kinds of things were possible with SVG. Was particularly enamored with slide 41: http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/41 http://slides.com/sarasoueidan/building-better-interfaces-wi... I think most of the animations on that slide are not-distracting, and intuitive UI elements (except the chat box on the right).
- majewsky 10y agoThe chatbox on the right is outrageous. "The other person is typing" should never be allowed to have this huge and distracting of an animation. I picture myself typing this on my phone, letting it rest on the desk unlocked while continuing to read HN, but finding myself constantly disturbed by these bouncing waterdrops in my peripheral vision.
- hardwaresofton 10y agoYeah... that was the only interaction I thought was insane. But I'm also against read receipts and showing when the other person is typing at all, so I figured maybe this is what people are into these days
- majewsky 10y agoI won't argue against read receipts and typing notifications in general as far as UX goes (I understand the privacy problems, but that's another thing). It's a very basic equivalent of body language for text chat.
- zem 10y agoi'm writing a web-based crossword app using svg for the grid, and it's a great experience. i got the basic idea by examining the source of the guardian interactive crossword [https://www.theguardian.com/crosswords/cryptic/27089 https://www.theguardian.com/crosswords/cryptic/27089 e.g.] which is very clean and readable.
- andai 10y agoHow do people make SVGs these days? Inkscape? By hand? A combination?
- mortenjorck 10y agoAll of the major professional vector applications export SVG, including Adobe Illustrator, Affinity Designer, and Sketch. As for animation and some of the more exotic filters, though, those usually have to be added by hand.
- taivare 10y agoI use Gravit.io (Twitter templates) for fast work.
- Everlag 10y agoSo, ctrl-f for d3 yielded no results in an article about SVG... If you want to make impressive visualizations in very little code, I suggest you look at d3js. Here's the start of a series of fantastic tutorials done by Mike Bostock, founder of d3: https://bl.ocks.org/mbostock/3808218 https://bl.ocks.org/mbostock/3808218 I'd suggest you try that example out in http://blockbuilder.org/ http://blockbuilder.org/. I have no affiliation but it makes playing with d3 easy. After that, peruse the articles on the third example, find cool examples on bl.ocks.org, and replicate them. A few things to note starting out(I've been learning d3 lately): - v4 was a breaking change from v3, some v3 examples may not work out of the box but mostly will. If the >1MB bundle size of v3 scared you away, v4 is all es6 modules so you pay for what you use. - the data model is enter-update-exit, its elegant but can take some time to understand. - d3 looks procedural at first but is actually declarative if you follow the idioms. - if your code keeps adding elements when it shouldn't, you probably messed up either a select/selectAll somewhere or forgot to add a class/id to the element when creating it. - using typescript with d3 feels great but there are some gotchas; if you're interested, let me know and I'll write a blog post. I do realize the slides are about interfaces with svg, so d3 may not be exactly what you want but damn if it isn't worth mentioning here.
- nobleach 10y agoYes, there was indeed a slide on D3.
- animesh 10y ago> using typescript with d3 feels great but there are some gotchas; if you're interested, let me know and I'll write a blog post. This would be extremely interesting and useful. Please do write your thoughts about it. Thanks.
- nwlieb 10y agoInfo on typescript+d3 would be really nice. With the large scope of d3, a little auto-complete would go a long way for a beginner like me.
- Yabood 10y agoWe started replacing all of our SaaS application icons (Font-Awesome & entypo) to customized versions of the nucleoapp icon set. SVG is incredibly powerful and flexible. We're able to do a lot of cool and unique stuff without much CSS code or gifs. The ability to control multiple layers of a specific svg icon or element is really cool, and makes it quite easy to build unique interfaces. We even started using svg on our website for the features section. A tiny ~ 2KB img/icon can be scaled to work on any device or any resolution and look very crisp. It can be time consuming at the beginning, but once you get the hang of it, you won't use anything else.
- intrasight 10y agoI don't get the SVG vs. CSS slant of this. I always use CSS with SVG. So it not "SVN or CSS" it "SVG and CSS".
- Silhouette 10y agoSVG certainly has its uses, but I can't trust all the clever filtering stuff after seeing even modern, high-spec PCs literally crashed with relatively simple effects just by trying to draw the SVG in a browser. Something about certain browser rendering, or maybe the underlying Windows graphics APIs or someone's card drivers, just isn't stable or robust in this area, in my experience.
- jaimex2 10y agoAdobe could have made Flash just export to SVG and saved it. But heck, everyone knew it was dead the second Macromedia was bought.
- cooper12 10y agoJust a big caveat for slide #36: > SVG text is fully accessible, searchable, selectable and 100% semantic. Only if you don't convert the text to paths, which is really really common in the wild because someone wants a specific font or text positioning. Supposedly you can create invisible text for that purpose but I've only seen it once in a real SVG.
- stratigos 10y agojust cant wait until we can compile real programming languages down into web assembly, and the whole "front end" debacle can DIAF :)
- dmritard96 10y agoIn the slides where this talks about the SVG way and the CSS way - I don't know enough about either to verify if its true, but are these approaches inherent in these choices? That seems awfully suspicious/disingenuous to me but perhaps it really is a fair portrayal?
- timthelion 10y agoWhat is the story on accessibility for SVG? Can blind people use it? That's a pretty small market, but one that you are required by law to support. A MUCH MUCH larger market is people with parkinsons like diseases who have trouble clicking on things and need to be able to tab through the elements with a keyboard... How does that work here. What is the tab order? Even if it is supported, is the tab order sane or insane?
- antif 10y agohttps://www.w3.org/TR/SVG-access/#Links https://www.w3.org/TR/SVG-access/#Links Done properly, should work great.
- timthelion 10y agoCool!
- jordache 10y agoGawd, most of the rationale provided are superficial effects that have entirely arbitrary value for most Web projects. The claim of svg being semantic is laughable when i see one of the examples leverages the "d" attribute of an svg element. Anyone doing work with d3 is eminently appreciative of the abstraction it provides for working with svg. There isn't an analog for working with css
- blauditore 10y agoI've been trying to switch from icon fonts to SVG for icons, but I'm struggling with productivity/maintainability: - SVG icons are more complicated to drop in, or complicate the code. For icon fonts it's usually just a CSS class, which is lean and expressive. For SVG, either I drop in the explicit code, which can be huge and hard to read, or I include it as external file (like an image) and lose CSS styling abilities. - Versioning is harder. SVG icons are usually present as files, either from a thrid-party set or created and maintained using editors like inkscape. Now I either copy the code for above styling advantages, which is obviously bad for consistency, or I reference them as external images and lose stlying power again. Are there any good workaround for those issues?
- continuational 10y agoThe CSS heart on slide 9 looks perfect for me, while the SVG heart is blocky and not fully contained in the white box. Google Chrome 54.0.2840.100 (64-bit Ubuntu) http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/9 http://slides.com/sarasoueidan/building-better-interfaces-wi...
- k__ 10y agoSometimes it seems to me, that Sara and Mike (D3) are the only people who talk about SVG. And Mike seems to have a rather practical approach, while Sara is the only SVG evangelist out there. I like her stuff, it's sad that SVG doesn't get more love.
- jankovicsandras 10y agoShameless plug: ImageTracer is a simple raster image tracer and vectorizer, 100% free, Public Domain. Available in JavaScript (works both in the browser and with Node.js), "desktop" Java and "Android" Java: https://github.com/jankovicsandras/imagetracerjs https://github.com/jankovicsandras/imagetracerjs https://github.com/jankovicsandras/imagetracerjava https://github.com/jankovicsandras/imagetracerjava https://github.com/jankovicsandras/imagetracerandroid https://github.com/jankovicsandras/imagetracerandroid
- majewsky 10y agoSo "Write Once, Run Anywhere" has become "Write Once, Commit to Two Repos"?
- jimktrains2 10y agoHow does this work with respect to fallbacks and accessibility, especially for form elements?