CODEWITHSUNDEEP
javascriptsvgvue.js
Philipp Krenz
Philipp Krenz

Reputation: 61

Dynamically load svg graphics in vue

I have an Object containing multiple svgs as such 

"svgs" :  {
  "1" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"800\" height=\"600\" viewBox=\"0 0 800 600\">\n<path d=\"M93.249,600 L93.249,302.835 L93.2873,301.059 L93.4069,299.224 L93.6141,297.334 L93.9129,295.396 L94.3055,293.418 L94.7903,291.408 L95.3638,289.378 L96.0184,287.336 L96.7448,285.294 L97.5303,283.263 L99.2239,279.276 L100.984,275.448 L102.704,271.837 L192.711,0 L540.72,1.13687e-13 L540.72,116.694 L673.545,116.694 A33.2061 33.2061 0 0 1 706.751,149.901 L706.751,195.666 A33.2061 33.2061 0 0 1 673.545,228.872 L540.72,228.872 L540.72,381.145 L673.545,381.145 A33.2061 33.2061 0 0 1 706.751,414.352 L706.751,465.516 A33.2061 33.2061 0 0 1 673.545,498.722 L540.72,498.722 L540.72,600 L93.249,600 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"301.888\" cy=\"215.684\" r=\"16.9664\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"423.965\" cy=\"132.045\" r=\"36.684\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"357.934\" cy=\"93.8932\" r=\"22.3983\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"275.762\" cy=\"132.045\" r=\"26.1256\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"93.249\" y1=\"287.336\" x2=\"540.72\" y2=\"287.336\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M285.075,213.403 A16.9664 16.9664 0 0 0 301.888,232.65\" style=\"stroke:blue;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M301.888,232.65 A16.9664 16.9664 0 0 0 318.7,213.403\" style=\"stroke:blue;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n</svg>\n",
  "2" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"800\" height=\"600\" viewBox=\"0 0 800 600\">\n<path d=\"M198.7,406.626 L199.716,403.388 L194.746,401.829 L198.7,406.626 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M800,464.441 L516.812,102.143 L400.037,193.269 L402.375,195.404 L398.631,195.345 L397.247,196.246 L395.84,197.203 L394.458,198.194 L393.149,199.189 L391.713,200.347 L390.312,201.549 L388.828,204.699 L387.141,207.018 L387.459,204.167 L388.488,200.842 L388.346,199.639 L388.172,198.37 L387.962,197.052 L387.716,195.711 L387.441,194.375 L387.144,193.072 L386.529,190.651 L383.724,188.169 L395.446,188.169 L389.489,152.507 L370.798,40.6673 L232.58,63.9993 L257.127,210.122 L260.294,209.005 L258.451,212.271 L258.582,213.892 L258.751,215.558 L258.961,217.218 L259.209,218.819 L259.555,220.684 L259.958,222.538 L262.082,225.332 L263.282,227.78 L261.021,226.257 L258.543,223.772 L257.408,223.35 L256.199,222.926 L254.929,222.513 L253.624,222.121 L252.309,221.759 L251.013,221.431 L248.577,220.88 L245.09,222.261 L250.434,211.89 L215.968,201.012 L107.776,166.876 L0,510.498 L147.024,556.611 L193.896,407.167 L192.752,406.808 L194.804,400.263 L205.207,403.525 L204.755,404.968 L201.984,404.099 L200.968,407.338 L202.864,411.678 L301.564,531.417 L500.993,348.197 L501.136,348.049 L496.871,342.593 L505.461,335.878 L512.429,344.793 L511.484,345.532 L678.6,559.333 L800,464.441 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M589.294,338.245 A21.7616 21.7616 0 0 1 623.584,311.442 L676.952,379.717 A21.7616 21.7616 0 0 1 642.661,406.52 L589.294,338.245 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M581.731,385.587 L619.543,433.961 L614.142,438.183 L576.33,389.809 L581.731,385.587 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M718.368,417.559 L722.59,422.96 L676.971,458.618 L672.749,453.217 L718.368,417.559 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"501.448\" cy=\"206.611\" r=\"54.2199\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"390.997\" y1=\"194.002\" x2=\"507.529\" y2=\"343.089\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"253.818\" y1=\"218.314\" x2=\"396.476\" y2=\"194.232\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"194.949\" y1=\"409.195\" x2=\"256.262\" y2=\"213.71\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"627.775\" y1=\"244.105\" x2=\"506.375\" y2=\"338.996\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"195.25\" y1=\"402.852\" x2=\"48.2261\" y2=\"356.738\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n</svg>\n",                
  }

and an object containing multiple data objects, that might reference one of the svgs via an associated id

"articles" : [
  {
    "name" : "name0",
    "id" : "1"
  },
  {
    "name" : "name1",
    "id" : "0" 
  }

],

my main app should now create a component for each of those articles and render the associated svg if it exists.

