download the svg file from DOM or from Object element

Question

I want to download/save .svg from the DOM. I have embedded my svg file in Object element and updating dynamically some of the elements inside SVG and styling it in my Angular 7 application.

<object id="svg1" data="assets/10026_019.svg" type="image/svg+xml" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></object>
     <button (click)="downloadSVG()">Download SVG file</button>

After updating SVG I need to download/save the entire svg contnet in .svg file. or any other alternate options availble for to download updated svg file?

score 0 · Answer 1 · answered May 21 '19 at 17:20

I have done myself, but not sure whether this is correct approach. Below code works fine. I have installed file saver package from npm

npm install file-saver ngx-filesaver --save

In app.module.ts we have to import and add it in imports array

import { FileSaverModule } from 'ngx-filesaver';
imports: [  
    FileSaverModule
  ]

and then in typescript we have to import filesaver like below

import { FileSaverService } from "ngx-filesaver";

from constructor we have to initialize the service

 constructor(private fileSaverService: FileSaverService){}

and then download function

downloadSvg(){    
    let obj:any=document.getElementById('svg1');
    let svgBody:any=obj.contentDocument.querySelector("svg").innerHTML;
    let svgContent="<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"4239.54 906.94 3137 1984\">"+svgBody+"</svg>";
    let blob=new Blob([svgContent]);    
    this.fileSaverService.save(this.blob,'filename.svg');

  }

download the svg file from DOM or from Object element

1 Answers1