Closed ducan-ne closed 4 months ago
Gradients do not affect memory usage at all. The reason you have high memory usage is due to the mask. And not the mask itself, but the way it is used.
<circle cx="1080" cy="1790" width="1080" height="1790" r="2090.5740838343904" fill="url(#satori_r2adial_id_0)" mask="url(#satori_mask_id_0)" />
This circle is 4180x4180px in dimensions. Or 4646x4646px with --width 1200
.
That's 4646 * 4646 * 4 = 86MB
for the image/layer + 4646 * 4646 * 1 = 22MB
for the mask + 1200 * 1989 * 4 = 10MB
for the pattern.
Yes, it can be drastically optimized in your case by having non-raster rectangular masks, but this isn't supported yet.
@RazrFalcon I see, thanks for the explanation, I think it's something similar to dimension things but couldn't figure out how it was affected How did you calculate that 4180x4180px dimension? As of my understanding, it's 1790x2090 and its position is x=1080,y=1790, where the radius is 2090. Is it related to radius?
This is somehow a typical case of Satori I think (Playground). It's generated this element and it is not an issue for normal users since they have enough memory space, but not my case since I'm running on an isolated environment like cloudflare worker Will try to raise with them if I find out a way to improve this 🙏
How did you calculate that 4180x4180px dimension?
circle.radius * 2
Also, width
and height
have absolutely no effect for the circle
element.
Hi, today I have something similar to #780 but with gradient, basically it's just like black but was made by the editor.
Here is the reproducible code and the svg file for reference: https://gist.github.com/ducan-ne/709bbbf3965c6cc4786660ad17e5ebe0
Again, I'm not sure if this is because of Satori or the resvg, please help me confirm it 🙏 And the memory usage is peaked about ~170mb
The css value I've used is
radial-gradient(circle at right bottom, rgb(0, 0, 0) 0.00%,rgb(21, 24, 43) 100.00%)