Untitled

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
	<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
</head>
<body>
	<div id="map"></div>
	<script>
		var bounds = [[0, 0], [1000, 1421]];
		var map = L.map( "map", {
			minZoom: 0.5,
			maxZoom: 5,
			zoomSnap: 0.05,
			maxBounds: bounds,
			crs: L.CRS.Simple,
			attributionControl: false
		} );

		var image = L.imageOverlay( "https://i.imgur.com/wxVyhEi.jpg", bounds ).addTo( map );

		var svgElement = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
		svgElement.setAttribute( "xmlns", "http://www.w3.org/2000/svg" );
		svgElement.setAttribute( "viewBox", "0 0 1152 1024" );
		svgElement.setAttribute( "width", 1152 );
		svgElement.setAttribute( "height", 1024 );
		svgElement.innerHTML = '<title></title><g id="icomoon-ignore"></g><path fill="#000" d="M160 704q66 0 113 47t47 113-47 113-113 47-113-47-47-113 47-113 113-47zM576 320q-66 0-113-47t-47-113 47-113 113-47 113 47 47 113-47 113-113 47zM512 496q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113zM576 704q66 0 113 47t47 113-47 113-113 47-113-47-47-113 47-113 113-47zM992 704q66 0 113 47t47 113-47 113-113 47-113-47-47-113 47-113 113-47zM960 496q0 66-47 113t-113 47-113-47-47-113 47-113 113-47 113 47 47 113z"></path></svg>';
		var svg = L.svgOverlay( svgElement, [[0, 0], [1024,1152]] ).addTo( map );

		// fit map
		map.fitBounds( bounds );
	</script>

</body>
</html>