how to scale the drawing according to viewbox or height width of svg tag

Question

Hi i am facing a problem i have a svg.When i try to change the height and width and viewbox's height and width the drawing inside the svg will not get fit in to the box

This is my mysvg i am giving the short form

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500pt" height="500pt" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(528,270)" > 
        <g id="states" fill="green" width="500pt" height="500pt" >
            <a id="s01">
                <path d="M158.95067408594068,46.88327098850149L185.03303599629845,44.0148159910488L189.74121811302572,59.50889743727097L196.59587401503094,82.27898337817625L199.0518321008348,87.17077847298319L201.13017099189912,89.85649424407167L200.707578706067,91.7588142001174L202.6261541288344,92.6205139503571L200.33524838576966,95.29216920133321L200.7363444144292,97.59217497211156L199.80999341478454,100.8918397716738L202.09021078470892,106.20782432993735L201.64399529140977,111.17790897235179L204.03767592952832,115.96122130827978L196.3574723373462,117.09985438789514L163.47293491613115,121.08122011183377L163.22294648718562,123.55296427740802L167.13791879442175,126.6835133291724L166.871741037497,129.76735843938286L168.2485001228969,131.1400084527912L166.21795234496457,134.1137855808483L164.12121282499038,134.9547500732084L159.81791064191435,132.36796011584426L158.90469329765804,127.88713803963412L157.64560372254968,127.51168600895127L156.5390262005875,131.08669596034315L156.36678872306632,134.46030822963786L152.20800610122825,133.97284127048096L148.16895577705603,105.98121856614907L148.12136132417422,70.56398790998259L148.15893441899317,50.102043132249676L146.40831263672231,48.33943105796875Z" stroke="#FFFFFF" stroke-dasharray="1, 0" stroke-width="1.5"></path>
                <text x="162.66165594858754" y="86.92631614090374" style="">AL</text>
                <title></title>
            </a>
        </g>
    </g>
</svg>

this is what happen when i change the width and height or viewbox or both \

now width height get reduced but drawing remains the same

Answer 1

The solution is the same as the answer I gave you yesterday.

Width height of the svg is not changing

Try following these steps:

(1) Set svg width and height to 500, and add preserveAspectRatio="none" to your svg.

<svg width="500" height="500" preserveAspectRatio="none" ...>

This will probably stretch your map strangely, but don't worry, it is just a temporary change that makes the next step easier.

(2) Now adjust the viewBox until all the map is visible. Once you find the right values, leave the viewBox alone. You shouldn't need to change it further.

(3) Remove the preserveAspectRatio="none". The stretch effect will disappear.

(4) Now you can adjust the svg width and height from 500x500 to whatever size you like. The entire map should stay visible no matter how you change the width and height.

Answer 2

Assume the initial height and width 1000px.

<svg height="1000" width="1000" viewBox="0 0 1000 1000">

If you want to resize svg and all elements in it, then don't change viewBox value. For 500px SVG:

<svg height="500" width="500" viewBox="0 0 1000 1000">

Example

How to Zoom and Pan with SVG