piqnt / svgexport

SVG to PNG/JPEG command-line tool and Node.js module
927 stars 85 forks source link

Relative and `file://` imports with <image src> don't work #104

Open kleinesfilmroellchen opened 3 years ago

kleinesfilmroellchen commented 3 years ago

svgexport creates a pseudo-page on about:blank and then dumps the previously modified and grabbed SVG contents in there, in order to get a proper HTML with a screenshottable div. However, this means that (1) the new page is at an isolated location, and (2) the page is not loaded with the file:// protocol like local SVG files are usually.

This leads to two problems with SVGs that use the <image> tag to import other SVGs or images.

A fix would be to create an empty HTML file in the current location with a random name (and error out if it exists), then navigate to that. This would both allow the file:// URLs as well as relative imports. The file should of course be deleted before the program ends. I have had success with a workaround that changes render.js line 162 to use a local "sacrificial" HTML file.

To be clear: this is an issue with the way svgexport uses puppeteer, not an issue with puppeteer itself. All of this is expected Chromium behavior.

mlantin commented 1 year ago

I've come up against this issue too. Thank you for the suggested fix. I also got around it by using a "use" tag and an internal blob of image data. Definitely not ideal but it worked.