How to change width and height from SVG to to make it responsive?

Question

I have this SVG:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="2754" height="1398">
    <path id="ocean" class="oceanxx" d="m 2178.51,22.652 c 23.09,8.443 46.07,17.268 68.69,26.918 23.28,9.936 46.25,20.423 68.65,32.235 21.09,11.126 41.93,23.021 61.97,35.957 21.08,13.605 41.89,27.571 62.36,42.079 19.52,13.829 38.78,28.187 57.4,43.192 19.26,15.516 38.42,31.313 56.44,48.281 17.81,16.784 34.69,34.399 50.88,52.763 16.31,18.496 32.21,37.27 46.51,57.382 13.9,19.544 27,40.009 38.14,61.259 11.54,21.996 21.52,44.679 29.03,68.373 3.63,11.456 6.72,23.097 9.94,34.672 3.22,11.531 6.37,23.097 8.9,34.802 5.17,23.881 9.21,47.954 11.66,72.272 2.45,24.396 4.06,48.767 3.86,73.294 -0.19,23.564 -2.29,47.347 -5.21,70.721 -3.03,24.259 -7.25,48.35 -13.13,72.089 -2.96,11.943 -6.24,23.795 -9.6,35.631 -3.29,11.603 -6.48,23.303 -10.64,34.63 -8.31,22.638 -18.23,44.718 -30.26,65.638 -12.14,21.11 -25.29,41.69 -39.9,61.17 -15.07,20.1 -31.57,38.97 -48.34,57.66 -16.07,17.9 -33.01,35.1 -51.03,51.03 -18.79,16.6 -37.97,32.65 -57.71,48.11 -18.86,14.76 -38.19,28.96 -57.84,42.65 -20.62,14.37 -41.56,28.19 -62.84,41.56 -10.07,6.32 -20.47,12.15 -30.84,17.97 -10.6,5.96 -21.25,12.07 -32.19,17.39 -22.71,11.06 -45.67,21.39 -69.06,30.93 -22.6,9.22 -45.32,18 -68.36,26.06 -18.62,6.52 -37.43,12.13 -56.48,17.19 h -1464.558 c -3.275,-0.87 -6.55,-1.7395 -9.824,-2.6095 -5.977,-1.59 -11.899,-3.39 -17.82,-5.17 -22.914,-6.91 -45.542,-15.04 -67.838,-23.73 -23.659,-9.22 -47.12,-18.92 -70.278,-29.33 -22.408,-10.07 -44.015,-21.63 -65.428,-33.64 -20.646,-11.59 -40.753,-24.21 -60.384,-37.44 -21.088,-14.21 -41.901,-28.75 -62.326,-43.9 -18.703,-13.87 -37.317,-28.07 -55,-43.23 -19.066,-16.35 -38.229,-32.7 -55.7,-50.78 -17.375,-17.98 -34.02,-36.63 -50.196,-55.69 -15.8042,-18.63 -30.0702,-38.53 -43.2552,-59.08 -12.855,-20.03 -24.808,-40.78 -34.432,-62.58 -4.953,-11.212 -10.061,-22.574 -13.76803,-34.279 -3.636,-11.479 -7.10201,-23.018 -10.295,-34.63 -6.417,-23.337 -12.46197,-46.647 -16.64097,-70.51 -4.257,-24.312 -6.66,-48.722 -8.709,-73.299 -2.004,-24.036 -1.886,-48.22 -0.282,-72.273 1.577,-23.65 3.862,-47.424 7.951,-70.784 4.256,-24.313 9.89,-48.113 16.43297,-71.903 6.41,-23.309 13.32503,-46.313 23.10703,-68.463 10.055,-22.769 22.053,-44.289 35.237,-65.382 13.01,-20.813 27.606,-40.549 43.184,-59.499 15.0482,-18.306 31.0032,-36.065 47.4652,-53.109 17.623,-18.246 36.494,-35.063 55.744,-51.561 18.438,-15.803 37.658,-30.663 57.064,-45.251 19.468,-14.636 39.434,-28.563 59.596,-42.221 20.714,-14.031 41.923,-27.255 63.595,-39.75 21.315,-12.289 43.164,-23.437 65.454,-33.832 21.981,-10.25 44.545,-19.417 67.141,-28.2184 22.703,-8.843 45.633,-17.18 68.889,-24.461 6.059,-1.897 12.166,-3.638 18.274,-5.365 2.722,-0.77 5.452,-1.504 8.186,-2.231 l 5.039,-1.332 h 1464.836 c 23.32,6.205 45.87,13.337 68.54,21.625 z"/>
</svg>

As you see the width is is setted in SVG tag. Now I want to show this SVG in a HTML web page so I need to make it responsive, also I need to keep path of all sections (all countries are included). Simply I change width to 100% but mouse hover doesn't work anymore. You see I need to change scale of the whole SVG but how should I show my SVG in web page?

[Notice]: In HTML I use <?php file_get_contents('map.svg'); ?> to load SVG.

Delete the width and the height of the svg element and use `viewBox="0 0 2754 1398"` instead. The svg element will take all the width available preserving the aspect ratio. If you need to know more please read this: https://stackoverflow.com/questions/62630948/how-to-removed-extra-space-padding-from-this-animated-svg/62631563#62631563 — enxaneta, Jul 18 '20 at 11:48

score 1 · Accepted Answer · answered Jul 19 '20 at 10:49

