when loading an SVG file (designed in Inkscape) with the Fabric.js function loadSVGFromURL(), the including text gets rendered larger than in Inkscape.
here you can see a screenshot from Inkscape:
This is how it looks like in Fabric.js:
However, I also recognized, that the SVG looks slightly different in Chrome (different than Inkscape and different than Fabric.js):
this is what the SVG looks like:
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="45" id="svg4136" version="1.1">
<defs id="defs4138">
<marker orient="auto" refY="0" refX="0" id="Arrow1Mend" style="overflow:visible">
<path id="path4750" d="m0 0 5-5-17.5 5L5 5Z" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1" transform="matrix(-.4 0 0 -.4 -4 0)"/>
</marker>
<marker orient="auto" refY="0" refX="0" id="Arrow2Mend" style="overflow:visible">
<path id="path4768" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1" d="M8.719 4.034-2.207.016 8.719-4.002c-1.746 2.372-1.736 5.618 0 8.036z" transform="scale(-.6)"/>
</marker>
<marker orient="auto" refY="0" refX="0" id="Arrow1Send" style="overflow:visible">
<path id="path4756" d="m0 0 5-5-17.5 5L5 5Z" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1" transform="matrix(-.2 0 0 -.2 -1.2 0)"/>
</marker>
<marker orient="auto" refY="0" refX="0" id="Arrow1Lstart" style="overflow:visible">
<path id="path4741" d="m0 0 5-5-17.5 5L5 5Z" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1" transform="matrix(.8 0 0 .8 10 0)"/>
</marker>
<marker orient="auto" refY="0" refX="0" id="Arrow1Lend" style="overflow:visible">
<path id="path4744" d="m0 0 5-5-17.5 5L5 5Z" style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1" transform="matrix(-.8 0 0 -.8 -10 0)"/>
</marker>
</defs>
<g id="layer1">
<path style="fill:#cecece;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.6;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect4197" d="M0 0h30v45H0z"/>
<text id="text4996-5" y="51.248" x="-35.24" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:0%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;white-space:pre;inline-size:60.4796;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" xml:space="preserve" transform="rotate(-90 -22.186 10.427)"><tspan x="-35.24" y="51.248"><tspan style="font-size:10px;line-height:1.25">###LABEL</tspan></tspan></text>
</g>
Does anybody know what causes this behavior?
Thanks and all the best,
Kevin