Html2canvas: SVG Element Getting Zoom

Created on 16 Feb 2018 · 15Comments · Source: niklasvh/html2canvas

Hi @niklasvh

On this site http://html2canvas.hertzen.com you have shown the demo of the screenshot, It's awesome and very helpful for me.
Issue:
I just make inspect element and add SVG element via inspecting and take the screenshot,
After taking a screenshot the SVG content getting ZOOM.
For better understanding please see this video

Is there any solution for this issue.

Thanks.

Source

vishal-px

Most helpful comment

@vishal-px thank for your solution, it works with some changes

We need to specify height and width only for SVG, not for all elements, so i move

node.setAttribute("width",$(node)[0].getBoundingClientRect().width);
node.setAttribute("height", $(node)[0].getBoundingClientRect().height);

to if case.

Also i removed call to $, because it's not defined there and i think it's not necessary.

So the final changes:

original

    if (node instanceof node.ownerDocument.defaultView.SVGSVGElement || node instanceof SVGSVGElement) {
        var s = new XMLSerializer();
        return resourceLoader.loadImage('data:image/svg+xml,' + encodeURIComponent(s.serializeToString(node)));
    }

changed

  if (node instanceof node.ownerDocument.defaultView.SVGSVGElement || node instanceof SVGSVGElement) {
        node.setAttribute("width", node.getBoundingClientRect().width);
        node.setAttribute("height", node.getBoundingClientRect().height);
        var s = new XMLSerializer();
        return resourceLoader.loadImage('data:image/svg+xml,' + encodeURIComponent(s.serializeToString(node)));
    }

P.S. To anyone who will be use this fix: don't forget to remove width: "0" and height: "0" from svg element

105th on 9 Jun 2018

👍2 🎉1

All 15 comments

@vishal-px What is the window.devicePixelRatio value of the browser you are testing with?

niklasvh on 16 Feb 2018

@niklasvh The window.devicePixelRatio is 1 on my browser.

vishal-px on 16 Feb 2018

Hi @niklasvh have you get any solution?

vishal-px on 22 Feb 2018

try to cleanup your svg with https://jakearchibald.github.io/svgomg/
SVG has many ways to define the same thing, that is often troublesome, each browser handles that differently.

My6UoT9 on 22 Feb 2018

Hi @My6UoT9,

I still getting SVG ZOOm, I tried to clean up my SVG and it's all perfect here is my SVG:

vishal-px on 23 Feb 2018

I am also getting the same issue. The SVG gets Zoomed .

wittywit on 26 Feb 2018

👍3

vishal-px on 28 Feb 2018

@niklasvh I'm also facing the same issue. Can you please look in this?

akkivaghasiya5 on 16 Mar 2018

Hi @niklasvh I just tested html2canvas library in MAC & iPhone it's working fine the SVG content not getting a zoom, But in Linux & Windows the SVG content getting zoom.

vishal-px on 26 Mar 2018

In html2canvas.js file replace this code may be it solve SVG Zoom Issue.

var getImage = function getImage(node, resourceLoader) {

node.setAttribute("width",$(node)[0].getBoundingClientRect().width);
node.setAttribute("height", $(node)[0].getBoundingClientRect().height);

if (node instanceof node.ownerDocument.defaultView.SVGSVGElement || node instanceof SVGSVGElement) {
    var s = new XMLSerializer();
    return resourceLoader.loadImage('data:image/svg+xml,' + encodeURIComponent(s.serializeToString(node)));
}

switch (node.tagName) {
    case 'IMG':
        // $FlowFixMe
        var img = node;
        return resourceLoader.loadImage(img.currentSrc || img.src);
    case 'CANVAS':
        // $FlowFixMe
        var canvas = node;
        return resourceLoader.loadCanvas(canvas);
    case 'IFRAME':
        var iframeKey = node.getAttribute('data-html2canvas-internal-iframe-key');
        if (iframeKey) {
            return iframeKey;
        }
        break;
  }
    return null; 
};

vishal-px on 10 Apr 2018

👍3

@vishal-px thanx a lot, worked for me!

DiyarS on 16 Apr 2018

👍1

@vishal-px thank for your solution, it works with some changes

We need to specify height and width only for SVG, not for all elements, so i move

node.setAttribute("width",$(node)[0].getBoundingClientRect().width);
node.setAttribute("height", $(node)[0].getBoundingClientRect().height);

to if case.

Also i removed call to $, because it's not defined there and i think it's not necessary.

So the final changes:

original

    if (node instanceof node.ownerDocument.defaultView.SVGSVGElement || node instanceof SVGSVGElement) {
        var s = new XMLSerializer();
        return resourceLoader.loadImage('data:image/svg+xml,' + encodeURIComponent(s.serializeToString(node)));
    }

changed

  if (node instanceof node.ownerDocument.defaultView.SVGSVGElement || node instanceof SVGSVGElement) {
        node.setAttribute("width", node.getBoundingClientRect().width);
        node.setAttribute("height", node.getBoundingClientRect().height);
        var s = new XMLSerializer();
        return resourceLoader.loadImage('data:image/svg+xml,' + encodeURIComponent(s.serializeToString(node)));
    }

P.S. To anyone who will be use this fix: don't forget to remove width: "0" and height: "0" from svg element

105th on 9 Jun 2018

👍2 🎉1

@105th This works for the position/scale of SVGs. I've been trying to set colors of the SVGs, did you also find any solution for the colors not being applied according to stylesheet?

venkat4541 on 4 Sep 2018

You should try applying styles inline, not in a separate css file, @venkat4541

johnkazer on 27 Nov 2018

I had the same problem with SVG zooming in the current version (1.0.0-rc3). Based on the suggested fixes above, it worked for me to simply add:

          img.setAttribute("width", img.getBoundingClientRect().width);
          img.setAttribute("height", img.getBoundingClientRect().height);

to SVGElementContainer before the call to encodeURIComponent, i.e.:

   var SVGElementContainer = /** @class */ (function (_super) {
        __extends(SVGElementContainer, _super);
        function SVGElementContainer(img) {
            var _this = _super.call(this, img) || this;
            img.setAttribute("width", img.getBoundingClientRect().width);
            img.setAttribute("height", img.getBoundingClientRect().height);
            var s = new XMLSerializer();
            _this.svg = "data:image/svg+xml," + encodeURIComponent(s.serializeToString(img));
            _this.intrinsicWidth = img.width.baseVal.value;
            _this.intrinsicHeight = img.height.baseVal.value;
            CacheStorage.getInstance().addImage(_this.svg);
            return _this;
        }
        return SVGElementContainer;
    }(ElementContainer));