I'm using SVGs referenced via <img> and are set to scale to fit the width of their container—this is because we are using a mix of 2-column and 1-column layouts depending on the page. However, when the image scales, the text scales up or down with it. Is there any way to have the text remain at (for example) 10pt even as the image scales?
Forum › How do I...?
Retain font-size in SVG even when scaling image larger or smaller?
I don't think so, no. In this case it would be better to have the text outside the image altogether.
Oh well. These tend to be text labels on graphs, charts, and diagrams, as opposed to text that could be moved to a caption, unfortunately.
Googling around shows many people are wrestling with this issue with text in SVG, and there is no simple solution to keep the text invariant.
Do you know ahead of time whether the SVG will end up in a 1-column or 2-column layout? Perhaps you could use some CSS or JavaScript to double the text size if the SVG width is halved. This may require having two copies of the image if you are using external SVG images, though.
Do you know ahead of time whether the SVG will end up in a 1-column or 2-column layout? Perhaps you could use some CSS or JavaScript to double the text size if the SVG width is halved. This may require having two copies of the image if you are using external SVG images, though.
I wish I did! Your suggestion is basically the approach we are heading towards, at least, so it's good to know we haven't missed anything obvious. Thanks!