Comment by jarek-foksa | Hacker News Reader

Comment by jarek-foksa | Hacker News Reader

Parent Full thread

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

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.

There's a difference between "implemented" and "working".

Here's an example of the combination of PNG Transparence (in since version 1) and ShadowBlur (in for quite some time), both of which work on their own, but not in combination:

http://code.google.com/p/chromium/issues/detail?id=100703

There are still lots of issues like this one, with limitless combinations of feature1, feature2, browser vendor to choose from that make working with vector graphics on the web several orders of magnitude more painful than simply throwing a .png up there and calling it done.

linked images also work with the xlink namespace:

<svg xmlns="http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/xlink class="tributary_svg"><rect width="200" height="200" x="100" y="100" fill="#1A9224"></rect><image width="200" height="200" xlink:href="https://twimg0-a.akamaihd.net/profile_images/2560186719/7f57... x="325" y="100"></image></svg>

d3 code to generate this http://enjalot.com/tributary/3747523/

Reply on news.ycombinator.com