Is it possible to recreate this sort of blurred gradient in an SVG?
Add a comment
|
3 Answers
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.
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.
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.
answered Feb 12, 2018 at 21:29
-
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? Commented Feb 13, 2018 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 Commented Feb 13, 2018 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. Commented Feb 13, 2018 at 1:15
-
1@JaredGarcia post that as a new question instead so that it can be properly answered. Commented Feb 13, 2018 at 3:39
-
1Blurring 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 ♦Commented Feb 13, 2018 at 8:33
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
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.
-
2You can directly include code here with proper code formatting. No need to post a screenshot.– Wrzlprmft ♦Commented Feb 12, 2018 at 21:33
-
Sadly, Inkscape's gradient meshes aren't supported in Google Chrome, or Firefox yet. Commented Feb 12, 2018 at 21:39
-
-
@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.– user82991Commented Feb 13, 2018 at 0:38
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? Commented Jan 18, 2019 at 16:52