I prepared two stackblitz examples for html2canvas. In the first svg element is a little smaller and it works in Firefox:
https://stackblitz.com/edit/angular-ivy-4vzrey?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
In the second svg is a little larger and html2convas generates an error:
Error loading svg data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20_ngcontent-mid-c43%3D%22%22%20id%3D%22svg-container%22%20xmlns%3Axhtml%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20viewBox%3D%220%200%20347.2833251953125%20670.216674804
Here is the second stackblitz eg (the only difference is the second svg has a little more g elements):
https://stackblitz.com/edit/angular-ivy-ebc3jn?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
Any ideas how to overcome this?
Related
I need to fetch a lot of SVG documents from AWS and I use vue.js to render the content of the SVG. This works fine in Chrome, Firefox, Edge and Safari but fails without errors in IE11.
I have created jsFiddle to illustrate my issue: https://jsfiddle.net/dotnetCarpenter/pp7bcLkk/
The raw SVG file can be viewed here and is rendered in IE11: https://napp-siesta-test.s3-eu-west-1.amazonaws.com/siesta-demo-mwqxbrqx/uploads/1506688653629/viewer/472.svg
Since I need to set v-show and class on the SVG, I have a <svg> container in my template that I add the SVG string to via v-html.
I strip the <svg> element from the received SVG document and also resolve the relative paths to fonts, since I'm in-lining the SVG.
As discussed in this issue v-html uses innerHTML which has no effect on SVG element in IE.
Luckily in VueJS 2.6 there was a workaround added.
So for you there are two possible fixes: upgrade VueJS version or use custom render function and construct VNodes for SVG content manually.
I am having issues with inconsistent SVG rendering of what seems to be a basic file between browsers. I need to find a way to make this SVG cross-browser, but can't seem to pinpoint the problem. Firefox 23 and Inkscape issues go away if the stop-color statements for the gradients are moved from the CSS to style = style="stop-color:#XXXXXX". Sadly, this is not an option because of the way this file will be used. This file validates on the W3C validator, and seems to only use simple features, but rendering is inconsistent. What is wrong?
I am not allowed to post images yet, so here is a link to an image showing the problem:
http://www.flickr.com/photos/95652985#N07/9754841655/lightbox/
SVG Source is here:
https://dl.dropboxusercontent.com/u/11366066/fire.svg
Thanks for help with this baffling problem!
I think your coordinates x1,y1, etc (for instance
<linearGradient id="id1" gradientUnits="userSpaceOnUse" xlink:href="#id0"
x1="32093.5" y1="4749.35" x2="37189.8" y2="4749.35">
)
could exceed the user space bounding box, thus got wrapped in Chrome, and clipped in Firefox, etc (also my Ubuntu SVG viewer get the same results as Firefox).
A bit of philosophy: SVG, like HTML, is required to be tolerant in rendering, then is common to have different behaviours where the 'simpler' specification is extendend (actually SVG is far from simple)
Edit: my SVG viewer reports as dimensions: 4252 x 2835 pixels 74,2 kB 34 %. Even if we multiply 4252 * 3 we are far below the x1,x2 values....
I am using a drop shadow filter inside an SVG file that is embedded using an img tag. On my MacBook, it looks fine in Safari. However, in mobile Safari, the graphic gets really pixelated and loses all it's sharpness. When the filter is not applied, the SVG renders fine. Is there any way to fix that besides to pass on the filter?
This problem is still relevant in 2018, and I've found a solution. You can duplicate the element you give the filter to, place it below the actual element, and keep filter only on it, without any filter on the element. This way, Safari and other browsers will only rasterise the element with the shadow when resizing, however it will be hidden by the sharp-looking vector element. You can see examples and read more here.
Unfortunately I tried all the suggested workarounds for this, none of them worked, the only thing that worked for me was putting the svg inline, not as an img tag.
Surprised this issue appears to have been around for so long!
You should try explicitly setting the "filterRes" attribute of the filter to a value that matches retina displays.
It's 2021 and it's still relevant. I found a workaround that worked for me: You can enlarge the svg and then use a css-transform to scale it back:
.section_logo img {
height: 500%;
transform-origin: top left;
transform: scale(0.2);
}
I am using html2canvas to create a 'screenshot' of a HTML page that contains SVG.
Everything looks good, except the element.
I know that it should be possible to render SVG in Canvas; PhantomJS, fabric.js and CanVG do it.
Is this something that html2canvas does not support? Or am I doing something wrong, and this should just work?
If this has not been implemented, what is the best way to extend html2canvas (using canvg)?
Capturing SVG images works by transforming them into canvas, using canvg. Include both javascript files as indicated on that page. Then the easiest way to do this is:
<body onload="canvg()">
See the parameterless call example.
When all SVG images have been converted, html2canvas works flawlessly.
Of course, all SVG images will be converted to canvases, but I did not see a difference.
Has anyone in this vast space has ever had the luck to successfully create a PDF with an embedded SVG on an HTML? I've been receiving segmentation fault all the time.
Or perhaps is there any other way to embed an SVG into an HTML file and then export it to PDF instead of wkhtmltopdf?
I had similar problem. Seems like javascript embedded in SVG image can cause segmentation fault.
I was generating SVG graphs using pygal Python module. To successfully generate PDF from HTML with SVG graphs I had to do several things:
Remove reference to javascript. (In case of pygal add js=() key to a graph constructor).
Specify image size in svg tag, like
<svg ... width="300" height="200">
(In case of pygal use explicit_size keywoard)
Embed SVG image into img tag in base64 encoded form, like
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0...">
I was using 11th version of wkhtmltopdf.
If this fix doesn't work for others, here's what worked for me with chartist.js, and wkhtmltopdf 0.12.2.1 under Ubuntu 64. (Credit to Panokev)
Add this to your javascript before all other JS.
{
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
Definitively set width style for chart div, for example - style="width:950px;"
Right .. I managed to pull it off finally ... all needed was a bit of treatment on the original eps file. I opened the file with illustrator and chose to "flatten transparency" .. maybe what it does was to flatten the many layers of the file or something .. then save as svg .. and it rendered nicely in the PDF ..
Hopefully this helps if anyone out there would have the same issue as I did. Thank you! :D
We fixed this problem by adding a width and height attribute to the svg besides the viewbox attribute.