title: Pure SVG way to fit text to a box
body: <p>Box size known. Text string length unknown. Fit text to box without ruining its aspect ratio.</p>
  <p><img src="https://i.stack.imgur.com/8hKWl.png" alt="enter image description here" /></p>
  <p>After an evening of googling and reading the SVG spec, I'm pretty sure this isn't possible without JavaScript. The closest I could get was using the <code>textLength</code> and <code>lengthAdjust</code> text attributes, but that stretches the text along one axis only.</p>
  <pre><code>&lt;svg width=&quot;436&quot; height=&quot;180&quot;
      style=&quot;border:solid 6px&quot;
      xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
      &lt;text y=&quot;50%&quot; textLength=&quot;436&quot; lengthAdjust=&quot;spacingAndGlyphs&quot;&gt;UGLY TEXT&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  <p><img src="https://i.stack.imgur.com/sAz3Z.png" alt="enter image description here" /></p>
  <p>I am aware of <a href="https://stackoverflow.com/questions/2938779/svg-scaling-text-to-fit-container">SVG Scaling Text to fit container</a> and <a href="https://stackoverflow.com/questions/5933857/fitting-text-into-the-box">fitting text into the box</a></p>