Retrieve the svg file either from the DOM or the Object element

Is there a way for me to save or download a .svg file from the DOM? I have integrated my svg file into an Object element and am dynamically updating certain elements within the SVG and customizing 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>

Once I make changes to the SVG, I would like to be able to save or download the entire content as a .svg file. Are there any other alternatives available for downloading the updated SVG file?

typescriptsvgangular7svgpanzoom

Answer №1

I took the initiative to resolve this myself, although I am uncertain if my approach is entirely correct. The following code seems to be functioning without any issues. I have obtained and installed the file saver package from npm

npm install file-saver ngx-filesaver --save

Within app.module.ts, we must import and include it in the imports array

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

Additionally, in our typescript file, we need to import filesaver as shown below

import { FileSaverService } from "ngx-filesaver";

In the constructor, remember to initialize the service

 constructor(private fileSaverService: FileSaverService){}

Lastly, implement the 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');

  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Overriding a generic property in Typescript allows for a more

I'm troubleshooting an issue with my code: class Base<T> {} class Test { prop: Base<any>; createProp<T>() { this.prop = new Base<T>(); } } const test = new Test(); test.createProp<{ a: number }>(); test.pr ...

typescript

Enhancing systemjs-builder with DefinitelyTyped

Is there a dedicated TypeScript definition file for systemjs-builder available? https://github.com/systemjs/builder I encountered an issue where the systemjs.d.ts file does not seem to cover it, leading to a "cannot find module" error when trying to impor ...

node.jstypescriptsystemjsdefinitelytyped

Step-by-step guide on importing `block-ui`, `spectrum-colorpicker`, and `sass.js` libraries in a TypeScript project

I have been utilizing various plugins such as block-ui, spectrum-colorpicker, sass.js, etc., in my Angular 2 project written in TypeScript. Currently, I am loading these plugins directly in the index.html file. However, I would like to import them and onl ...

typescriptangular

React Typescript does not support the use of React-Router

I'm currently working on a React app that utilizes Typescript. The React version is set to "react": "^16.9.0", and the React-Router version is "react-router-dom": "^5.1.2". Within my App.tsx file, the structure looks like this: const App: React.FC ...

reactjstypescriptreact-routerreact-router-v4

Excluding properties based on type in Typescript using the Omit or Exclude utility types

I am looking to create a new type that selectively inherits properties from a parent type based on the data types of those properties. For instance, I aim to define a Post type that comprises only string values. type Post = { id: string; title: string ...

typescript

Tips for providing certificate key file during the deployment of a cloud function?

Within my TypeScript file, the following code is present: import * as admin from 'firebase-admin' import * as functions from 'firebase-functions' const serviceAccountKey = "serviceAccountKey.json" const databaseURL = "https://blahblah. ...

typescriptfirebasegoogle-cloud-functions

What is the best way to implement React ErrorBoundary in conjunction with redux-observable?

When dealing with asynchronous code, React Error Boundaries may not function as expected. In my case, I am using redux-observable and rxjs to retrieve data from an API. To handle errors, I am trying to utilize the catchError function provided by rxjs. I ...

reactjstypescriptapirxjsredux-observable

Issue encountered with Next.js 13.4 and NextAuth: A Type Error stating that 'AuthOptions' is not compatible with type 'never'

Currently, I am in the process of developing a Next.js 13.4 project and attempting to configure NextAuth using the app/router. Unfortunately, I have encountered a type error that I am struggling to troubleshoot. Below is my route.ts file: import NextAuth, ...

typescriptnext.jstypeerrornext-auth

Guide to implementing scheduled tasks in a Node.js API using Express

Currently, my Node API has multiple endpoints, and while they work well for the most part, there is one endpoint that struggles with processing large requests taking up to 1 hour. To handle this, I am considering implementing a system where instead of wait ...

node.jstypescriptapi

standards for matching patterns (such as .gitignore)

Throughout my experience, I have utilized various tools designed to search a codebase for specific files and then carry out operations on those files. One example is test libraries that identify all the necessary files for execution. Another common tool is ...

javascripttypescriptfilesystems

Adding additional properties to Material UI shadows in Typescript is a simple process that can enhance the visual

https://i.stack.imgur.com/9aI0F.pngI'm currently attempting to modify the Material UI types for shadows, but encountering the following error when implementing it in my code. There is no element at index 25 in the tuple type Shadows of length 25. I&a ...

reactjstypescriptmaterial-ui

The functionality to subscribe in ts(6385) has been marked as

I am encountering an error message regarding the deprecation of the subscribe function in my code. The issue seems to be with the second part of the code for the getStarwarsHeroes function, where the .subscribe method is being deprecated. import { Injectab ...

angulartypescriptapiionic-frameworkrxjs

Tips on customizing the Nuxt Route Middleware using Typescript

I am working on creating a route middleware in TypeScript that will validate the request.meta.auth field from the request object. I want to ensure this field has autocomplete options of 'user' and 'guest': export default defineNuxtRoute ...

typescriptvue.jsnuxt.js

When using VS Code, custom.d.ts will only be recognized if the file is currently open in the

I have created some custom Typescript declarations in a custom.d.ts file. When I have this file opened in VS Code, everything works correctly and the types are recognized. However, when I close the file, VS Code does not recognize these definitions, leadin ...

typescriptvisual-studio-code

Retrieve the data from the mat-checkbox

My goal is to retrieve a value from a mat-checkbox, but the issue is that we only get boolean expression instead of the string value. Here's an example snippet of what I'm looking for: <mat-checkbox formControlName="cb2" <strong&g ...

angulartypescript

Concealing a VueJs component on specific pages

How can I hide certain components (AppBar & NavigationDrawer) on specific routes in my App.vue, such as /login? I tried including the following code in my NavigationDrawer.vue file, but it disables the component on all routes: <v-navigation-drawer ...

typescriptvue.jsvuetify.js

Is there a way to view the console in a released apk?

Currently working with Ionic and in need of exporting a release APK to be able to monitor the console for any potential issues. I am aware that using 'ionic cordova run --device' allows me to view the console, but it only shows a debug APK. Is t ...

typescriptcordovaionic-framework

Having trouble resolving all parameters for the SiteNotificationComponent: (?)

I encountered an issue while attempting to append a component to the DOM. The error message displayed was "Can't resolve all parameters for SiteNotificationComponent: (?).at syntaxError." My goal was to insert HTML content by invoking showNotificatio ...

angulartypescriptangular5

What could be causing the svg to not be visible inside the div?

I am struggling to display an SVG element within a div as it is not visible at all. Can someone help me make the SVG visible in the div? Here is a link to the code: http://codepen.io/helloworld/pen/HjkhK <div style="height:100px;background:yellow;"> ...

htmlcsssvg

Sending data between components in Angular can be achieved by using various methods. One common approach is to utilize

I am encountering an issue with a component named customers.component Below is the code from the customers.component.ts file: @Component({ selector: 'app-customer', templateUrl: './customer.component.html', styleUrls: ['./cu ...

htmlangulartypescript