
The Fall and Rise of SVG - maxdunn1
http://blog.siliconpublishing.com/2015/12/the-fall-and-rise-of-svg/
======
davidjgraph
"Rather than embracing SVG as an alternative, Microsoft pursued a blatant copy
of Flash in their too-late-to-the-table Silverlight effort."

The author seems to have missed, apart from an initial mention, VML out
completely. VML was Microsoft's SVG alternative in IE 5 through 8, not
Sliverlight. Sliverlight was a Flash alternative.

VML, although badly documented, can/could do much of what SVG can do, in a few
cases it does it better. It was also pretty complete with IE 6 in 2001. SVG
had the first very basic version in Firefox 1.5 at the end of 2005, and needed
Firefox 3.0 in 2008 before you could say it was reasonably complete. MS
thought they had a head-start and could win the vector battle.

The key thing, as well, with VML is that it was built into IE natively.
Getting Adobe SVG or Sliverlight added onto IE into large corporate
environments was near on impossible. We, fortunately, decided we didn't trust
Adobe prior to them killing the IE SVG plugin and were running fully on VML at
that point.

The last 10 years of my working life have been based around SVG and VML, my
co-founder and I would tell you a similar story. Especially, regarding word-
wrap in SVG, it's our top pain point as well. It forced us to use HTML as
foreign objects in SVG to get word wrap. Of course, IE never supported FOs,
Edge has only just added it.

~~~
pjc50
Interestingly, "VML is Microsoft's contribution to the creation of the SVG
standard." I'd never heard of it either.

[https://msdn.microsoft.com/en-
us/library/bb250524%28v=vs.85%...](https://msdn.microsoft.com/en-
us/library/bb250524%28v=vs.85%29.aspx)

Silverlight was probably the last major Microsoft attempt at platform lock-in,
but it was too late; arguably it was killed by Apple's platform lock-in
barrier on iOS just as much as Flash was.

~~~
endergen
He mentions VML almost right out of the gate, here didn't he? "I have followed
the standards for XML-based vector graphics closely. PGML (mainly from Adobe)
and VML (mainly from Microsoft),"

~~~
maxdunn1
Thanks. Yeah I didn't really see VML as relevant after its very inception.
True it was sitting there in IE for an extra decade or two but it never had
some sort of resurgence or potential that I saw. Silverlight on the other hand
had serious people saying "this is the future!" When VML first came out, it
had to be taken seriously. Next to PGML, not so much.

------
leeoniya
An article about rise of SVG with numerous images of SVG drawings, and not a
single one of them is an actual SVG :)

~~~
coldtea
Maybe because the publishing platform he uses doesn't support
uploading/pasting it (e.g escapes xml).

~~~
AgentME
I have a few projects where allowing users to upload SVG files like other
image types would be useful, but SVGs can contain javascript, so allowing
straight SVGs is an XSS vulnerability. I don't know what the correct way is to
strip javascript out of SVG files. There must be some library which can parse
an SVG, keep only whitelisted non-Javascript-containing properties, and write
out the file again, but I can't find it. (What does Wikipedia use?)

~~~
leeoniya
[https://github.com/cure53/DOMPurify](https://github.com/cure53/DOMPurify)

~~~
baudehlo
Yeah because sanitizing client side is a great idea.

~~~
gruez
Serious question: whats wrong with that?

~~~
shoeboxam
I think his concern is- since the security program would need to run on the
attacker's computer, the attacker may simply opt not to use it, circumvent it.
That being said, I don't see why it can't be used to sanitize requests to the
server.

~~~
Sacho
Well, if you are worried about xss, that is a case of an attacker's code
running on a victim's machine. If they process svgs through the lib before
adding them to the dom, that would be one way to prevent the xss attack. This
seems to be what DOMPurify are suggesting based on their documentation.

------
NelsonMinar
I think a lot of credit for SVG's resurrection goes to Mike Bostock for making
it the core of his visualization technology. Obviously D3 is the big SVG thing
now, but his 2009 work on Protovis also relied on SVG, as did Polymaps in
2010.

I argued with Mike back then that SVG was a bad choice because it didn't work
in MSIE and it was sort of a forgotten technology everywhere else. Fortunately
he didn't pay any attention to me. SVG is particularly handy because it lets
Javascript create and alter graphics using a DOM representation. That's
something you really can't do in Canvas or WebGL without reinventing parts of
what DOM does.

------
pdkl95
I suggest that SVG missed it's true calling - as a modern vector animation
platform. D3 is a good example of that kind of use, but I think it had a lot
more potential. The ability to debug your graphics as elements can be very
useful, and you get a lot of functionality built-in (e.g. DOM events).

As an example, see this unfinished asteroids SVG I wrote in '09 (before
<canvas> was generally available):

