title: Render svg content within <svg> element with Vue.js
body: <p>I have a Vue.js component which builds the content of an svg element dynamically. For simplicity's sake, say the content is <code>&lt;circle cx="50" cy="50" r="60" /&gt;</code></p>
  
  <p>The component does so by manipulating a data variable named <code>svg</code>:</p>
  
  <pre><code>  data() {
      return {
        svg: '&lt;circle cx="50" cy="50" r="60" /&gt;',
        foobar: 'foobar',
      };
    },
  </code></pre>
  
  <p>I have some specific svg element customizations (i.e. width, height, viewBox) in the parent component. How do I render this out in the template in a "raw" form?</p>
  
  <pre><code>&lt;template&gt;
  &lt;svg v-html="svg"&gt;&lt;/svg&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>will add the svg element which I don't want</p>