
SVG can do that? - funspectre
http://slides.com/sdrasner/svg-can-do-that#/
======
mikekchar
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) using some XML data set.

Of course the opposite is actually a brilliant idea (at least at a time when
XML was still popular): Take an XML dataset and visualise it in SVG using XSLT
transformations (well... yeah... doing it all in XSLT is still insane, but you
get the idea).

Anyway, we built a very high performance SVG viewer (for the time, anyway)
from scratch. We built an SVG/Javascript widget library. We built an
incredibly impressive data manipulation library in XSLT (ok... yeah...
insane).

Fun times. And all nearly 20 years ago. It really was ahead of its time. Of
course the end finally had to come. The PGMs sold this thing to a certain
aviation company with the promise that it would automatically build circuit
diagrams from their XML chipset database (because.... XSLT!)

When Vector took over Corel, they very rightly dropped our division like a hot
potato (we had something like 3 PGMs per developer). It was quite unfortunate
because the developers and QA people I worked with there were some of the best
I've every had the pleasure of working with. I've always waited for something
to come of SVG and really wish we had been able to release something that
wasn't crazy so that people could see what the potential was.

Edit: In my old age I'm losing track of time. It seems that Vector acquired
Corel in 2003, so that's only 15 years ago :-)

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

~~~
tangue
SOAP, RDF and the semantic web clique, and other monstruosities of the 2000s
gave XML a bad name but XSLT is nice. Indeed it would have been a nicer
solution than responsive css to tackle the challenges of mobile devices.

~~~
gavinpc
Amen. And while we're at it, let's throw some of the credit to XPath. Wouldn't
you like concise, declarative traversal for your data structures? (Yeah, I'm
sure somebody's already built it.)

I don't think I agree about responsive css, but that's another discussion.

~~~
err4nt
I experiment with using XPath selectors to apply styling :D Can reach many
things CSS selectors arent designed to reach!

------
starmole
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" subset of SVG. Or even fallback to
fonts.

My dream vector format:

\- Pixel perfect across implementations at 50%,100%,200% renderings. At least
grid aligned lines.

\- Lossless roundtrip across apps. Start in Illustrator, edit parts in
Inkscape, other parts in Animate, untouched things stay exactly the same.

\- Standard zero dependency C reference implementation: Stream in, bitmap out.

~~~
tempodox
> It does way too much!

And even so, it still has no hairline. All line widths are finite and change
when zooming.

~~~
aidos
It does, well, if following SVG 1.2 Tiny it does, at least. As far as I know
it's implemented in Opera, FF, Chrome and Safari. Not sure about IE.

It's implemented as vector-effect: _vector-effect= "non-scaling-stroke"_

There's an example here
[https://gist.github.com/lightjs/5372867](https://gist.github.com/lightjs/5372867)

------
vturner
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/module/whatever to try to make it work?

~~~
sAbakumoff
>>offers immediate responsiveness

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

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

~~~
sAbakumoff
But GP was asking : "Why the lack of love while we pour ever increasing energy
into mangling HTML and CSS"

SVG can't be, shouldn't be and never will be the replacement for HTML/CSS/JS.

~~~
kitd
But GP's point is the opposite, that HTML/CSS/JS is being used too often for
tasks that could be much more simply solved by SVG. I can think of a couple
just in my current project.

~~~
sAbakumoff
Cool, could you please explain what are they? To me, personally, SVG is the
last resort.

~~~
kitd
In brief, our product includes a web-based process flow component, typical
nodes-and-edges kind of thing. Much better done with SVG IMHO, with first-
class support for box & line modelling and styling. But the powers-that-be
decreed we'd do it all in HTML & CSS.

~~~
sAbakumoff
nodes-and-edges thing is the classic problem that is perfectly solved by SVG.
Other than that it's quite useless though IMHO.

~~~
kitd
Well, I'll happily agree that SVG is a perfect fit for data-driven graphics,
but that represents are reasonably large set of solutions, so I'd not say
"useless" at all.

------
polymeris
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/](https://polymeris.github.io/carlos/)
Done in one day, without knowing the tech.

~~~
marcus_holmes
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](http://celtic-knotwork.online)

~~~
vog
Pardon my ignorance, but aren't these patterns just composed of certain tiles
in rows and columns? This is something you can do equally well with raster
graphics, so what's the gain of using SVG here?

~~~
marcus_holmes
I tried that on an earlier version, but there's complications ;)

The "double corded" style paints one side of a cord red and the other blue.
The problem comes when the pattern changes what side is which. You can play
around with it to see - put in some breakpoints and you'll see the "sides"
switch on some cells. This can't be done with tiles.

The tile manipulation is actually no simpler than drawing SVG, because the
hard bit is calculating the entry and exit points for each tertiary cell. And
SVG produces better results :)

I also plan on doing some more stuff with it someday - like deforming the grid
by moving the corners. This is pretty simple with SVG but would be really hard
with tiles.

------
jankovicsandras
Shameless plug:

ImageTracer is a simple raster image tracer and vectorizer that outputs SVG,
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)

