SVG does not load on firefox - css

Question

The svg image loads on all other browsers
Its not loading on Firefox
I cannot find the code on the DOM.
I am serving page from Tomcat 9.0.34
<kendo-grid grid-options="gridOptions">
<img
src="common/svg/Plain-HedvigLogo.svg"
height="150"
width="100"/>
</kendo-grid>
Plain-Logo.svg
This is the logo svg file that is supposed to appear on the browser.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 459.2 602.7" style="enable-background:new 0 0 459.2 602.7;" class="add-new-placeholder" xml:space="preserve">
<style type="text/css">
.st0{fill:#8496A1;}
.st1{fill:#476273;}
.st2{fill:#061A28;}
.st3{fill:#082335;}
.st4{fill:#FFA4B4;}
.st5{fill:#FF778F;}
.st6{fill:#FF4A6A;}
.st7{fill:#C53953;}
.st8{fill:#841F37;}
.st9{fill:#922A3E;}
.st10{fill:#0B2E44;}
</style>
<g>
<path class="st0" d="M177.9,125.8h-51.7V74.1h48.1c2,0,3.6,1.6,3.6,3.6V125.8z"/>
</g>
<g>
<path class="st1" d="125.8z"/>
<rect x="126.2" y="125.8" class="st1" width="51.7" height="51.7"/>
</g>
<g>
<rect x="126.2" y="280.9" class="st2" width="51.7" height="51.7"/>
<path class="st2" d="1.7V384.3z"/>
</g>
<g>
<rect x="74.5" y="177.5" class="st3" width="51.7" height="51.7"/>
<rect x="126.2" y="229.2" class="st3" width="51.7" height="51.7"/>
<rect x="74.5" y="280.9" class="st3" width="51.7" height="51.7"/>
<path class="st3" d=",176.3,384.3,174.3,384.3z"/>
</g>
<g>
<path class="st4" d="6,3.6,3.6V74.1z"/>
</g>
<g>
<path class="st5" d="3.6-3.6H333V74.1z"/>
<rect x="281.3" y="125.8" class="st5" width="51.7" height="51.7"/>
<rect x="333" y="74.1" class="st5" width="51.7" height="51.7"/>
</g>
<g>
<rect x="281.3" y="177.5" class="st6" width="51.7" height="51.7"/>
<rect x="333" y="229.2" class="st6" width="51.7" height="51.7"/>
</g>
<g>
<rect x="229.6" y="177.5" class="st7" width="51.7" height="51.7"/>
<rect x="333" y="177.5" class="st7" width="51.7" height="51.7"/>
<rect x="281.3" y="229.2" class="st7" width="51.7" height="51.7"/>
<rect x="333" y="280.9" class="st7" width="51.7" height="51.7"/>
</g>
<g>
<path class="st8" d="3.6-3.6v-48.1H333V384.3z"/>
</g>
<g>
<rect x="177.9" y="177.5" class="st9" width="51.7" height="51.7"/>
<rect x="229.6" y="229.2" class="st9" width="51.7" height="51.7"/>
<rect x="281.3" y="280.9" class="st9" width="51.7" height="51.7"/>
<path class="st9" d="M381.1,384.3H333v-51.7h51.784.3,381.1,384.3z"/>
</g>
</svg>
The svg image loads on all other browsers
Its not loading on Firefox
I cannot even find the code on the DOM.

Answer 1

You can't find svg code in DOM if you are using its as IMG
<img
src="common/svg/Plain-Logo.svg"
style="width:150px; height:100px;" />
Please check your SVG file directly open with Firefox and check below,
check SVG file view-box
Image location floating issue
Open SVG file direct in Firefox