CODEWITHSUNDEEP
htmlcsssvg
Nasim_Reja
Nasim_Reja

Reputation: 98

I want to increase the height and width of the svg

here the Svg

<svg class="icon" xmlns="http://www.w3.org/2000/svg" width="18" height="15">
    <path class="icon-mobile-nav" name="'menu-outline" fill="#242A45" fill-rule="evenodd"
        d="M0 0h18v3H0V0zm0 6h18v3H0V6zm0 6h18v3H0v-3z" />
</svg>

I also tried with css but it's not give the expected output

.icon {
    width:30px;
    height:40px;
}
.icon-mobile-nav {
    width:50px;
    height:60px;
    fill:red;
}

You can also check the link from here: https://codepen.io/nasim67reja/pen/zYwwXMN

Upvotes: 0

Views: 51

Answers (1)

Will
Will

Reputation: 1193

You can also use viewBox instead of width and height in your SVG, then set your width in CSS

<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 15"">
   <path class="icon-mobile-nav" name="'menu-outline" fill="#242A45" fill-rule="evenodd" d="M0 0h18v3H0V0zm0 6h18v3H0V6zm0 6h18v3H0v-3z" />
</svg>

svg.icon {
  width: 20px;
  height: 20px;
}

See live example: https://jsfiddle.net/xkqfLhza/1/

See viewBox documentation here.

Upvotes: 2

Related Questions