Render svg content within <svg> element with Vue.js

Question

I have a Vue.js component which builds the content of an svg element dynamically. For simplicity's sake, say the content is <circle cx="50" cy="50" r="60" />

The component does so by manipulating a data variable named svg:

  data() {
    return {
      svg: '<circle cx="50" cy="50" r="60" />',
      foobar: 'foobar',
    };
  },

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?

<template>
<svg v-html="svg"></svg>
</template>

will add the svg element which I don't want

wildhart · Accepted Answer · 2019-12-04 22:04:30Z

2

The easiest way is to put the v-html on a standard SVG <g> (group) element:

<template>
  <g v-html="svg"></g>
</template>

This doesn't render the 'raw' form of the html, but the <g> element shouldn't be a problem

edited Dec 4, 2019 at 22:04

answered Dec 4, 2019 at 21:55

wildhart

4493 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Render svg content within <svg> element with Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related