根据图像的路径将SVG转换为PNG

Question

Is it possible to convert an SVG image to the PNG format in an angular project?

I found this library save-svg-as-png , but it requires the id of an svg canvas. Whereas in my code, I am displaying the SVG image with the img tag:

<img src="path/to/mysvg/mysvg.svg">

Is there a way to access the inline svg that is inside the image, or another library where it is possible to provide the url of the svg image instead of the id of the canvas?

PS: I found some libraries like svg2png and convert-svg-to-png that takes the path of the svg as a parameter, but they both depend on nodejs.

Answer 1

Working with angular-svg-icon saved the day.

In my HTML, I displayed my svg image this way:

<svg-icon #mySVGImg src="path/to/mysvg/mysvg.svg" [svgStyle]="{ 'width.px':140, 'height.px':140 }"></svg-icon>

and in my typescript, I called the saveSvgAsPng method like this:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as svg from 'save-svg-as-png';
// Other imports

@Component({
  //....
})
export class MyTSPage implements OnInit {

    @ViewChild("mySVGImg", { read: ElementRef }) mySVGImg: ElementRef;

    myConvertMethod() {
        svg.saveSvgAsPng(this.mySVGImg.nativeElement.querySelector("svg"), "pngtest.png");
    }
}

Calling myConvertMethod method saved a new png file with the name pngtest.png