
Building Better Interfaces with SVG (2015) - stesch
http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/
======
stupidcar
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.

~~~
sydd
Also 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
Adobe 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
And how good is it? Does anyone knows examples/has done some serious work in
it?

~~~
jjcm
For 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
I'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-
expo...](https://medium.com/sketch-app-sources/exploring-ways-to-export-clean-
svg-icons-with-sketch-the-correct-way-752e73ec4694#.yt67hz8oy)

------
tbabb
I 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
_all 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.

~~~
endless1234
Re: Windows 10, it scared me so much the first time after a bigger update with
the "Hi / We've updated your computer" type splash screen. "FUCK did it just
reformat everything??"

~~~
aninhumer
Not to mention "Don't worry, everything is where you left it" which I've had a
few times when booting up. And the slow fade in makes it even creepier.

~~~
jandrese
Yeah, that message made me nervous. "We didn't touch your stuff...this time."

------
Lapland
Here is the actual talk:
[https://www.youtube.com/watch?v=lMFfTRiipOQ](https://www.youtube.com/watch?v=lMFfTRiipOQ)

------
Yabood
We 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.

------
_nato_
For 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
I'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
Ah 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)

------
iamben
I 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.

~~~
jjcm
One 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.

~~~
iamben
Interesting, 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-...](https://css-
tricks.com/svg-use-with-external-reference-take-2/)

------
jankovicsandras
Shameless 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
So "Write Once, Run Anywhere" has become "Write Once, Commit to Two Repos"?

------
leeoniya
there 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

------
hardwaresofton
This 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-
wi...](http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/41)

I think most of the animations on that slide are not-distracting, and
intuitive UI elements (except the chat box on the right).

~~~
majewsky
The 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
Yeah... 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
I 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.

------
cooper12
Just 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.

------
blauditore
I'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?

------
zem
i'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.

------
Everlag
So, 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.

~~~
animesh
> 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.

------
sergiotapia
Does SVG still murder battery life on mobile phones?

------
intrasight
I 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".

------
dmritard96
In 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?

------
andai
How do people make SVGs these days? Inkscape? By hand? A combination?

~~~
mortenjorck
All 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.

------
jordache
Gawd, 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

------
continuational
The 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-
wi...](http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/9)

------
k__
Sometimes 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.

------
jaimex2
Adobe could have made Flash just export to SVG and saved it. But heck,
everyone knew it was dead the second Macromedia was bought.

------
Silhouette
SVG 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.

------
jimktrains2
How does this work with respect to fallbacks and accessibility, especially for
form elements?

------
timthelion
What 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
[https://www.w3.org/TR/SVG-access/#Links](https://www.w3.org/TR/SVG-
access/#Links)

Done properly, should work great.

~~~
timthelion
Cool!

------
politician
From 2015. Still awesome.

------
stratigos
just cant wait until we can compile real programming languages down into web
assembly, and the whole "front end" debacle can DIAF :)

