linebender / resvg

An SVG rendering library.
Apache License 2.0
2.85k stars 228 forks source link

High memory with this gradient pattern #792

Closed ducan-ne closed 4 months ago

ducan-ne commented 4 months ago

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

CleanShot 2024-07-19 at 18 48 48@2x

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%)

RazrFalcon commented 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.

ducan-ne commented 4 months ago

@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 🙏

RazrFalcon commented 4 months ago

How did you calculate that 4180x4180px dimension?

circle.radius * 2

Also, width and height have absolutely no effect for the circle element.