CODEWITHSUNDEEP
htmlcsssvg
Faustus
Faustus

Reputation: 267

Resizing SVG in HTML without resizing canvas

I am trying to increase the size of an SVG image by changing the height and width parameters but it doesn't work instead the size of the canvas changes and navigation bars appear. Also there are two copies of height and width parameters. I don't know which ones to change. 

<svg xmlns:.... 
     width="85.75438690185547" 
     height="75.7368392944336" 
     xml:space="preserve" 
     inkscape:version="0.48.4 r9939" 
     sodipodi:docname="output.svg" 
     style=""><rect 
     id="backgroundrect" 
     width="100%" 
     height="100%" 
     x="0" y="0" 
     fill="none" 
     stroke="none"/>
     ...
 </svg>

Upvotes: 1

Views: 3517

Answers (2)

Moob
Moob

Reputation: 16184

Remove the width and height attributes from the svg and then size it in css. EG:

#someIcon {
  width: 100px;
  transition: all 0.5s ease;
}

#someIcon:hover {
  width: 200px;
}

#someIcon:hover .disc {
  fill: red;
}
<svg id="someIcon" viewBox="0 0 84 98" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="disc" fill-rule="evenodd" clip-rule="evenodd" d="M42 70C57.464 70 70 57.464 70 42C70 26.536 57.464 14 42 14C26.536 14 14 26.536 14 42C14 57.464 26.536 70 42 70Z" fill="#009688"/>
<path class="plus" fill-rule="evenodd" clip-rule="evenodd" d="M49 41H43V35H41V41H35V43H41V49H43V43H49V41Z" fill="white"/>
</svg>

OR tell the SVG to be 100% and put in a container which you can control the size of. EG:

#iconwrapper {
  border: 1px solid red;
  display: inline-block;
  width: 25%;
  transition: all 0.5s ease;
}

#iconwrapper:hover {
  width: 50%;
}

#iconwrapper:hover .disc {
  fill: pink;
}
<div id="iconwrapper">
  <svg id="someIcon" width="100%" height="100%" viewBox="0 0 84 98" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="disc" fill-rule="evenodd" clip-rule="evenodd" d="M42 70C57.464 70 70 57.464 70 42C70 26.536 57.464 14 42 14C26.536 14 14 26.536 14 42C14 57.464 26.536 70 42 70Z" fill="blue"/>
<path class="plus" fill-rule="evenodd" clip-rule="evenodd" d="M49 41H43V35H41V41H35V43H41V49H43V43H49V41Z" fill="white"/>
</svg>
</div>

Upvotes: 1

Alexandr_TT
Alexandr_TT

Reputation: 14545

To resize the shapes of svg without changing the dimensions of thesvg canvas, add the viewBox

I added a red frame to show the borders of the svg canvas.

style="border:1px solid red;"

In the example below, the size of the svg canvas width ="85" and height ="75" is equal to the size of the
viewBox = "0 0 85 75"

Therefore, the rectangle is displayed as is, without changing its size. 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="85" height="75" viewBox="0 0 85 75" style="border:1px solid red;" >   
	
	<rect x="0" y="0" width="42" height="35" fill="purple" />
</svg>

  • To increase the size of the rectangle without changing the size of the canvas svg you need to reduce the size of the viewBox="0 0 42 35" 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="85" height="75" viewBox="0 0 42 35" style="border:1px solid red;" >   
	
	<rect x="0" y="0" width="42" height="35" fill="purple" />
</svg>

  • To reduce the size of the rectangle without changing the size of the canvas svg you need to increase the size ofviewBox = "0 0 170 150" 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="85" height="75" viewBox="0 0 170 150" style="border:1px solid red;" >   
	
	<rect x="0" y="0" width="42" height="35" fill="purple" />
</svg>

I hope this helps you.

Upvotes: 4

Related Questions