var app =
 new Vue(
  {
    el : "#app",
    data :
    {
       "projectName":"PJ",
       "articles" : [
        {
          "name" : "name0",
          "id" : "1"
        },
        {
          "name" : "name1",
          "id" : "0" 
        }
      ],
      "svgs" :  {
        "1" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"800\" height=\"600\" viewBox=\"0 0 800 600\">\n<path d=\"M93.249,600 L93.249,302.835 L93.2873,301.059 L93.4069,299.224 L93.6141,297.334 L93.9129,295.396 L94.3055,293.418 L94.7903,291.408 L95.3638,289.378 L96.0184,287.336 L96.7448,285.294 L97.5303,283.263 L99.2239,279.276 L100.984,275.448 L102.704,271.837 L192.711,0 L540.72,1.13687e-13 L540.72,116.694 L673.545,116.694 A33.2061 33.2061 0 0 1 706.751,149.901 L706.751,195.666 A33.2061 33.2061 0 0 1 673.545,228.872 L540.72,228.872 L540.72,381.145 L673.545,381.145 A33.2061 33.2061 0 0 1 706.751,414.352 L706.751,465.516 A33.2061 33.2061 0 0 1 673.545,498.722 L540.72,498.722 L540.72,600 L93.249,600 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"301.888\" cy=\"215.684\" r=\"16.9664\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"423.965\" cy=\"132.045\" r=\"36.684\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"357.934\" cy=\"93.8932\" r=\"22.3983\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"275.762\" cy=\"132.045\" r=\"26.1256\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"93.249\" y1=\"287.336\" x2=\"540.72\" y2=\"287.336\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M285.075,213.403 A16.9664 16.9664 0 0 0 301.888,232.65\" style=\"stroke:blue;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M301.888,232.65 A16.9664 16.9664 0 0 0 318.7,213.403\" style=\"stroke:blue;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n</svg>\n",
        "2" : "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"800\" height=\"600\" viewBox=\"0 0 800 600\">\n<path d=\"M198.7,406.626 L199.716,403.388 L194.746,401.829 L198.7,406.626 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M800,464.441 L516.812,102.143 L400.037,193.269 L402.375,195.404 L398.631,195.345 L397.247,196.246 L395.84,197.203 L394.458,198.194 L393.149,199.189 L391.713,200.347 L390.312,201.549 L388.828,204.699 L387.141,207.018 L387.459,204.167 L388.488,200.842 L388.346,199.639 L388.172,198.37 L387.962,197.052 L387.716,195.711 L387.441,194.375 L387.144,193.072 L386.529,190.651 L383.724,188.169 L395.446,188.169 L389.489,152.507 L370.798,40.6673 L232.58,63.9993 L257.127,210.122 L260.294,209.005 L258.451,212.271 L258.582,213.892 L258.751,215.558 L258.961,217.218 L259.209,218.819 L259.555,220.684 L259.958,222.538 L262.082,225.332 L263.282,227.78 L261.021,226.257 L258.543,223.772 L257.408,223.35 L256.199,222.926 L254.929,222.513 L253.624,222.121 L252.309,221.759 L251.013,221.431 L248.577,220.88 L245.09,222.261 L250.434,211.89 L215.968,201.012 L107.776,166.876 L0,510.498 L147.024,556.611 L193.896,407.167 L192.752,406.808 L194.804,400.263 L205.207,403.525 L204.755,404.968 L201.984,404.099 L200.968,407.338 L202.864,411.678 L301.564,531.417 L500.993,348.197 L501.136,348.049 L496.871,342.593 L505.461,335.878 L512.429,344.793 L511.484,345.532 L678.6,559.333 L800,464.441 Z\" style=\"stroke:black;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M589.294,338.245 A21.7616 21.7616 0 0 1 623.584,311.442 L676.952,379.717 A21.7616 21.7616 0 0 1 642.661,406.52 L589.294,338.245 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M581.731,385.587 L619.543,433.961 L614.142,438.183 L576.33,389.809 L581.731,385.587 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<path d=\"M718.368,417.559 L722.59,422.96 L676.971,458.618 L672.749,453.217 L718.368,417.559 Z\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<circle cx=\"501.448\" cy=\"206.611\" r=\"54.2199\" style=\"stroke:red;stroke-width:2;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"390.997\" y1=\"194.002\" x2=\"507.529\" y2=\"343.089\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"253.818\" y1=\"218.314\" x2=\"396.476\" y2=\"194.232\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"194.949\" y1=\"409.195\" x2=\"256.262\" y2=\"213.71\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"627.775\" y1=\"244.105\" x2=\"506.375\" y2=\"338.996\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n<line x1=\"195.25\" y1=\"402.852\" x2=\"48.2261\" y2=\"356.738\" style=\"stroke:lime;stroke-width:2;stroke-dasharray:10,3;fill:none;font-size:16px;font-family:sans-serif;\"/>\n</svg>\n",                
      }
  }
)

where an article is defined the following way

Vue.component("project-article", {
 props : {article : {required : true}, svgs : {required : true}},
 template : `
  <div>
    <div>
      {{ image() }}
    </div>
    {{ article.name }}
  </div>
`,
 methods : {
  nodeId() { return this.article.id },
  svg() { return this.svgs[this.nodeId()] },
  image() { return this.svg().substring(this.svg().indexOf("<svg")); }
 }
})

if i now try to load the articles in my html

<head>
 <title>GraphDialog</title>
 <script src="https://unpkg.com/vue"></script>
</head>
<body>
 <div id="app">
  {{ projectName }}
   <ul>
    <li v-for="article in articles">
     <project-article :article="article" :svgs="svgs"></project-article>
    </li>
   </ul>
 </div>
</body>

the svg are rendered as text rather than as a graphic. How do i get the svgs to be rendered as graphics?
If i replace the {{image()}} by the actual code that is displayed in the browser, it works

Upvotes: 3

Views: 1508

Answers (1)

Philipp Krenz
Philipp Krenz

Reputation: 61

Checking Embed SVG Markup inside vue-component, using Raw-Loader helped me to find out that in order to load the svg I simply had to replace 

{{image}}

by 

<div v-html="image()"/>

Upvotes: 3

Related Questions