How to make a responsive SVG

I am trying to use an SVG map of a country on my website, and I want to make it fully responsive based on the screen width and height.

There should be no part of the map cut off or lost, and no overlapping either.

I created a CodePen example to illustrate what I am trying to accomplish: https://codepen.io/Samantha-L-tourneau/pen/RNwXwQo


<script src="https://cdn.tailwindcss.com"></script>
<div class="relative w-full max-w-5xl aspect-[1/1.18] overflow-hidden bg-white shadow-lg rounded-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="-9000 -4500 23000 20000"
preserveAspectRatio="xMidYMid meet"
role="img"
aria-labelledby="title desc"
class="absolute inset-0 w-full h-full block text-gray-400">

<title id="title">Map of Canada</title>
<desc id="desc">A vector map of Canada showing the provinces and territories.</desc>
<style type="text/css">
path{
stroke-linejoin:round;
stroke-linecap:round;
}
</style>
[...] // SVG found here : https://upload.wikimedia.org/wikipedia/commons/3/38/Canada_blank_map.svg
</svg>

</div>

I need the SVG to maintain its aspect ratio at all times.

Can someone help me make the map fully responsive?

Thank you very much!

Continue reading...