SVG.js Text Fitting

by Zareh Geertjes

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.2.5/svg.js"></script>
<div id="drawing"></div>

CSS

@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
html,
body,
{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#drawing {
  padding: 0;
  margin: 0;
}

JavaScript

if (SVG.supported) {

        // create svg drawing paper
        var draw = SVG('drawing')

        // create image
        var image = draw.image('http://svgjs.com/images/background.jpg')
        image.size(600, 600).y(-150)

        // create text
        var text = draw.text('SVG.JS').move(300, 0)
        text.font({
          family: 'Source Sans Pro'
        , size: 80
        , anchor: 'middle'
        , leading: 1
        })

        // clip image with text
        image.clipWith(text)
        
      } else {
        alert('Your browser is rather old and does not support SVG. Upgrade to a new version to make use of this library.');
      }