Mesh Gradients Polyfill

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

Mesh Gradients Polyfill

jyro
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 

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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-devel
Reply | Threaded
Open this post in threaded view
|

Re: Mesh Gradients Polyfill

Amelia Bellamy-Royds
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). 
    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 <[hidden email]> 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 

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
[hidden email]
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-devel
Reply | Threaded
Open this post in threaded view
|

Re: Mesh Gradients Polyfill

Maren Hachmann
In reply to this post by jyro
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
> [hidden email]
> 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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-devel
Reply | Threaded
Open this post in threaded view
|

Re: Mesh Gradients Polyfill

Tavmjong Bah
In reply to this post by Amelia Bellamy-Royds
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:


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 <[hidden email]> 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 

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
[hidden email]
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
[hidden email]
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-devel
Reply | Threaded
Open this post in threaded view
|

Re: Mesh Gradients Polyfill

Tavmjong Bah
In reply to this post by Amelia Bellamy-Royds

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:


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

------------------------------------------------------------------------------
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
[hidden email]
https://lists.sourceforge.net/lists/listinfo/inkscape-devel