You have to add viewBox="0 0 2754 1398" to your SVG. In all modern browsers you can delete width and height or set them to width="100%" height="100%" to make your SVG responsive, but if you want to deliver a cross-browser compatibility you have to width and height without percentage because in other case not modern browsers will not understand it. Because of it I would like to recommend to set viewBox, width and height like follows.

In the case if you need to deliver a cross-browser compatibility you have to calculate width and height via JavaScript after all changes from width and height of your SVG parent for responsivity. But in other case all modern browsers can do it without it.

<div style="width:500px">
    <svg xmlns="http://www.w3.org/2000/svg"
    width="500" height="250"
    viewBox="0 0 2754 1398">
        <path id="ocean" class="oceanxx" d="m 2178.51,22.652 c 23.09,8.443 46.07,17.268 68.69,26.918 23.28,9.936 46.25,20.423 68.65,32.235 21.09,11.126 41.93,23.021 61.97,35.957 21.08,13.605 41.89,27.571 62.36,42.079 19.52,13.829 38.78,28.187 57.4,43.192 19.26,15.516 38.42,31.313 56.44,48.281 17.81,16.784 34.69,34.399 50.88,52.763 16.31,18.496 32.21,37.27 46.51,57.382 13.9,19.544 27,40.009 38.14,61.259 11.54,21.996 21.52,44.679 29.03,68.373 3.63,11.456 6.72,23.097 9.94,34.672 3.22,11.531 6.37,23.097 8.9,34.802 5.17,23.881 9.21,47.954 11.66,72.272 2.45,24.396 4.06,48.767 3.86,73.294 -0.19,23.564 -2.29,47.347 -5.21,70.721 -3.03,24.259 -7.25,48.35 -13.13,72.089 -2.96,11.943 -6.24,23.795 -9.6,35.631 -3.29,11.603 -6.48,23.303 -10.64,34.63 -8.31,22.638 -18.23,44.718 -30.26,65.638 -12.14,21.11 -25.29,41.69 -39.9,61.17 -15.07,20.1 -31.57,38.97 -48.34,57.66 -16.07,17.9 -33.01,35.1 -51.03,51.03 -18.79,16.6 -37.97,32.65 -57.71,48.11 -18.86,14.76 -38.19,28.96 -57.84,42.65 -20.62,14.37 -41.56,28.19 -62.84,41.56 -10.07,6.32 -20.47,12.15 -30.84,17.97 -10.6,5.96 -21.25,12.07 -32.19,17.39 -22.71,11.06 -45.67,21.39 -69.06,30.93 -22.6,9.22 -45.32,18 -68.36,26.06 -18.62,6.52 -37.43,12.13 -56.48,17.19 h -1464.558 c -3.275,-0.87 -6.55,-1.7395 -9.824,-2.6095 -5.977,-1.59 -11.899,-3.39 -17.82,-5.17 -22.914,-6.91 -45.542,-15.04 -67.838,-23.73 -23.659,-9.22 -47.12,-18.92 -70.278,-29.33 -22.408,-10.07 -44.015,-21.63 -65.428,-33.64 -20.646,-11.59 -40.753,-24.21 -60.384,-37.44 -21.088,-14.21 -41.901,-28.75 -62.326,-43.9 -18.703,-13.87 -37.317,-28.07 -55,-43.23 -19.066,-16.35 -38.229,-32.7 -55.7,-50.78 -17.375,-17.98 -34.02,-36.63 -50.196,-55.69 -15.8042,-18.63 -30.0702,-38.53 -43.2552,-59.08 -12.855,-20.03 -24.808,-40.78 -34.432,-62.58 -4.953,-11.212 -10.061,-22.574 -13.76803,-34.279 -3.636,-11.479 -7.10201,-23.018 -10.295,-34.63 -6.417,-23.337 -12.46197,-46.647 -16.64097,-70.51 -4.257,-24.312 -6.66,-48.722 -8.709,-73.299 -2.004,-24.036 -1.886,-48.22 -0.282,-72.273 1.577,-23.65 3.862,-47.424 7.951,-70.784 4.256,-24.313 9.89,-48.113 16.43297,-71.903 6.41,-23.309 13.32503,-46.313 23.10703,-68.463 10.055,-22.769 22.053,-44.289 35.237,-65.382 13.01,-20.813 27.606,-40.549 43.184,-59.499 15.0482,-18.306 31.0032,-36.065 47.4652,-53.109 17.623,-18.246 36.494,-35.063 55.744,-51.561 18.438,-15.803 37.658,-30.663 57.064,-45.251 19.468,-14.636 39.434,-28.563 59.596,-42.221 20.714,-14.031 41.923,-27.255 63.595,-39.75 21.315,-12.289 43.164,-23.437 65.454,-33.832 21.981,-10.25 44.545,-19.417 67.141,-28.2184 22.703,-8.843 45.633,-17.18 68.889,-24.461 6.059,-1.897 12.166,-3.638 18.274,-5.365 2.722,-0.77 5.452,-1.504 8.186,-2.231 l 5.039,-1.332 h 1464.836 c 23.32,6.205 45.87,13.337 68.54,21.625 z"/>
    </svg>
</div>

And I would like to recommend to short your code in SVG path like follows:

<div style="width:500px">
    <svg xmlns="http://www.w3.org/2000/svg"
    width="500" height="250" viewBox="0 0 50 25">
        <path id="ocean" class="oceanxx"
        d="M12,24C-4,21,-4,3,12,0H37C54,3,54,21,37,24z"/>
    </svg>
</div>

My code is shorter than your code 60 times. How to do it you can learn in good tutorial on MDN.

How to change width and height from SVG to to make it responsive?

1 Answers1