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! While you're at it, check out some resources Treehouse students have shared here.

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

CSS

Posted by gabriel friedman
gabriel friedman
264 Points

Setting a width on wrapper doesn't constrain the svg

I created an svg consisting of three horizontal rectangles. Here's the code from one:

<rect id="Rectangle-2" fill="#7ED321" sketch:type="MSShapeGroup" x="0" y="45" width="218" height="21" rx="8"

Here's my markup:

<div class="doc-wrapper"> 
  <img src="/assets/icons/document.svg"  />
</div>

here's my css:

.doc-wrapper{
  width: 20%;
  margin: 1em auto;
}

The SVG is not constrained by the div width, but simply extends out beyond it. Is this because the size is declared in the SVG?

Thanks for any assistance.

1 Answer

gabriel friedman
gabriel friedman
264 Points

Think I answered my own question: I exported the SVG from Sketch, and it included an explicit height & width in the <svg> element. I removed these and the SVG now scales (despite the individual shapes still having height/width.)