Best Practice For Using Svgs, Regarding Height And Width?

I've been trying out using SVGs on a few of the latest projects, and since it scales, I was wondering what's your take on dynamic height and width of these SVGs? So far, I've expor

Solution 1:

It's better to remove height and width (and x, y and viewBox if needed) attributes from svg itself and use both width and height in css. Ex:

.parent svg {
   width: 100%;
   heigth: 100%;
}

.parent {
   width: 100px;
   height: 50px;
}

Or:

.parent svg {
   width: 100px;
   heigth: 50px;
}

So you can easily make everything responsive.