~~~
anilgulecha
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/](https://vectormagic.com/)

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

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

~~~
jansho
The trick is to make sure the raster image is as clean as possible. But yeah I
agree, this is not its best feature.

------
byron_fast
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.

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

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

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

------
jordache
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.

~~~
TazeTSchnitzel
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. Enjoy your 100% CPU usage.

~~~
jordache
> has a number-of-elements performance ceiling if you're drawing things rather
> than using images, which feels like it defeats the purpose.

Well you can generate your imagery programmatically and then render it to
canvas as a raster image. Canvas is not purely for implementing a web based
drawing app.

~~~
icebraining
But you can also embed a raster image in SVG.

~~~
jordache
The context of the discussion is to leverage SVG's DOM based approach to
render on screen elements

------
Jack000
coming soon, full SVG websites featuring:

\- loading bar until website is fully loaded

\- animated buttons that bounce and flash

\- full screen 2 second transitions from page to page

\- all in one page, no urls!

feels like 2010 again : ]

------
kevinb7
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.

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

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

~~~
abritinthebay
True, though I’ve often found you have to be doing some rather obscure or
strange things to screw up basic display

Or advanced CSS.

------
noonespecial
I use svg all the time to make tiny web interfaces for embedded systems. When
the entire web app has to fit in 350k, you don't have space for gif's or
jpg's.

~~~
IshKebab
If your embedded system only has 350 kB of space for your app how on earth do
you fit a browser in there? Or do you only use the 'static' features of SVG?

~~~
jononor
Usually this is done in a 'Bring Your Own Device' scenario, where the user has
a standard mobile/tablet that the UI is shown on. Using a webapp served by the
embedded device allows a zero-install workflow, and zero-config (assuming
network connectivity is taken care of).

~~~
IshKebab
Ah I see. I was imagining something with its own display, like a meeting room
screen.

------
pier25
SVG is good as long as it's not abused.

All the kb saving are meaningless with performance issues caused by lots of
nodes, gradients, etc.

It's great for responsive icons, but for a full interactive UI with
illustrations bitmaps are the better choice IMO unless you _really_ need
dynamic scaling.

Just because you can do it doesn't mean you should.

~~~
etatoby
Beware of using it for responsive icons. Popular browsers render SVG icons
orders of magnitude slower than fonts, with the same vector content and
scalability.

I recently had to convert an entire UI from SVG icons to fonts + bitmaps
because the performance had gone down the drain, with just a few dozen
different icons.

------
khanhkid
It's awesome. last time, I using SVG to import image to pdf files (using
TCPDF). The quality is clearly & beautiful. Now, Thank you for your
introduction about another things SVG can do on the website.

