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.
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). [image: 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@...400...> 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@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-devel
