I have an svg file that roughly looks like this:

...

<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 ... 

As you can see we have rasterized images mixed together with vectorized images in the same svg file.

I am converting the file into a string and try to to load it into a fabric canvas using this command.

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

However my problem is that when I have two objects, one rasterized and one vector, it is only loading and outputting the vectorized image.

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

Why is this the case?