Blank image is created from svg generated in angular

[UrsBeeli]

I have an Angular 7 application which generates SVG graphs based on dynamic data loaded from a backend. I want to include this generated SVG graph in PDF I am generating and hoped to do so by converting the SVG graph to an image using this library.

However, all I get is a blank/white image with the correct aspect ratio.

I have no idea where to start debugging this. I could understand if some of the colours would not match due to missing css styles, but I would have expected to at least see the drawn elements in black. I copied the created DOM element and attached it to this post. Might the angular-generated comments and/or extra fields be an issue? Or is my use of a viewbox the cause?

The graph shows correctly as part of the angular applilcataion.

I'd appreciate any feedback what I need to change.

This is the source element:
svg-graph.zip

This is the code I'm using to generate the URI:

    svg.svgAsPngUri(document.getElementById('pressure'), {}, (uri) => {
      console.log('pressure uri', uri);
    });

This is the generated URI: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABjCAYAAADq39mGAAAAkklEQVR4nO3BMQEAAADCoPVPbQ0PoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgCMD73IAAV8svh8AAAAASUVORK5CYII=

[exupero]

What's the output of svgAsDataUri? That will show you exactly what SVG code this library is using to generate the PNG, and should be more debuggable than the PNG, since you can put the data URI in its own tab and inspect the DOM.

[UrsBeeli]

I had to pass the result through DomSanitizer.bypassSecurityTrustResourceUrl() in order for it to not log a warning in my angular app. Optically, the result is the same (a white rectangle)

Having a quick look at the decoded content, one thing that I noticed is that apparently the negative offsets to my viewBox have been removed. Also, all x-ccordinates have been shifted by 10 and the viewBox is 10 wider. All the styles that I had in my angular.css files seem to have ended up in the result.

If I adjust the viewBox offset again, the image looks as it should. Is this a bug in the library? Or is that use case just not supported? I'm attaching both the base64 encoded and decoded output.

.
data-uri-base64.txt
decoded-svg.xml.txt

[exupero]

This lib does do some viewbox handling, so it's possibly a bug. I'd be happy to look at a PR that improves the situation. Specifically, take a look at what the viewbox attribute is set to on the cloned DOM element as well as the getDimension function:

saveSvgAsPng/src/saveSvgAsPng.js

Line 246 in ccfd5bb

clone.setAttribute('viewBox', [left, top, width, height].join(' '));

saveSvgAsPng/src/saveSvgAsPng.js

Lines 46 to 54 in ccfd5bb

	const getDimension = (el, clone, dim) => {
	const v =
	(el.viewBox && el.viewBox.baseVal && el.viewBox.baseVal[dim]) ||
	(clone.getAttribute(dim) !== null && !clone.getAttribute(dim).match(/%$/) && parseInt(clone.getAttribute(dim))) ||
	el.getBoundingClientRect()[dim] ||
	parseInt(clone.style[dim]) ||
	parseInt(window.getComputedStyle(el).getPropertyValue(dim));
	return typeof v === 'undefined' || v === null || isNaN(parseFloat(v)) ? 0 : v;
	};

[UrsBeeli]

Thanks, I'll need to find some time to look at the library, to better understand how it works and try to see if I can come up with a PR (not sure if I'm up to it :-)

[UrsBeeli]

I've tried debugging the library as part of my angular app in the hopes of better understanding what happens and what a fix might look like, but sadly have been unable to get the breakpoints to trigger. This seems to be way beyond my javascript abilities to handle. Sorry, but I don't think I'll be able to provide a pull request with a fix. If anyone else sees how to solve it, I would of course greatly appreciate it.