Convert an SVG to a PNG image is missing the fill image pattern

Question

I am trying to convert an SVG to a PNG image. For this reason I use the npm package "dom-to-image". This and all other packages I tried (e.g. html2canvas) do not show a pattern/image in the polygon.

Here is a small example: https://stackblitz.com/edit/angular-ivy-h5e3aw?file=src/app/app.component.html (External and internal Images produce the same result.)

How can I convert my complete SVG to a PNG?

Thank you very much.

You should be able to 1. draw SVG to canvas 2. save canvas as PNG — , May 31 '21 at 19:21
Yes I am. I have done that. The problem is a picture as a pattern. (https://www.w3.org/TR/SVG2/pservers.html#PatternElement, https://www.w3.org/TR/SVG2/embedded.html#ImageElement) — mlauth, Jun 01 '21 at 06:14

score 0 · Accepted Answer · answered Jun 01 '21 at 08:14

0

Convert your image link to a data URL and it will work.

href="data:image/png;base64,iVBO ...snip... gg=="

StackBlitz demo

answered Jun 01 '21 at 08:14

Paul LeBeau

97,474
9
154
181

Thank you very much. Finally, I used an SVG graphic in a to bypass the conversion. – mlauth Jun 01 '21 at 15:13

Convert an SVG to a PNG image is missing the fill image pattern

1 Answers1