------
esaym
Her talk on the topic at vueconf was pretty good too
[https://youtu.be/gJDyhmL9O_E](https://youtu.be/gJDyhmL9O_E)

------
Robotbeat
I've used SVG to design custom PCBs using traces as magnetic coils, something
that, surprisingly, doesn't have a good industrial software package for.
Everything in PCB design software is geared toward routing wires conveniently
between components, but if you try to actually use the wires as actual
components, it's almost impossible to freely design. And even regular PCB
design software feels almost unchanged since the 1980s or 1990s. Incredibly
clunky.

Here's a good Hackaday article on converting SVG to PCB file formats:
[http://hackaday.com/2016/01/28/beautiful-and-bizarre-
boards/](http://hackaday.com/2016/01/28/beautiful-and-bizarre-boards/) PCBModE
is one package I tried for a while: [http://pcbmode.com/](http://pcbmode.com/)
Boldport uses this toolchain to make beautiful PCBs relying heavily on SVG:
[https://www.boldport.com/](https://www.boldport.com/)

I had a hard time with all these packages, however, and ended up just hacking
it together by hand with python code and outputting in KiCAD format. I wasn't
even able to get KiCAD to read/render it properly (too many weird elements),
but since OSH Park (where I got my PCBs from) takes KiCAD format directly and
gives you a preview, that all worked fine, and when I ordered my PCBs, they
arrived in working condition just fine the first time.

[https://oshpark.com/](https://oshpark.com/)

So yeah, SVG can do a lot, including make funky PCBs.

~~~
stephen_g
Altium can do that sort of thing fairly easily. We use it for boards with
waveguide filters, couplers, etc. (usually the geometry is designed and
simulated in a field solver first, and then imported in, but you can do it
straight in the software if you want).

The easiest way is to design the coil as a part, but you can use traces and
arcs and stuff like normal in that.

~~~
Robotbeat
That works well if your coil component is small and is just acting as a
microwave RF component or something, but in my case I had a pretty complicated
coil design (although simple conceptually) that spanned the entire PCB and
interwove with other coils and wasn't arranged in a simple rectilinear manner.
My original plan was to design the whole thing in Solidworks, which I did (and
it was pretty easy to do), but there was simply no easy way to convert that
into an actual PCB for manufacture (there is a Circuitworks module, but it's
designed only for importing circuits to design around in Solidworks, not the
other direction). Sitting there and manually making arcs and such in the PCB
design software was just a non-starter. There are no parametric modeling
features to speak of, and it's actually way easier to do what I did.

I think I used OpenSCAD to export to SVG.

------
baybal2
It has been almost 12 years, and we still don't have working word wrap with
svg

~~~
tannhaeuser
You can embed HTML within SVG via SVG's foreignObject, and use HTML/CSS text
flow layout within embedded HTML. But it works only on rectangular shapes, and
not on IE.

~~~
jancsika
You can also just absolutely position an HTML element on top of the SVG.

------
oelmekki
I wonder if we should encourage print designers to switch to svg (that is, if
they don't already... it's not a world I know much).

I have in mind all those concerts or various events' png/jpeg files that are
dropped on the web here and there. If they were svg files, it would be made
easier for search engines to index their content.

Even without that, svg totally rocks. About a decade ago, I played with SVGWeb
and made a showcase carousel presenting screenshots of projets with automated
reflection on them (like it was common back then, a reverse image on bottom of
actual image with a gradient from transparency to white to make an effect like
if the ground was a mirror). I just had to upload a plain screenshot and
everything was automated, I was mind blown, and surprised we seemed to go the
canvas way instead (not so much, in retrospect).

Nowadays, I often make my icons as svg react components. It makes it so much
easier to change their color or saturation on hover, this is very cool. We
probably still have a long way to go to exploit all of svg potential.

~~~
firmgently
If they're designing in Illustrator as most are they're usually working with
vectors and have to use export to create their PNG/JPEG; SVG is right there as
an export option. In my experience there's heavy inertia in the world of print
though.

------
vladdanilov
The SVGO-GUI has not been updated since 2015. I added out-of-the-box SVG
optimization to my Optimage [1]. Fun fact: Node.js binary can be _just_ 3MB
compressed. ImageOptim [2] handles SVGs as well if Node.js is installed.

The transparent JPEG-in-SVG files can also be made with nothing but
ImageMagick and Bash [3].

[1] [http://getoptimage.com](http://getoptimage.com)

[2] [https://imageoptim.com/mac](https://imageoptim.com/mac)

[3] [https://github.com/vmdanilov/svgize](https://github.com/vmdanilov/svgize)

------
11235813213455
I'm trying to rewrite the good plugins of svgo into
[https://github.com/caub/svgz](https://github.com/caub/svgz), something more
flexible based on jsdom

------
giancarlostoro
Have not seen anyone mention it, but does it make sense to do Web Game
development using SVG's with JavaScript? Has anyone tried this? Is it as fun
as these slides make it seem or are there downsides to that approach?

~~~
firmgently
I think you'd want to combine it with canvas to replicate Flash's
cacheAsBitmap. As others have mentioned here though the decisions on where to
use it (raster vs vector) and where not to use it need to be made carefully as
your map of bits uses memory [(width x height x 3 or 4 for RGB/RGBA) bytes -
soon adds up but maybe browser renderers optimise this somehow] in exchange
for what you save on drawing calculations.

cacheAsBitmap brought a major performance boost to Flash when used wisely
though. Maybe some libraries can handle this for you nowadays?

------
kayamon
By "SVG can do that?", it appears they actually just meant "JavaScript can do
that?", as all the cool animations and stuff are all just JS-driven.

Unless I misread it?

~~~
logicuce
This. Had a lengthy discussion exactly on this point in context of this very
article couple of days back in office :)

Totally agree with you!

------
inthewoods
We attempted to do a complex animation in SVG and the primary complaint was
that it killed the browser in terms of CPU and memory usage. Are we doing
something wrong?

~~~
lioeters
I had the same experience using SVG to render music notation. We hit a
performance issue - high CPU usage, skips/stutters - with several hundred to a
thousand nodes, some animated. Switching to canvas increased that limit, in
that we were able to keep smooth rendering with larger documents.

~~~
jononor
Did you render a whole document as one SVG, or do tricks like one SVG per line
or sheet?

~~~
lioeters
The whole score was rendered as one SVG element, until we hit the performance
limit. Now we're rendering each row of measures (a stack of staves) as a
canvas element, and it performs much better for our purposes.

------
nimish
I pray for screen readers.

~~~
debaserab2
What image format do you recommend that would work better on a screen reader?

~~~
wscott
The article is proposing SVG for rendering responsive text for articles. So
the screen reader comment is valid.

~~~
prezjordan
It is not, <text> is picked up by screen-readers without any issue.

~~~
dredmorbius
In what order?

Have you ever looked at a text dump of a PDF?

Assuming it's a text-PDF in the first place, there's no guarantee that it's in
_any_ sensible order.

Of course, most Web writing is pastiche anyway.

------
DylanBohlender
This talk was one of the highlights of Develop Denver 2017 for me. Glad to see
it getting some more traction.

~~~
mkl
Thanks for the conference name. Were the talks videoed? If so, did they say
when they'll be uploaded?

------
flamedoge
Very cool. SVGs can be very sensible choice for certain applications that
canvas doesn't cover well.

------
banhfun
Ok great now that we know SVG is awesome, where do we begin learning how to
use it like a pro?

~~~
gschier
She also wrote a book:
[http://shop.oreilly.com/product/0636920045335.do](http://shop.oreilly.com/product/0636920045335.do)

------
sr3d
This is a very inspirational presentation. I'm blown away. SVG can be the
solution our next wave of interaction now that Flash has almost completely
died.

------
mamcx
So, how crazy to use SVG for a cross-platform UI?

~~~
jancsika
I did that. It works ok.

Some gotchas:

1\. SVG has all these seemingly useful features that have non-obvious gotchas.
Example: you can give rendering hints for svg or any child shape nodes, like
"crispEdges" so that straight lines are aligned to the pixel grid (plus it
might turn off anti-aliasing, but that's another matter). Great-- I've got
boxes with 1-pixel borders that should always be pixel aligned to look sharp,
so I choose that.

Then I notice that when I drag one of my "crispEdges" boxes to the right with
the mouse, I get this weird flickering due to the "crisping" algorithm
aliasing the sides of the box to the pixel grid in a way that changes the
width of the visible box. (I.e., if I move the box 1 pixel to the right, the
left side might align to the grid that is greater than xpos, while the right
side might choose the grid that is floor(xpos).) As a result it looks like the
box is "crawling" across the screen, or up the screen if you drag it
vertically.

So I went back to manually aligning those boxes to the pixel grid to guarantee
consistent box size.

2\. The "paint server" concept is an over-engineered mess. It's incompatible
with CSS gradient spec which makes it a pain to figure out how to make CSS and
future of SVG play well. Sane frameworks like Snap.svg abstract away that and
anything else you'd likely find inside <defs> tags. (Also, someone here on HN
mentioned that <defs> junk depends on the id to reference content, which
easily creates nameclashes if you use multiple inline svgs.)

3\. There's some churn in the DOM interface for SVG-related utils. For
example, at some point I wanted to get access to normalized path instructions
for a given SVG path. But Chrome recently deprecated the old way of doing that
and is in the midst of replacing it with a new geometry interface.

4\. The syntax for specifying an arc inside an SVG path is weird. Like, so
weird that code in an SVG library I read obviously just went straight through
the instructions listed in F.6.4/F.6.5 of the SVG spec (using the exact same
variable names) to simply hand off the values to Cairo, and the library
_still_ had a bug somewhere. That one isn't really a big deal-- I'm just
fascinated by how the spec writers favored endpoint parameterization
consistency over the user's ability to draw a pie chart without having to ask
questions on StackOverflow.

5\. The complexity of the spec and its interaction with the other HTML5 specs
is obviously a pain point for browser devs. Sometimes I use devTools to make a
quick-and-dirty realtime codepen inside about:blank which just parses a
contentEditable div and injects it as innerHTML of an SVG. It's nice because
you can prototype things with patterns and gradients quite easily this way.
Except you can't reference gradients/patterns/etc. in Firefox this way because
of god-knows-what-conflict between about:blank's baseURL and SVG's funcIRI.
(Although you can base64-encode the data and inject it as the src of an img
under Firefox.)

You see things like that all over. For example, the burgeoning web animations
API looks really nice and works with SVG. But it works on CSS properties and
not SVG attributes.

~~~
mamcx
Exist a SVG rendered that is not web browser? ie: truly independent? maybe
portable?

------
mtea
Welp, time to learn SVG! So much more functionality than CSS. Gorgeous
examples. I wonder if it's much slower to load though?

------
Brian_K_White
Wow, svg sits there and does mostly nothing on my phone. Just like Flash!
Can't pinch to zoom to read the text that was too small, just like Flash! Half
the supposedly neat interactive gewgaws like "turn this gear" didn't react to
any presses or gestures at all. Just like Flash!

~~~
tedunangst
Are you clicking on the animated gif of the demo or did you follow the link to
the demo?

------
intellix
Cool, but they're still not really supported by Safari

------
vbuwivbiu
Shame Flexbox can't be used with SVG

------
b0rsuk
Flash has the "advantage" that it's used almost exclusively for advertisments.
Mostly pretentious people (artists, photographers etc) have websites made of
flash. So, by turning off Flash, you block the bulk of annoying ads. And you
lose little by disabling Flash.

Would the same be true for SVG ? Would it be used mostly for ads, too ? Or
even, can you selectively block only the SVG used for advertisments ?

~~~
dredmorbius
Unfortunately, that seems to be one of the bigger hazards for SVG.

It really _is_ an amazing graphical tool. David Dailey has been posting some
amazing stuff on Ello: [https://ello.co/ddailey](https://ello.co/ddailey)

(Which also uses SVG for most of its icons and buttons.)

But ... the potential for advertising/marketing abuse (or just sheer bad
design / misuse) is so high. Unless there's a way to quash it....

Sigh. This is why we can't have nice things.

