My webpage has a sticky footer, but I am experiencing issues with SVG files not displaying in Chrome when the javascript for color changing on hover is enabled. Interestingly, disabling the javascript allows the images to load properly in Chrome.
I have tried to reproduce the problem in a jsfiddle without success, but here is the code: https://jsfiddle.net/r9szd060/
This is the javascript code snippet causing the issue:
$( document ).ready( function () {
$( 'img[src$=".svg"]' ).each( function () {
var $img = jQuery( this );
var imgURL = $img.attr( 'src' );
var attributes = $img.prop( "attributes" );
$.get( imgURL, function ( data ) {
// Get the SVG tag, ignore the rest
var $svg = jQuery( data ).find( 'svg' );
// Remove any invalid XML tags
$svg = $svg.removeAttr( 'xmlns:a' );
// Loop through IMG attributes and apply on SVG
$.each( attributes, function () {
$svg.attr( this.name, this.value );
} );
// Replace IMG with SVG
$img.replaceWith( $svg );
}, 'xml' );
} );
} );
Despite trying to use the embed tag instead of the img tag, the behavior remains unchanged in chrome. Although Firefox (desktop + iOS + Android) and Safari (desktop + iOS) display the SVG images correctly, they disappear in Chrome on desktop and android. Surprisingly, chrome on iOS seems to work fine...
I suspect it may be related to how Chrome handles SVGs using JavaScript and how the SVG file itself is formatted, but my knowledge of javascript is limited. I have heard about potential issues with SVG files in Chrome, but I'm unsure how to provide the relevant information from the SVG file (e.g., opened in illustrator) to troubleshoot further. If anyone can offer insights on how to resolve this issue, I would greatly appreciate it!
Can anyone help identify the problem and suggest a solution?