How can I display SVG code as image in Vuejs?

Question

I have an API that is returning, among other things, an SVG image as ASCII text code. So I have that in a value. I am trying to display it as part of my page. It's just giving me a blank image.

This is the JSFiddle of my attempt: https://jsfiddle.net/c0p4ku78/

The essences of the code is effectively this:

<template>
<div id="app">
  <svg>{{circle}}</svg>
</div>
</template>
<script>
export default {
  name: "ImageShower",
  data: () {
    return {
      circle: `<?xml version="1.0" encoding="iso-8859-1"?> ... `
    }
  },
}
</script>

In the real code, circle comes from a web service and is not hard coded into the view component. But it looks more or less as is abbreviated here.

How can I display this SVG as an image?

Boussadjra Brahim · Accepted Answer · 2021-06-24 19:01:06Z

2

You could render it using v-html directive :

<template>
<div id="app">
  <div v-html="circle"></div>
</div>
</template>
<script>
export default {
  name: "ImageShower",
  data: () {
    return {
      circle: `<?xml version="1.0" encoding="iso-8859-1"?> ... `
    }
  },
}
</script>

answered Jun 24, 2021 at 19:01

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

How can I display SVG code as image in Vuejs?

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