Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML SVG Basics SVG and CSS Responsive SVGs

Amandeep Pasricha
Amandeep Pasricha
14,932 Points
Posted by Amandeep Pasricha
Amandeep Pasricha
14,932 Points

Why am I unable to apply height and width properties to my SVG path elements?

https://jsfiddle.net/apasric4/jfe5uamh/2/ I was experiemnting with SVG's and was wondering why my SVG with a rectangle element responded to height and width properites applied to it, but not the path elements in the four inline SVG's above.

I wanted to expand the SVG to be 100% of the viewport, thus setting 100% for both height and width, but this didn't work like it did for the rectange SVG. Why is this?

I set the same viewport attribute for all the inline SVG's as well, so why isn't this working?

1 Answer

James Andrews
James Andrews
7,245 Points

These SVGs the viewBox="0 0 200 200" which is not the same width and height as the actual paths inside, you should adjust the view box to be the width and height of the actual paths of the icons, and then edit the style width and height and apply it to the overall svg object.