[http://public.codenazi.fastmail.fm/asteroids_dynamic.svg](http://public.codenazi.fastmail.fm/asteroids_dynamic.svg)

(seriously, it's not actually a finished game - damage is disabled, there's no
levels/etc, but you can move with the arrows, shoot with space, (useless)
shield on x)

The problem was the (slow) reflow every time you changed the DOM. I tried a
few ideas to batch changes or pre-allocating elements, but browsers just
couldn't run it consistently smooth enough at the time. It's somewhat better
now - maybe I should actually finish it...

~~~
colanderman
Agreed. I would love to see web apps start moving to SVG. I am not a web
developer myself so I could be wrong, but having played with SVG a bit, it
seems SO much more suitable for making web apps than the HTML5/CSS morass we
are stuck in now.

------
Cymen
For SVG to truly rise, it needs better font/text support. It should be easy to
programmatically determine the width of a string of text in a given font.
Unfortunately, it is not. You can go look how libraries like D3.js do it. But
ultimately, pixel-perfect text with SVG is difficult/impossible. I'd really
like to know if I'm wrong about that.

On the positive side, ReactJS plays great with SVG. I'm working on some basic
line charts that I want ReactJS-managed so I can render them server-side too.
My line chart isn't done but I tried the server-side rendering and it's
working great.

~~~
jarek-foksa
textElement.getBBox().width and textElement.getBoundingClientRect().width
should give you the text width in user and client space.

~~~
Cymen
Have you tried them though? Now check it out with kerning and/or italics. Do
you see overhanging when you draw the rectangular box found via the API? Good
example is strings that end with a character like f.

Works in theory. In practice, it does not. That is what I found but again, I'd
be happy to be wrong.

~~~
jarek-foksa
That's interesting, the computed bbox seems to be slightly off on Chrome when
I apply "italic" font style.

~~~
Cymen
When working on it a year ago at another employer, we had a list of edge
cases. I don't recall them all but some were off by quite a bit. Enough so
that the work around was to do everything in SVG except text and use plain DOM
position on top for text. That was a bit better. It would be wonderful to do
everything in SVG.

------
erikpukinskis
The only thing holding back SVG is laptops. Most phones have enough pixel
density that SVGs look great and are the right choice for most non-text, non-
photo assets. But pixel density is low enough on most laptops that they look
fuzzy. Low-end tablets have the same issue but no one really cares about hi-if
experiences on those devices.

I think it often comes down to what's the easiest asset workflow that gets us
a good result. From that perspective, 1x raster + 2x raster is less work than
1x raster + SVG

~~~
leephillips
Why does an SVG look fuzzier than a bitmap at low resolutions? Is it because
of the lack of anti-aliasing?

~~~
detrino
Because bitmaps target a specific resolution they can be tweaked so that
features are aligned to pixel boundaries resulting in less anti-aliasing.

Truetype fonts are an example of a vector format that can still look sharp at
arbitrary resolutions because they can include hinting programs that align the
control points to pixel boundaries. This is why fonts tend to look sharper on
Windows and Linux than MacOS X. Linux and Windows default to strong hinting,
and MacOS X uses only slight hinting, preferring accurate shapes to sharpness.

~~~
4ad
> Linux and Windows default to strong hinting, and MacOS X uses only slight
> hinting, preferring accurate shapes to sharpness.

I know you already know these things, but for the sake of discussion (or other
people).

Linux allows you configure hinting. It's true that by default (depending on
how you define default) you get no hinting, but no reasonable distribution
that I know of has shipped with that default for the past 7 years. Quite the
opposite in my experience. Linux fonts (thankfully) look more like OS X fonts
than Windows fonts.

Unfortunately, this configuration usually happens in some Gnome/Unity/XFCE/KDE
configuration format, so if you want to use a better window manager with no
DE, you sometimes have to recreate this from scratch, although, as someone who
obsesses over font rendering and doesn't like the DEs, this is easier now than
in 2000.

And then you have Google Chrome who just ships with its own font rendering.
Gah.

------
ingenter
I see a big security problem with SVG: browsers allow executing scripts in SVG
files in site security context, so you have to check for a lot of script
execution vectors in SVG before you allow uploading user files.

