SVG Responsive Text

Question

I have an SVG within a web page, it consists of images + text

<object data="/infographic/timeline.svg" type="image/svg+xml">    
  <img src="/infographic/timeline.svg" alt="Timeline">
</object>

All the images are responsive, but the text isn't, so the text becomes really, REALLY small.

snippet of SVG (its massive)

  <defs>
    <style>
      .cls-1 {
        font-size: 60.014px;
      }

  .cls-1, .cls-10 {
    opacity: 0.69;
  }

  .cls-1, .cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 {
    fill: #ffffff;
  }

  .cls-1, .cls-10, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-9 {
    text-anchor: middle;
  }

  .cls-1, .cls-3, .cls-6 {
    font-family: "Roboto";
  }

  .cls-2 {
    font-size: 32.014px;
  }

  .cls-3 {
    font-size: 14.089px;
  }

  .cls-3, .cls-6 {
    fill: #db7426;
  }

  .cls-4, .cls-6 {
    font-size: 32px!important;
  }

  .cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 {
    font-family: Roboto;
  }

  .cls-5 {
    font-size: 24px;
  }

  .cls-5, .cls-8, .cls-9 {
    font-weight: 400;
  }

  .cls-6 {
    font-weight: 600;
  }

  .cls-10, .cls-7 {
    font-size: 18.75px;
    font-weight: 300;
  }

  .cls-7 {
    opacity: 0.4;
  }

  .cls-8, .cls-9 {
    font-size: 22px;
  }
 </style>
</defs>

<text id="Who_are_you_what_do_you_do_what_s_your_why_What_s_been_keepi" data-name="Who are you, what do you do, what’s your why? What’s been keepi" class="cls-8" x="397.706" y="535.325">Who are you, what do you do, what’s your why?<tspan x="397.706" dy="26.4">What’s been keeping you lying awake at night. </tspan></text>

Is there anyway I can get the text size to increase as the SVG/screen width gets smaller?

Any help would be greatly appreciated.

Normally the text will scale with everything else in the SVG ([example](http://jsfiddle.net/x6dnm0dg/)). You seem to have disabled this behaviour somehow. I'm just trying to figure out how. — r3mainer, Dec 15 '15 at 20:41
if it helps, the SVG is at the bottom of the page (the long infographic) http://outhouse.scottishbordersdesign.co.uk/approach/ when you move your browser window in, the text becomes to small to read, i need the text size to go up, or any other suggestions you have would be great. — Gaza, Dec 15 '15 at 20:50
Oh, I see. You want the text to remain at a legible size when the SVG is scaled down. I don't think that's possible — you can't get text to rewrap inside an SVG. Either switch to HTML or use the whole SVG as a background image with position `center top` so the non-text areas are clipped away on smaller viewports. — r3mainer, Dec 15 '15 at 21:02

Paul LeBeau · Accepted Answer · 2015-12-16T12:31:38.880

It's not possible with pure SVG (at least not yet). The only solution would be to either:

inline the SVG and manipulate the size of the text with javascript.
inline the SVG and control the size of the text with media queries (see below).
Add CSS to the SVG and use media queries there (see below).
use media queries to switch SVGs when the page gets small

Example of option 2: Using media queries with inlined SVGs

text {
  font-size: 10px;
}

@media (max-width: 400px) {
  text {
    font-size: 20px;
  }
}

<svg viewBox="0 0 100 100" width="100%" height="100%">
  <circle cx="50" cy="50" r="50" fill="orange"/>
  <text x="50" y="60" text-anchor="middle">Testing</text>
</svg>

Example of option 3: Using media queries in CSS in the SVGs

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
  <style>
    text {
      font-size: 10px;
    }

    @media (max-width: 400px) {
      text {
        font-size: 20px;
      }
    }
  </style>
  <circle cx="50" cy="50" r="50" fill="orange"/>
  <text x="50" y="60" text-anchor="middle">Testing</text>
</svg>

Could he not just use media queries to increase the font size? — Sam Willis, Dec 16 '15 at 09:53
fluid wrap possible https://css-tricks.com/svg-text-typographic-designs/ — animaacija, Apr 10 '17 at 21:54

NVRM · Answer 2 · 2020-02-18T13:44:43.027

This is possible using the foreignObject svg element in a html context and some adjustment of the viewBow.

On this demos, the text stay selectable:

.demo {
  overflow: auto;
  resize: both;
  border:1px black solid;
  width: 230px;
  height: 130px
}

.svgtext {
  font-size: 28rem;
  height:100%;
  width:100%
}

<div class="demo">

  <svg x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
    <foreignObject x="12" y="23" height="100%" width="100%">
      <div class"svgtext">
        Hello world!
       </div>
     </foreignObject>
  </svg>

</div>

Use preserveAspectRatio to control the resizing behavior:

.demo {
  overflow: auto;
  resize: both;
  border:1px black solid;
  width: 230px;
  height: 130px
}

.svgtext {
  font-size: 28rem;
  height:100%;
  width:100%
}

<div class="demo">

  <svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
    <foreignObject x="12" y="23" height="100%" width="100%">
      <div class"svgtext">
        Hello world!
       </div>
     </foreignObject>
  </svg>

</div>

SVG Responsive Text

2 Answers2

Linked