3 ms·

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 b

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

enjalot 14y ago
linked images also work with the xlink namespace: <svg xmlns="http://www.w3.org/2000/svg http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/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/7f57h85fjrqelks62v75.jpeg 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/ http://enjalot.com/tributary/3747523/
ygra 14y ago
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.
jasonkester 14y ago
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 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.

enjalot 14y ago

linked images also work with the xlink namespace: <svg xmlns="http://www.w3.org/2000/svg http://www.w3.org/2000/svg xmlns:xlink="http://www.w3.org/1999/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/7f57h85fjrqelks62v75.jpeg 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/ http://enjalot.com/tributary/3747523/

ygra 14y ago

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.

jasonkester 14y ago

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