SVG Scalable Text - IE

index.html

<link href='https://fonts.googleapis.com/css?family=Quicksand:300,400,700|Raleway:400,100,200,300,500,600,700,800,900|Playfair+Display+SC:400italic,700italic,400,700,900' rel='stylesheet' type='text/css'>

<div class="wrapper">
  <div class="svg-wrapper"><svg><text class="upper sans">You have to</text></svg></div>
    <div class="svg-wrapper"><svg><text class="upper sans bold">say no</text></svg></div>
    <div class="svg-wrapper"><svg><text class="upper sans">to a lot of</text></svg></div>
    <div class="svg-wrapper"><svg><text class="upper serif">good things</text></svg></div>
    <div class="svg-wrapper"><svg><text class="upper sans">in order to be able to</text></svg></div>
    <div class="svg-wrapper"><svg><text class="upper sans bold">say yes</text></svg></div>
    <div class="svg-wrapper"><svg><text class="upper sans">to a lot of</text></svg></div>
    <div class="svg-wrapper"><svg><text class="upper serif">great things</text></svg></div>
</div>

script.js

setTimeout(function() {
  $('.svg-wrapper').each(function() {
    var wrapper = $(this);
    var svg = wrapper.find('svg');
    var text = svg.find('text');
    var bbox = text.get(0).getBBox();

    svg.get(0).setAttribute('viewBox', 
                            [bbox.x,
                             bbox.y,
                             bbox.width,
                             bbox.height].join(' '));
    wrapper.css('padding-top', (bbox.height/bbox.width)*100+'%');
  });
}, 100);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.less

body {
  background-color: oldlace;
}

.svg-wrapper {
  height: 0;
  width: 100%;
  padding-top: 50px;
  position: relative;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  //height: 10px;
  max-height: 100%;
  //outline: 1px solid tomato;
  text {
    fill: #222;
  }
  .sans {
    font-family: 'Raleway';
    font-weight: 200;
  }
  .serif {
    font-family: 'Playfair Display SC';
    font-weight: 700;
  }
  .bold {
    font-weight: 900;
  }
  .upper {
    text-transform: uppercase;
  }
}

.wrapper {
  margin: 30px auto;
  width: 200px;
  border: 10px solid #222;
  padding: 20px;
}

svg-scalable-text-ie.markdown

SVG Scalable Text - IE

An attempt to make text scale (fit the width) to its wrapping container. This version uses the intrinsic aspect ratio fix.

Recreation of SeanWes lettering piece: http://seanwes.com/2013/on-saying-no/

More info here: http://1pxsolidtomato.com/2014/10/08/quest-for-scalable-svg-text/

A Pen by Pete Corey on CodePen.

License.