How to convert a gradient mesh created in Illustrator into a browser-compatible, scalable SVG?

Question

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.

Answer 1

Stretching the bleep out of a jpg is a pretty feasible technique in this case, since this is a blurry image to begin with.

You are going to see some banding if you stretch it too much, but there are things you could do to try and avoid that.

Here's the image you provided, stretched to viewport siz.

^{On my 1440p screen res, the banding goes slightly over acceptable quality in my opinion.}

Few ideas:

1. You could use different size images to avoid banding. Couple options:

   • Media queries.
   • Adaptive images script.

2. A really good one, as far as quick and dirty goes, is to add some noise on top of the image. Example link. This one already looks pretty good on my 1440p screen resolution

3. Another similar idea: Adding a pattern on top of the image. Example link 1. Example link 2.