Tengo un archivo svg que se ve más o menos así:

 ... <style type="text/css"> .st0{filter:url(#Adobe_OpacityMaskFilter);} .st1{mask:url(#SVGID_1_);fill:#3A4B94;} .st2{filter:url(#Adobe_OpacityMaskFilter_1_);} .st3{mask:url(#SVGID_4_);} .st4{fill:#3A4B94;} </style> <defs> <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="49" y="56.8" width="381" height="473.7"> ... <image style="overflow:visible;" width="7428" height="6000" id="photoshop-texture-v2_2_" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgA ... ></image> ... <g class="st3"> <path class="st4" d="M491.9,528c-0.8-3.6-1.8-7.1-3-10.6c-1.4-3.7-3.1-7.3-4.7-10.9c-0.8-1.8-11.1,14.5-13.1,20.5 c-1.4,3.9-23.9,42 ...

Como puede ver, tenemos imágenes rasterizadas mezcladas con imágenes vectorizadas en el mismo archivo svg.

Estoy convirtiendo el archivo en una cadena e intento cargarlo en un lienzo de tela usando este comando.

 fabric.loadSVGFromString(svgRaw, (objects, options) => { objects.forEach(obj => { console.log('obj: ' + obj) } }

Sin embargo, mi problema es que cuando tengo dos objetos, uno rasterizado y otro vectorial, solo carga y genera la imagen vectorizada.

 obj: #<fabric.Path (305): { "top": 100.89999999999986, "left": 154.28724247192076 }>

¿Por qué es este el caso?