Slow processing with composite SVG which contains <text>
See original GitHub issueHi,
I’m trying to add a text to my picture by using composite API and an SVG wich contains a <text>
element. When I remove <text>
, or try with a simple SVG, the process only takes a few ms (< 10ms) for one picture. As soon as I add a <text>
element, it takes many seconds (> 7s) to process. Below a simple example with a measurment of execution time.
const sharp = require('sharp')
;(async () => {
const overlay = `<svg width="200" height="200">
<text x="50%" y="50%" font-family="sans-serif" dominant-baseline="middle" font-size="30" text-anchor="middle">Lorem ipsum</text>
</svg>`
console.time('createimage')
await sharp(
{
create: {
width: 200,
height: 200,
channels: 4,
background: { r: 216, g: 216, b: 216 }
}
})
.composite([{
input: Buffer.from(overlay),
gravity: 'center'
}])
.png()
.toFile('test.png')
console.timeEnd('createimage')
})()
With result:
createimage: 7.377s
Informations:
Sharp : sharp@0.29.3
System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
Memory: 155.33 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
Interesting point: I’ve tried the same code on a colleague’s mac computer with M1 chip and it took only ~70ms to process (and ~5ms without <text>
element).
I’m not sure it’s directly related to this lib, I saw a few issues with SVG but none wich implies <text>
in the process with the composite API.
Issue Analytics
- State:
- Created 2 years ago
- Comments:10 (6 by maintainers)
Top Results From Across the Web
Filling hundreds SVG paths with an image causes serious ...
Here's a cool resource about SVG performance Sounds like the pattern attribute is asking quite a lot of the composite process.
Read more >Filter Effects – SVG 1.1 (Second Edition) - W3C
Each 'filter' element contains a set of filter primitives as its children. ... Too large of a value may result in slow processing...
Read more >The Art Of SVG Filters And Why It Is Awesome
In this article we'll see how SVG filters help us to create ... We'll start with a boilerplate SVG that contains an empty...
Read more >How To Process Images in Node.js With Sharp - DigitalOcean
You have now used the composite() method to add text created with SVG on another image. Conclusion. In this article, you learned how...
Read more >text-rendering - CSS: Cascading Style Sheets - MDN Web Docs
The text-rendering CSS property provides information to the rendering engine about what to optimize for when rendering text. The browser makes ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Closing as there’s probably nothing we can do in sharp for this. fontconfig provides the
fc-cache
tool to build a cache of fonts so it doesn’t have to “discover” them each time, which might help.Thanks for the update, this does sound like font discovery is the problem.
I hadn’t realised valgrind is unavailable for macOS via homebrew, sorry. You might be able to use kcachegrind, which appears to be available via MacPorts - https://github.com/macports/macports-ports/tree/master/kde/kcachegrind4