title: How to use preserveAspectRatio on SVG <symbol> using SVG.JS
body: <p>I recently found out about using 'preserveAspectRatio' on symbols in SVGs, which I will be honest was a gamechanger for they type of designs I have been trying to accomplish. However, I can't seem to get it to work using SVG.JS.</p>
  
  <hr>
  
  <p><a href="https://jsfiddle.net/timiland/e72kqLy5/10/" rel="nofollow noreferrer">Link to JS Fiddle</a> </p>
  
  <pre><code>/* canvas created */
  var draw = SVG('maindiv').viewbox('0 0 500 500').attr({ 'preserveAspectRatio': 'none' })
  
  /* polgon created */
  var polyg = draw.polygon('0,150 500,150 500,500 0,500').fill('black')
  
  /* symbol created and inserted, with functioning viewbox but preserveAspect ratio not working */
  var txt = draw.symbol().viewbox('0 0 500 500').attr({ 'preserveAspectRatio': 'xMinYMin meet' })
  txt.text('Some Text').font({family: 'Arial',weight: 'bold',size: 30,fill: '#f06'})
  var title = draw.use(txt)
  
  /* clickable animation */
  
  polyg.click(function() {
     this.animate().attr({'points':'0,350 500,350 500,500 0,500'})
  })
  </code></pre>
  
  <hr>
  
  <p>If you take a look at that code in the link, the black polygon correctly extends the entire viewport, but the text which is in fact a symbol, should <strong>NOT</strong> scale with the viewport. Go ahead and resize your window and you will see that the text resizes itself.</p>
  
  <p>Any ideas? There's a lack of documentation on how to do this using SVG.JS so I'm sure this will help a few people out there who are trying to acheive this same challenge of having multiple elements in the same SVG canvas, some responsive to the viewport and some static.</p>