I need to convert a gradient mesh generated in illustrator into an SVG file that is browser compatible.
The mesh generates this gradient which I need to use as a background for a responsive web site where the css is set as follows:
html {
background-image: url("/assets/img/optimised-mesh.svg");
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
The problem I am having is that when Illustrator generates an SVG from a mesh, it converts the mesh to a PNG and then wraps it in an SVG container. This doesn't work on some browsers:
Firefox supports image embedding from version 4.0 and upwards. Safari 6 does not show the embedded image at first. But when you open the SVG in a new Safari browser window and come back to this page, the image is displayed correctly.
I could potentially use a JPG or a PNG, but this is problematic because if I want to avoid pixelation, I would need to use a rather large image so that full-screen browsers on a 27" desktop monitor have a smooth gradient effect, which would slow down rendering of the page, and is not ideal for tablets or smaller displays. I could potentially detect the resolution of the monitor and have different images for different size monitors, but again, this is not ideal.
What I really would like is a way to convert the mesh into a true vector image, and not a rasterised version of the gradient mesh embedded in an SVG wrapper.
Any help would be truly appreciated.
Below is a small 512 x 512
JPG export of the gradient mesh.