On Thu, 2017-01-19 at 10:18 -0700, Amelia Bellamy-Royds wrote:
This is awesome Jayesh!

I know Tavmjong Bah has also been working on a polyfill, so hopefully you two can join forces & figure out how to handle remaining issues.

Yes, I would be interested in collaborating. My javascript skills are rather limited. You can get the latest version of my code at:

https://gitlab.com/Tavmjong/mesh.js

I don't have time to look at your code tonight but I would be interested in how fast it renders the pepper.svg file. I've been working on speeding up the rendering. So far I've got it down to about 1/3 of the initial time (any help from javascript experts would be appreciated). Next I'm going to implement bicubic smoothing. And then to complete things, meshes on stroke (I think that using a mask can work for this).

Tav

Some comments, which I'll also file as Issues in your GitHub repository:

  • To make the sample files viewable online, you could enable GitHub pages (https://help.github.com/articles/what-is-github-pages/), creating a simple index.html file that links to the samples with and without polyfill.

  • To keep the generated DOM & styles as close as possible to the original, I would recommend putting the generated <image> inside a <pattern>, and using the <pattern> to paint the shape that should be painted with the <meshGradient>.  (In the case of a <mesh>, you would need to generate a <path> and paint it with the <pattern>.)  If you reuse the same id value from the meshGradient, then you shouldn't need to worry about parsing CSS on the shapes, you would just look for the actual <meshGradient> objects.

  • I haven't yet tried to debug the gradient code, but there is a "dead pixel" effect in some of the examples (see attached screenshot). 
    Inline images 1
As I said, awesome work! I look forward to being able to use mesh gradients on the web.

Best,
Amelia Bellamy-Royds

On 19 January 2017 at 08:20, Jayesh Salvi <jayeshsalvi@...847...0...> wrote:
Hello,

I've implemented Javascript polyfill for SVG files that have mesh gradients in them, so that they can be rendered in browsers successfully. I ported the mesh gradient rendering code from Cairo to javascript in order to do so.

The code and instructions on how to use it are available at 
https://github.com/zectorio/mesh-gradient-js

This code could be run on SVG files created in inkscape and make them renderable in browser.

Please take a look. I'm looking forward to your feedback.
(There are still some rough edges, as this is still a proof-of-concept thing. But the code works for examples in samples directory)

Thanks,
--
Jayesh

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-devel mailing list
Inkscape-devel@...1656...784...sourceforge.net
https://lists.sourceforge.net/lists/listinfo/inkscape-devel


------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, SlashDot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-devel mailing list
Inkscape-devel@...1794...s.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/inkscape-devel