Legend text doesn't fit inside the box in SVG output. Font size is different in SVG and PNG outputs at larger fonts. · Issue #171 · plotly/plotly.rs · GitHub
You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Legend text doesn't fit inside the box in SVG output. Font size is different in SVG and PNG outputs at larger fonts. #171
I stumbled upon a similar issue and it took me some time to nail it down.
So you ended up seeing this somehow by chance and somehow by design.
I was working on an experimental feature to transition away from the old Kaleido setup. And I ran your example in it where I could use either Firefox or Chrome. The issue with SVG only appeared when using Chrome and not with Firefox.
This crate's static export uses Kaleido which under the hood uses Chrome, so that meant somehow it had to do with how Chrome handled SVGs ... somehow.
I am not a font's expert, but dumping both SVGs from Firefox and Chrome into Copilot provided a hint.
Apparently ...
Both browsers use font-family: serif for legend and title, but map this to different actual fonts depending on browser/OS.
The generic 'serif' used in your example cause each browser to pick a different system font, each with unique width and metrics.
I changed your example to use Font().family("Times New Roman, serif") everywhere and with that, PNG, PDF, and SVG render the same way.
@YDS67 Thanks for providing the example code. If all it is OK with you, I am going to copy Example5 code to the examples folder in ploty.rs for others that stumble upon the same issue.
I will close this issue. Will add your example to this crate if you approve.
@andrei-ng yes, of course, you can add my example, I don't mind. Thank you for working on this issue. Although personally I don't need SVG plots, some people may need them, for web or for Typst.
@andrei-ng yes, of course, you can add my example, I don't mind. Thank you for working on this issue. Although personally I don't need SVG plots, some people may need them, for web or for Typst.
Activity
andrei-ng commentedon Jun 25, 2025
I stumbled upon a similar issue and it took me some time to nail it down.
So you ended up seeing this somehow by chance and somehow by design.
I was working on an experimental feature to transition away from the old Kaleido setup. And I ran your example in it where I could use either Firefox or Chrome. The issue with SVG only appeared when using Chrome and not with Firefox.
This crate's static export uses Kaleido which under the hood uses Chrome, so that meant somehow it had to do with how Chrome handled SVGs ... somehow.
I am not a font's expert, but dumping both SVGs from Firefox and Chrome into Copilot provided a hint.
Apparently ...
I changed your example to use
Font().family("Times New Roman, serif")everywhere and with that, PNG, PDF, and SVG render the same way.Data_plot.pdf
@YDS67 Thanks for providing the example code. If all it is OK with you, I am going to copy Example5 code to the examples folder in ploty.rs for others that stumble upon the same issue.
I will close this issue. Will add your example to this crate if you approve.
YDS67 commentedon Jun 25, 2025
@andrei-ng yes, of course, you can add my example, I don't mind. Thank you for working on this issue. Although personally I don't need SVG plots, some people may need them, for web or for Typst.
add example based on issue #171
add example based on issue #171
add example based on issue #171
andrei-ng commentedon Jul 10, 2025
Your example5 code is now as an example in https://github.com/plotly/plotly.rs/tree/main/examples/customization/consistent_static_format_export.
Thank you!