How to resize a svg to fit inside a div?

Question

on trying fitting in to div(with border) svg is cut off from the right size.

PEN

HTML

 <div style="position:relative;width:550px;height: 500px;background: gainsboro;border: 4px solid;">

 <-- My SVG -->

 </div>

help me fit this svg in 550x500

Answer 1

Don't use width or height in your SVG.

Use viewbox instead. Then the SVG will scale automatically (mostly).

<svg xmlns="http://www.w3.org/2000/svg" viewbox ="0 0 959 593">

Codepen Demo