Text blurring inside of at smaller screen size SVG.

Community Help
1

Hi,

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.

2

can you share a concrete example?

3

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.

image
image3178×1305 448 KB

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

image
image1850×923 169 KB

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.

image
image791×1460 119 KB

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

4

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

5

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.

6

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