SVG Scaling Text to fit container
Solution 1
If you really don't care that the text gets ugly, here's how to fit unknown length text into a known width.
<svg width="436" height="180"
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
<g>
<text y="50%" textLength="436" lengthAdjust="spacingAndGlyphs">UGLY TEXT</text>
</g>
</svg>
Solution 2
Here is what I have come up with... Its similar to what other people have posted, but I think it resizes and scales nicely. This code will add spacing to any text roughly between 10-25 characters to make it fill the entire width of its parent. If you need longer or shorter text, just adjust the viewBox width and textLength attributes.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox='0 0 300 24'>
<text textLength='290' lengthAdjust="spacing" x='5' y="14" >
Some Unknown Text that is resizing
</text>
</svg>
Solution 3
Maybe this could work for you. You'd have to tweak the values, but it does resize when the parent div resizes. Here's my dabblet example. It works similarly to fittext.js
I used the ‘viewBox’ & ‘preserveAspectRatio’ attributes.
<svg><text x="50%" y="50%" dy=".3em">Look, I’m centered!</text></svg>
<svg viewBox="-50 -50 100 100" preserveAspectRatio="xMidYMid meet"><text font-size="16" dy=".3em" >I’m also resizeable!</text></svg>
other resources I looked at:
Solution 4
You can use the textPath
tag in conjunction with the text
tag. If you then set the lengthAdjust
attribute of the textPath
tag to "spacingAndGlyphs"
(you may additionally use the method
attribute and set it to "stretch"
to adjust the rendering method).
Example:
<div style="width: 100%">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 100"
style="border:solid 6px"
xmlns="http://www.w3.org/2000/svg">
<g>
<path id="svg-text" d="M 10 50 H 180" fill="transparent" stroke="lightgray" />
<text>
<textPath
xlink:href="#svg-text"
method="stretch"
lengthAdjust="spacingAndGlyphs"
>Beautifully resized!</textPath>
</text>
</g>
</svg>
<div>
Related videos on Youtube
![Tom](https://i.stack.imgur.com/7CmFa.jpg?s=256&g=1)
Tom
Software Development Engineer at PillPack B.S. in Chemistry from UMASS Amherst Amateur rock climber Articles on Medium Projects on GitHub and npm Learning languages on Exercism
Updated on November 16, 2020Comments
-
Tom over 3 years
This is likely a very simple question, but how do I get text in SVG to stretch to fit its container?
I don't care if it looks ugly from being stretched too long or high, but it needs to fits its container and be as big as possible.
Thanks
-
Stoikerty almost 11 yearsyou're welcome. it's one of my first contributions to the "internet" so I'm glad to hear I was able to reach somebody. (I'm called Stoikerty now :P)
-
whyoz over 9 yearsDoes this work in IE? Doesn't seem to work, but I have a lot of other stuff in play.
-
Martin Delille over 7 yearsYou may need to use unbreakable space if your text starts or ends with space.
-
jave.web over 4 yearsThis plays with space between letters, does not actually resize the letters, can be useful, but current description is misleading :)
-
Oscar Godson over 3 yearsThis didn't work for me. It just bleeds out of the container jsbin.com/xecisayuki/1/edit?html,output