11

Is it possible to recreate this sort of blurred gradient in an SVG?

enter image description here

13

Yes and no.

It's possible to create a gradient mesh in Inkscape, and save it out as an SVG. However the SVG standards used in browsers don't support gradient meshes yet. This might change in the future, but for the present no.

enter image description here

Another method which does work in browsers, is to add several solid objects, blur them, and put them in a clipping mask. This is still a pure vector solution, it's not rasterized.

enter image description here

Here's the SVG for the version that works in browsers, if you want it.

Edit: the above link to the SVG is no longer available, so I've removed it.

  • That’s cool! The SVG in the link doesn’t look anything like the insert provided in your answer however... it looks much lighter. Any reason for this? – Jared Garcia Feb 13 '18 at 0:01
  • @JaredGarcia I've no idea why - my screen capture matches the SVG exactly on my computer in Inkscape - but make sure you are using the most recent version of Inkscape - now at version 0.92 – Billy Kerr Feb 13 '18 at 0:40
  • Ah, I was viewing it in browser on my mobile straight from that download link. I’ll open it in Inkscape and check it out. – Jared Garcia Feb 13 '18 at 1:15
  • 1
    @JaredGarcia post that as a new question instead so that it can be properly answered. – Andrew T. Feb 13 '18 at 3:39
  • 1
    Blurring in browsers is really expensive. You can get the same effect by layering background gradients. These are even animatable. And you can use background-blend-mode for extra effect in modern browsers. – PieBie Feb 13 '18 at 8:33
2

It can be made in Illustrator and Inkscape as Gradient mesh. When saved as SVG in legacy Illustrator, it transformed to bitmap image. Obviously Illustator knew it about 6 years ago, but SVG language didn't.

When saved in Inkscape as plain SVG, not as Inkscape SVG, it stayed as gradient mesh and opening the SVG file with a text editor revealed there's command meshgradient. See the code snippet

enter image description here

So, without knowing the standards, I can say "It's at least implemented in Inkscape's plain SVG."

Hopefully someone SVG development status aware programmer tells something exact.

  • 2
    You can directly include code here with proper code formatting. No need to post a screenshot. – Wrzlprmft Feb 12 '18 at 21:33
  • Sadly, Inkscape's gradient meshes aren't supported in Google Chrome, or Firefox yet. – Billy Kerr Feb 12 '18 at 21:39
  • Can you post the svg code – Jared Garcia Feb 12 '18 at 23:59
  • @JaredGarcia I haven't it. I filled only 10 nodes of 25 to see that it gives the right look. You can make it yourself. Import the image to Inkscape, make a square of the same size, set its fill type = gradient mesh, add 3 rows and columns more with the mesh tool, with the node tool select one by one the nodes and with the color picker take the color from the imported image. Save as plain SVG, open in Win Notepad to see the code. – user287001 Feb 13 '18 at 0:38
1

If your goal is to have a lightweight, scalable mesh gradient then you could try this method:

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

It’s not vector but it might as well be since the file size is super small and the image scales infinitely.

  • Welcome to GDSE - glaf to have you here! Please take a look around tour and get a sense of how we like to ask How to Ask and answer How to Answer questions. It's probably a good idea to look at the overall behaviour codes too whilst you're looking round help center Your answer is a good answer in terms of the applicability what you've shared, but here at GDSE we prefer to use links for reference only or to tie resources, as links change or disappear all too easily: could you summarise the content you're tying to in the body of you answer please? – GerardFalla Jan 18 '19 at 16:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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