
Creating SVG vector graphics for maximum browser compatibility - molf
http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility
======
liZe
Most of the SVGs of this page don't test at all the described features,
they're just PNGs or JPEGs embedded in SVG files. The author didn't even open
its SVGs generated by Illustrator: a drop shadow in Illustrator does not mean
a drop shadow in the generated SVG!

For example, look at the source of the "mesh" test, it's a beautiful embedded
base64 PNG: [http://voormedia.com/blog/2012/10/creating-svg-vector-
graphi...](http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-
maximum-browser-compatibility/images/gradientmesh-19c02adf.svg)

------
jarek-foksa
There is a lot of wrong data in the "Browser compatibility" table at the end
of the article:

\- gradient meshes were never defined in SVG spec and none of the browsers
supports them. This feature should be introduced in SVG 2

\- WebKit-based browsers do support inner and outer glow effect (via
combination of feGausianBlur, feFlood and feComposite filters)

\- WebKit-based browsers do support drop-shadow effect (via feGausianBlur,
feOffset and feMerge filters)

\- WebKit-based browsers do support custom fonts (e.g. WOFF via @font-face,
SVG fonts are _dead_ )

\- WebKit-based browsers do support linked and embedded images (using data:uri
with base64 encoding)

\- envelope distortion is not supported by any browser, SVG spec defines only
affine transformations via transform attribute

~~~
ygra
The gradient mesh and drop shadow were exported as an embedded image by
Illustrator, so it was never tried to do it via pure SVG.

But I guess the author doesn't have much experience with SVG's feature set and
instead just fiddled around with Illustrator, looking at the export results
and drawing conclusions for SVG.

------
th0ma5
Isn't it strange that Chrome is lagging behind in SVG support?

~~~
Xurinos
And Javascript :( <https://en.wikipedia.org/wiki/Javascript#Versions>

~~~
OriginalSyn
That chart is misleading. V8 supports (and has supported it for a long time)
the vast majority of ES5. Since version 13 it's supported every ES5 features
with the exception of Zero-width chars in identifiers, and I don't know when,
but it was implemented somewhere between 16 and 23.

<http://kangax.github.com/es5-compat-table/>

~~~
timvandevelde
Webkit does support SVG filters but there is a bug which prevents displaying
the filters when embedded in HTML.

------
j_col
Raphaël JS is great for using vector graphics across multiple browsers:
<http://raphaeljs.com/>

~~~
nickmain
Does it address any of the issues presented in the article ?

~~~
j_col
Cross-browser vector graphics.

------
scottkuo
I think this has to do with the fact that the SVG graphics are embedded as
<img> instead of just embedding them directly into the document as <svg>.

If you load them directly into Chrome, the SVG renders fine.
[http://voormedia.com/blog/2012/10/creating-svg-vector-
graphi...](http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-
maximum-browser-compatibility/images/gradientmesh-19c02adf.svg)

Maybe this has something to do with Chrome's process of rendering this as a
bitmap? (Random guess)

------
m0shen
Looks awful under Chrome (Windows): <http://i.imgur.com/c6t6f.png>

~~~
rhizome
Yeah, if you scroll down to the test block with all the different effects,
Chrome is a blocker for SVG. Might as well be VRML.

~~~
jarek-foksa
The data included in that table is totally wrong. Chrome supports most of the
filter primitives defined in SVG spec, IE9 supports none of them, Firefox
supports vast majority but with serious performance issues.

The real blocker for SVG is the lack of good authoring tools. Illustrator
(used by the author of this article) apparently generates SVG files by
rasterising many vector effects.

I suspect that there is a bug in WebKit that breaks bitmap rendering in
certain circumstances, this would explain why some Illustrator-generated
effects failed on Chrome.

~~~
rhizome
Point being: SVG is still a non-starter. :/

------
mnicole
Based off of the blog post previous to this one about the implementation of
SVGs site-wide, I'm confused why they'd risk using SVGs over just CSS alone or
CSS+PNGs or even matte'd GIFs? Maybe I'm behind the times, but that seems like
a nightmare to maintain comparatively.

------
kodablah
My biggest problem with SVG has always been FF's inability to select text:
<https://bugzilla.mozilla.org/show_bug.cgi?id=292498>

------
davidjgraph
The feature table around FF 3 and 3.6 is just wrong. Opacity is in FF 3 and so
are lineargradients, I've used both in it.

I haven't tested any others, but I strongly doubt the author did either.

------
flippingbits
You might try our Rails Rumble entry: blacksmithapp.com. It helps you creating
icon webfonts based on SVG graphics.

~~~
mnicole
Awesome problem to solve (been looking for something similar without having to
use three different tools), but there's no tutorial on how to use this or what
it can do. Does it assume I've already assigned the glyphs in another piece of
software or will it let me assign to characters if it can't tell?

It'd also be nice if there was a live specimen preview so I could adjust the
ascent/descent visually. Also wish the weight was a drop-down that showed
100-900 and where the typical weights fall in e.g. 100 (Hairline)/ 400
(Regular) / 900 (Black).

Obviously you guys just built this thing two weekends ago, so those are just
my two cents :)

