[Vuejs]-How to scale SVG without rewriting inner source code?

by

0👍

✅

There are various ways to do it.

You could use v-html. That’s a general-purpose way of injecting HTML strings into Vue templates. You would need to be sure that the source string is safe though, otherwise you’ll be leaving yourself open to injection attacks.

Documentation: https://v2.vuejs.org/v2/api/#v-html

Another approach might be to use a data: URL, either as a background-image or as the src of an <img>.

Documentation: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

The example below illustrates both techniques:

const DrawPicture = {
  template: `
    <div>
      <div v-html="svg"></div>
      <img :src="'data:image/svg+xml;utf8,' + encodeURIComponent(svg)">
    </div>
  `,
  
  props: ['svg']
}

new Vue({
  el: '#app',
  
  components: {
    DrawPicture
  },
  
  data () {
    return {
      circle: `
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80">
          <circle cx="40" cy="40" r="40" fill="#f00" />
        </svg>
      `
    }
  }
})
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <draw-picture :svg="circle"></draw-picture>
</div>

For the data: URL I’ve used encodeURIComponent to ensure the URL is escaped correctly. It is also possible to use base64 with btoa instead.

Leave a comment