SVG prevent scaling when zooming page-CodePudding

I wanna know, is there any way to prevent scaling my SVG when zooming page in a browser? Let's just say my SVG image is a measuring image and I want to keep the same size of my SVG independently from zoom in or zoom out page.

I'm using React

Style

svg: {
    height: 150,
    width: 150,
},

Example Code

<svg className={classes.svg} viewBox="0 0 150 150">
    <g>
        <circle cx={70} cy={70} r={32} fill="white" stroke="black"/>
        <circle cx={70} cy={70} r={8} fill="black"/>
    </g>
</svg>

CodePudding user response：

You might use a viewport related unit like vw, vh.

<svg  viewBox="0 0 150 150" style="width:5vw">
    <g>
        <circle cx="70" cy="70" r="32" fill="white" stroke="black"/>
        <circle  cx="70" cy="70" r="8" fill="black"/>
    </g>
</svg>

Your svg element will keep it's initial size of 5vw.