Square SVGs are totally broken in Chrome

Uploadd a square SVG and insert it with Gutenberg. For a 200×200 image, the resulting code will look something along these lines:

<figure class="aligncenter size-large"><img src="test.svg" alt="" srcset="test.svg 150w, test.svg 300w, test.svg 1024w,
test.svg 200w" sizes="(max-width: 200px) 100vw, 200px"></figure>

(paths to uploads directory stripped for clarity)

Note only is the srcset completely unnecessary (and buggy; the paths contain double slashes), but it somehow causes things to break in Chrome – rather than displaying at the intrinsic width of 200px, the extra srcsets cause it to scale down and display much smaller.

This may be a bug in Chrome, but the srcset should not be there at all. For now have put in a temporary measure:

add_filter('wp_calculate_image_srcset','mytheme_svg_srcset_fix',10,5);
function mytheme_svg_srcset_fix($sources, $size_array, $image_src, $image_meta, $attachment_id ) {
	if (substr($image_src,-4)=='.svg') return array();
	return $sources;
}

But this should be in the plugin.

Note that it usually only happens for square images, since others don’t match the ratio of generated thumbnails (unless they match another ratio of eg featured images that you’ve set up).