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.

Very slow svg rendering since version 53.0

See original GitHub issue

The time it took to create a pdf with multiple svg images increased drastically. We used to create some figures via matplotlib and base64 encode those images, so we do not have to create image files:

from io import BytesIO
import base64

from matplotlib.figure import Figure
import weasyprint

fig = Figure(...)
...
buffer = BytesIO()
fig.savefig(buffer, format='svg')
img_str = base64.b64encode(buffer.getbuffer()).decode("ascii")
html_image = f"<img src='data:image/svg+xml;base64,{img_str}' />"
weasyprint.HTML(string=f"<html><head></head><body>{html_image}</body></html>").write_pdf(...)

We also tried to use svg html tags (without base64 encoding) instead but this took way too long as well (plus there is some issue with namespaces (ElementTree.fromstring exception) so we had to use some regex sub stuff to remove metadata an namespace data from the svg xml).

Results from cProfile for the method write_pdf (the underlying draw methods got called 15 times each):

  • Prior to 53.0: time: 8602 ms, 31.7%
  • After 53.* update: time: 28502 ms, 71.4%
  • Using html svg tags: time: 23376 ms, 68.7%

Those stats got worse the more svg images where included.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
SvenBeckercommented, Sep 10, 2021

Ok thank you for the response. I opened two new issues. Btw. is there some documentation on how to use optimize_size or image_cache. I was not really aware of it and now I’m not really sure hot to use it.

0reactions
liZecommented, Sep 11, 2021

Caching use tags makes the speed closer to what it was. There’s room for improvement, but I think that it’s enough for this performance problem.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to handle slow rendering SVG images? - Stack Overflow
If the SVGs only consist of paths and shapes with a single solid color the only option you have is trying to somehow...
Read more >
Improving SVG Runtime Performance - CodePen
Inline <svg> clutters up the page DOM, slowing style recalculation/reflow and inflating memory usage. It also hecks up Chrome's GPU-rendering ...
Read more >
Why is SVG rendering so slow? - Google Groups
I want to make animated SVG graphics (as in having a single SVGSVGElement and animating attributes of thousands of descendant elements).
Read more >
How to improve page load speed with SVG optimization
This article will show you what to remove from your SVGs to stop them from slowing down your page and giving your end...
Read more >
Save for Displays: SVG export is extremly slow on Windows
This process is extremly slow on Windows on a decent machine. Every SVG takes about 3sec to save. CPU usage shown AI is...
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