4

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.

JPG export of the illustrator gradient mesh

5
  • I would suggest "Creating a gradient mesh in CSS/Jquery" which points to Advanced Gradients for SVG
    – user9447
    Oct 16, 2014 at 13:07
  • Then what do you suggest add an alternative? A comment like yours would be helpful if you suggested an alternative
    – Ali Samii
    Oct 16, 2014 at 14:09
  • You could try to develop it in SVG but I would do a JPG fallback based the different resolution points you're trying to do.
    – user9447
    Oct 16, 2014 at 14:13
  • @Matt, I was referring to the other comment, asking for an alternative. I did look at the links you provided which are interesting, but I'm not sure how to implement the multiple overlayed gradients suggested in the so link when applying the gradient to the html tag as a background.
    – Ali Samii
    Oct 16, 2014 at 14:19
  • I'd use jpgs and media queries myself.
    – Scott
    Oct 16, 2014 at 18:50

1 Answer 1

5

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:

  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.

3
  • May I ask the asset that is repeated in ex. 2(the .png), is it "stippled"? What is it?
    – user29318
    Oct 17, 2014 at 3:54
  • @Amphiteót I wanted to use this White Diamon pattern from Subtle Patterns, but it was too faded and I didn't have photoshop installed. So I found this background generator that uses SP images. The name in there is the same without spaces, at the very bottom of the list. I just bumped the intensity to about 70% and no noise.
    – Joonas
    Oct 17, 2014 at 5:41
  • Thank you for the information! I really like the final result! Also always suprised at how features are extracted from primitive shapes.
    – user29318
    Oct 17, 2014 at 7:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.