SVG Mesh Polyfill

Last updated 15 January 2017

Changes:

Added support for 'objectBoundingBox' value of 'gradientUnits'.
Added support for 'gradientTransform' attribute.
Added support for 'stop-opacity'.
Project available on GitLab (Tavmjong/mesh.js).

SVG Meshes allow real life shadings. They are supported by the latest version of Inkscape (0.92). Until browsers have implemented meshes natively, one can use a JavaScript polyfill to render them.

Just before the closing tag in your file:

For HTML:

	    <script src="mesh.js"></script>

For SVG:

	    <script type="text/javascript" xlink:href="mesh.js"></script>

and include the file mesh.js in the same directory as your file.

Note that mesh.js is a work in progress written by a novice at Javascript. It has some limitations:

No support for bi-cubic blending.
No support for meshes on strokes.
No attempt to make the code efficient.
Occasional rendering errors (e.g. some unfilled pixels in rotated meshes).

Mesh rendering, of course, would be much better handled natively in browsers. Let them know if you want native rendering!

Inline SVG

2x2 Mesh

Conical Mesh

Stand-alone SVG

mesh.svg
conical.svg
conical2.svg Works in Firefox but not Chrome.
pepper.svg (takes about 20 seconds to render).

Additional Test SVG

Obligatory PNG for social media that doesn't support SVG's (I'm looking at you G+).