~~~
ianstormtaylor
you might want to also check out <http://icomoon.io>

~~~
mnicole
Don't know how I haven't stumbled across this sooner - thanks!

------
egypturnash
My experience is that SVG is simply not ready to support anything but the most
basic vector art.

I'm never sure if it's Illustrator's SVG output, the format, or browser
support that's lacking. But it's a total crapshoot if any kind of
sophisticated techniques are going to make it out of AI. (Hell, it's a
crapshoot if they'll make it through another PDF renderer, too; when I prep
books for print, I just make a ton of TIFFs.)

Here's some other ways I might try to make that radial gradient in AI. And
their results after eyeing the generated SVG.

\- Draw about 8-10 lines in different colors radiating out from the central
point. Make them into a blend. (This is an idiosyncratic use of the term
"blend"; when you blend between two or more shapes, AI will draw a bunch of
intermediary shapes that morph between them. You used to have to do this all
the time before AI added the quick and easy gradient tool.)

This translates into SVG as a bunch of lines - SVG doesn't understand the
concept of a blend, or at least AI's exporter doesn't, so six lines grouped
into a blend become a hundred or so. It looks pretty good.

\- Make a linear gradient; use a distortion mesh to turn it into a radial
gradient. [1]

This translates into SVG as an embedded image. But it sure looks good.

\- Draw about eight wedges. Blur them.

If I use AI's native blur, it turns into several embedded images. Also it's a
bit pale as there are no 100% opaque pixels.

If I use an SVG blur, it's very compact - just a few blurred shapes. However,
the rendering is just vile, with bounding boxes based on the edges of the
polygons rather than ones expanded out to cover all that blur. Also it has the
"no 100% opaque pixels" problem.

Also it's worth noting that Illustrator's UI for SVG effects is absolutely
terrible; you've got a tiny list of cryptically named effects, and if you want
to change the parameters you get to edit code.

\- Finally, I revisited the line blend and turned those lines into long, thin
wedges. Looks perfect. Translates into a whole ton of shapes.

I haven't tested file size. I suspect that it may not be a win over a bitmap
until you get to like 1K pixels square.

Some of these results might be better if I was using Inkscape. If anyone would
care to try doing similar things in that I'd be curious to see how well it
fares on these methods - and on others you may come up with!

Reference JPG: <http://i.imgur.com/ZSDAZ.jpg> Source AI and generated SVG:
<http://www.sendspace.com/file/rn83zw>

[1] Tutorial here: [http://vector.tutsplus.com/tutorials/tools-tips/quick-tip-
cr...](http://vector.tutsplus.com/tutorials/tools-tips/quick-tip-create-a-
conical-gradient-with-adobe-illustrator-in-two-minutes/)

~~~
th0ma5
Yes, I can confirm that a lot of what your experiencing is Adobe CS's
compromise with the SVG format, and indeed Inkscape is much better in this
specific use case. In general, AI predates SVG, and in general is much broader
in scope than SVG, especially with regards to integration with the rest of the
suite, and blurring of the lines between illustration and photographic
effects.

~~~
egypturnash
Out of curiosity, do you know of any other ways to get an image from AI into
an SVG besides Illustrator's SVG output?

~~~
th0ma5
No not really, although if I was in need of some kind of option, I would
explore a couple of things 1) Clipboard formats... like WMF on the clipboard
into Inkscape 2) Printing as PDF or PS and then using Inkscape or Ghostscript
to go from there... 3) See what kinds of options you get with obscure features
of Photoshop like AI->Photoshop->Print as PDF ... in general I think for large
complex drawings AI suffers from losing track of its own internal scene graph,
or at least there are drawings and layers of effects that can suffer from the
halting problem and just crash AI. I have seen several people in the creative
coding and graph theory worlds struggle with this kind of problem regardless
of tool. Best of luck to you!

