fabric beta 6.0.0-beta14 How to loadsvgfromurl and add into canvas?

[vijaygurjar]

I have used below code but svg not visible on canvas
var canvas = new Canvas("canvas", {
height: 720,
width: 1080,
});
loadSVGFromURL("sampleurl").then((res:any)=>{
let g = new Group(res.objects, res.opts);
canvas.add(g);
canvas.requestRenderAll();
})

[vijaygurjar]

Loading in angular 16
Fabric version: 6.0.0-beta15
samle svg in my local system

sample svg:

<?xml version="1.0" encoding="utf-8"?>
  | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  | width="267.101px" height="267.068px" viewBox="16.981 16.95 267.101 267.068"
  | enable-background="new 16.981 16.95 267.101 267.068" xml:space="preserve">
  | <path id="_x23_585858fe" fill="#020202" d="M139.45,17.56c46.479-4.71,94.06,18.2,120.489,56.5
  | c13.49,19.16,21.689,42.02,23.529,65.39c4.73,46.5-18.26,94.05-56.529,120.489c-20.42,14.371-45.041,22.74-69.989,23.801
  | c-53.2,3.65-106.391-29.11-127.83-77.801c-9.46-19.811-12.811-42.119-12.03-63.93C20,94.7,49.9,50.02,93.01,30.05
  | C107.52,22.97,123.38,18.91,139.45,17.56z"/>
  | </svg>

 

[ShaMan123]

add a reproduction without angular
angular is reported to cause issues (and a fix has also been suggested but I can't find it in the repo)

[gloriousjob]

Actually, I had issues with SVG's. It seems that this did the trick in v6:
loadSVGFromURL("sampleurl").then((res:any)=>{
const g = new Group(res.objects, { ...res.opts, top:0, left: 0 });
canvas.add(g);
canvas.requestRenderAll();
})

For some reason, it looks like top and left need to be set in the options when adding it to the group. I've noticed this in another issue I helped resolve (didn't realize this was a thing... just thought it was that one).
@asturur @ShaMan123 Any clue why top and left need to be specified to 0 now? If not, it seems to load only 1/4 of the svg (i.e., like the center is at the top left). This wasn't needed in v4.

[ShaMan123]

I suspect there is a bug/regression in Path and Poly positioning

[ShaMan123]

I saw something on the new website demos as well

[asturur]

if i reproduce in our sandbox is all ok if:
i add it as a group
i add it as objects
is not ok if i add it as a group and pass in the options. The options contains width and height.

If we add width and height to a group options when we create it, we change the calculations because having a width and an height will change how prepareInitialBoundingBox works in current group code.

I have 2 comments here

• in general passing that options object to group is wrong. Group auto determine its width/height and if the svg is clipped by the viewbox passing widht/height won't solve anything.
• The way we overlap in group layouting the restore from json, and width and height for probably the static layout need to be separated a bit

[ShaMan123]

I did an svg layout option
That was removed for some reason
@asturur I remember you worked on grouping svg and removed it at some point
We can see if restoring it fixes the issue