[https://github.com/wikimedia/mediawiki/blob/4aa9e1/includes/...](https://github.com/wikimedia/mediawiki/blob/4aa9e1/includes/upload/UploadBase.php#L1128)

[https://github.com/wikimedia/mediawiki/blob/4aa9e1/includes/...](https://github.com/wikimedia/mediawiki/blob/4aa9e1/includes/upload/UploadBase.php#L1293)

~~~
the8472
my understanding is that svg in <img> is safe but prevents script execution

svg in iframe + srcdoc + sandbox gives you sortof-inline svg with separate
security contexts.

only plain inlined svg should be a security risk.

~~~
ingenter
If you host SVG file on the same domain as the main site, I can give a direct
link to the SVG file and your browser will execute arbitrary JavaScript in
that context.

~~~
the8472
I think in that case setting the CSP sandbox header to "allow-scripts" would
have the same effect as the iframe sandbox attribute and allow script
execution in the SVG but prevent same-origin access and various other things.

------
donbronson
Where is native support for iOS and Android? Why do we bother generating the
same assets for different screen densities? Am I the only one who wants SVGs
on mobile?

~~~
BHSPitMonkey
Everything supports SVG 1.1 these days (the end of the article talks about
this).

[http://caniuse.com/#feat=svg](http://caniuse.com/#feat=svg)

~~~
jmtulloss
I think the OP means in the native SDKs for those platforms.

~~~
donbronson
Correct!

~~~
idibidiart
[https://github.com/jmenter/JAMSVGImage](https://github.com/jmenter/JAMSVGImage)

------
lechevalierd3on
No mention of retina screens? In my experience it has pushed to use font and
svg on the web.

~~~
joeyspn
This and the android device fragmentation (yes, also for resolutions and pixel
density) is what pushed me to start replacing raster images for SVGs in all my
web and hybrid mobile apps. I guess being quite good at Illustrator helped me
to make the jump.

I don't bother using jpg's, png's of gifs anymore. Whenever I can, I use
vector designs exported to SVGs (backgrounds, custom iconfonts, logos, shapes,
animations, etc...)

------
jzcoder
Corel had a serious SVG effort during this early period around 2002-2004. They
created a SVG Viewer and tooling around an initiative known as Smart Graphics.

Here's a Press Release about it:
[http://www.corel.com/uk/pdfs/press/79.pdf](http://www.corel.com/uk/pdfs/press/79.pdf)

------
jarek-foksa
I'm currently working on an SVG authoring tool written in JavaScript. You can
check the project on [https://chrome.google.com/webstore/detail/boxy-
svg/gaoogdonm...](https://chrome.google.com/webstore/detail/boxy-
svg/gaoogdonmngmdlbinmiclicjpbjhgomg)

------
idibidiart
1\. ForeignObject support still sucks.

2\. WebGL and even Canvas are significantly more performant. I realize that's
comparing apples and oranges... Still, if I had a choice for any data
visualization project today I'd use WebGL rendering, or ThreeJS etc.

~~~
Silhouette
_WebGL and even Canvas are significantly more performant._

It did seem rather unfair of the article to bash Microsoft/IE so much over SVG
support, when actually today the performance and sometimes rendering quality
in IE is dramatically better than the likes of Chrome and Firefox.

But in any case, you're right, performance is a significant real world concern
if you're using SVG for anything beyond very simple diagrams or line art.

------
Spoom
We use SVG all over the place, but then we have the great privilege of being
able to tell our clients to only use modern browsers. It's pretty nice to be
able to specify one graphic for use at all pixel densities that never gets
blurry.

~~~
nkg
Oh yeah. I work for a web agency and, if I could, I would just stop using
images and use only SVG. Sadly, we still need to push some visuals as
large.jpg + mobile.jpg and use media query...

~~~
chei0aiV
Why not build your sites using SVG and render your bitmap images from those
SVG files?

------
dnautics
One of the early successes of svg, iirc, was its adoption by Linux window
managing software.

------
LarryMade2
I think another factor in the rise of SVG was it being used in illustration
programs most notably Inkscape and its predecessor Sodipodi.

------
coldtea
I have worked with SVG extensively, mostly through Raphael but also with Snap
and D3.

It might not be a perfect standard, but it's a glorious feature set the web
needs.

------
colbydehart
Should this be called the rise and fall and rise of SVG?

------
mxfh
Or also read W3C's version of the SVG Origin Story:

[http://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG](http://www.w3.org/Graphics/SVG/WG/wiki/Secret_Origin_of_SVG)

~~~
maxdunn1
Or Alex Danilo's awesome history:
[https://www.youtube.com/watch?v=GV3GSxbW_-A](https://www.youtube.com/watch?v=GV3GSxbW_-A)

------
criddell
Google renders their homepage with SVG now, don't they?

Right click on google.com and do a view source.

~~~
leephillips
The logo is a png. The page is a giant wad of incomprehensible, minified
javascript. There are two references in there to SVGsomething, so who knows.

