Text blurring inside of at smaller screen size SVG.


I’m working on some visualizations using d3js and noticed that when using viewport after a certain point the text and often shapes inside of the image begin to blur. Is there a good way of dealing with this? I’m not sure if increasing the font size would be the only option here or if there was an alternative. I already tried increasing the font size but it didn’t really work due to my size constraints. I’m using Observable Plot for a grouped bar chart and was wondering if there was any built in methods or tools that help deal with this issue.

can you share a concrete example?

The plot seems to work fine on independently. However, when I implement the same code inside of a grid it seems to run into issues.

Here’s an image of what it looks like in a dashboard.

When I move to resize to a bit smaller screen step the text ends up becoming illegible.

Resizing it and changing the number of visualizations per row can fix it but I kind of want it to be legible in the positions that they are currently in.

Is there something that I could be doing wrong? I’m not entirely sure.

Is this in Safari? And how are you embedding the SVG into your page?

Hi this is in Brave or a version of Chromium. But it seems to have the same issue in chrome. I just ended up changing my dashboard after testing some different font sizes and realizing that ended fixing the legibility problem more.

You could also experiment with different ways to optimize the text rendering (although it may still vary heavily from device to device):