question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Slow processing with composite SVG which contains <text>

See original GitHub issue

Hi,

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:closed
  • Created 2 years ago
  • Comments:10 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
lovellcommented, Aug 24, 2022

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.

0reactions
lovellcommented, Feb 3, 2022

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found