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.

Shifra

Have you tried not specifying text sizes in pixels? – Displacement

i have in the CSS, or do you mean on the <text> tag? – Shifra

Normally the text will scale with everything else in the SVG (example). You seem to have disabled this behaviour somehow. I'm just trying to figure out how. – Displacement

if it helps, the SVG is at the bottom of the page (the long infographic) 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. – Shifra

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. – Displacement

Answer 1

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

1. inline the SVG and manipulate the size of the text with javascript.

2. inline the SVG and control the size of the text with media queries (see below).

3. Add CSS to the SVG and use media queries there (see below).

4. 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>

Chessboard

Could he not just use media queries to increase the font size? – Megillah

fluid wrap possible css-tricks.com/svg-text-typographic-designs – Vale

Answer 2

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>

Bascule