SVG images not rendering properly on canvas #6566
Comments
|
there are 2 problems in importing text from SVG, fonts and tspans. Loading fonts is up to you, and i have no idea how they are specified in the SVG. Tspans are still unsupported |
|
Following is the svg data as it has no fonts no tspans in it still it is not rendering. And for other svg's also which does not include any text in it some part of it also missing or rendered incorrectly.
|
|
path only svg should render good, unless i broke paths in 4.1 did you try loading it in current fabricjs.com/kitchensink ? please paste the result here together with how the browser renders it |
|
I tried to load four svg's on fabricjs.com/kitchensink here are the results:
Along with their browser representations: Women Empowerment logo: Heart logo: ES store logo: I have also check their svg data and they all are path only svg. |
|
ok interesting, i believe that fabricjs.com is still based on 3.6.3 so either an svg import bug or i broke something on 4.1 and updated fabricjs by error. can you pleae add the svgs here? they are useful for testing |
|
Yeah sure!!! Women Empowerment svg data:: E store logo data: Attached zip containing all four svg files. |
|
i verified kitchensink run on 3.6.4 This means this is an old bug in svg parsing. |
|
It seems like lot of things are changed in 4.1 and I am finding it little difficult to understand what to do here. So should I wait for #6023 pull request to get merged or is there anything I can do on my side to solve this issue. |
|
this is an old bug, we have to understand it amd fix it. That pr won't get merged but could contain the solution |
|
@fubuk-i Have you been able to try 4.2.0? Does this look closed now? |
|
@asturur @gloriousjob Thank you so much for your help & support. I have checked 4.2.0 on new SVG's as well as on old one's and they are all working as expected so I think we can close this now. |
|
Found one exception case @asturur @gloriousjob Attached is the svg file: Found one more |
|
I m sure there are many hard to parse SVG. |
I have used fabric.loadSVGFromURL function for loading SVG image to canvas. Some part of every SVG image is missing or distorted if its text.
Following SVG is not loaded properly on canvas:
The actual svg file hosted on:
http://174.138.12.68:4000/transparent_images/1599056081625-google.pdf-1.svg
Its pdf version:
1589379674035-Google Five Star Cust. Rating.pdf
Following is the code which I have used:
var imageUrl = 'http://174.138.12.68:4000/transparent_images/1599056081625-google.pdf-1.svg'; fabric.loadSVGFromURL(imageUrl, function(objects, options) { var img = fabric.util.groupSVGElements(objects, options); img.set({ left: canvas.width/2, top: canvas.height/2, scaleY: canvas.height / (img.height*3), scaleX: canvas.width /(img.width*3) }); canvas.add(img).renderAll();The text was updated successfully, but these errors were encountered: