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
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
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). 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
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
First attempt to send got bounced by inkscape-devel as the email was too large...
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
.... trimmed rest to cut down size ...
Hi Jayesh,
maybe you would like to coordinate your efforts with Tav?
His polyfill is available here: https://gitlab.com/Tavmjong/mesh.js/
Description here: http://tavmjong.free.fr/SVG/POLYFILL/MESH/mesh.html
(He posted this in the Inkscape g+ account)
Regards, Maren
Am 19.01.2017 um 16:20 schrieb Jayesh Salvi:
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
participants (4)
-
Amelia Bellamy-Royds -
Jayesh Salvi -
Maren Hachmann -
Tavmjong Bah