Utilizing SVG in Menu

add_filter( 'file_is_displayable_image', 'add_svg_support_to_file_is_displayable_image', 10, 2 );

function add_svg_support_to_file_is_displayable_image( $result, $path ) {
	$fileExtension = mb_strtolower( pathinfo( $path, PATHINFO_EXTENSION ) );
	return $result || $fileExtension === 'svg';
}

After adding this to the functions.php file I still have the ongoing issue of after selecting the SVG from my media library it shows no thumbnail, and does not appear when the menu is outputted in the frontend.

Thank you for your help though. Very much appreciated.

Try to select original file for menu. SVG – is not just simple image, it’s a scalable web graphic, actually it’s a xml file and can’t be resized. You don’t need resize vector graphic.

Btw, I don’t think that wordpress can support svg.

Actually wordpress can’t get svg image width and height, but we can.
There is filter image_downsize:

add_filter( 'image_downsize', 'add_svg_to_image_downsize', 10, 3 );

function add_svg_to_image_downsize( $downsize, $id, $size ) {
	if ( $downsize ) return $downsize;

	if ( $file = get_post_meta( $post->ID, '_wp_attached_file', true) ) {
		$file = 'wp-content/uploads/' . $file;
		if ( file_exists( $file ) && mb_strtolower( pathinfo( $file, PATHINFO_EXTENSION ) === 'svg' ) {
			$xml = simplexml_load_file( $file );
			$attr = $xml->attributes();
			return array(
				wp_get_attachment_url($id),
				$attr->width,
				$attr->height,
				false
			);
		}
	}

	return $downsize;
}

Beware, this code is written on the knee!

I wish I could say that worked but sadly it did not, I had to resort to adding the SVG to the menu item’s label inline, not ideal for a client website, but it’ll to do for now.

Thank you for your attempts to help, if you have any other ideas I’m all for trying them.

Regards.

Better use css for that.