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 Joe Consterdine
Joe Consterdine
13,965 Points

SVG not scaling down to its container?

I've wrapped an SVG inside a container with a width of 20%. However the SVG is staying huge and not scaling down in to the container, but simply appearing outside of it at a huge size.

Any ideas?

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Background Images</title>
    <link rel="stylesheet" href="css/normalize.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="css/styles.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div class="main-wrapper">

        <div class="icons-container">
            <img src="assets/briefcase.svg">
        </div>

    </div>
</body>
</html>

CSS

/*************** BASE *********************
***************       ********************/

body {
    font-size: 1.25em;
    width: 100%;
}

p {
    margin: 0;
}

h1 {
  margin-top: 0;
  font-size: 2.441em;
  text-align: center;
}

h2 {font-size: 1.953em;}

h3 {font-size: 1.563em;}

h4 {font-size: 1.25em;}

/*************** COMPONENTS *********************
***************             ********************/

.main-wrapper {
    width: 50%;
    margin: 20px auto;
}

.icons-container {
    width: 20%;
    background-color: #ccc;
    margin: 0 auto;
}
/*************** HELPERS    *********************
***************             ********************/

* {
    box-sizing: border-box;
}

2 Answers

Ethan Moffat
Ethan Moffat
3,223 Points
Ethan Moffat
Ethan Moffat
3,223 Points

I really do not see anything wrong with your code. Try making sure all your pages are saved.

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Ethan,

I just created a simple square in illustrator and saved it out as an SVG and it scales down as I wanted.

However, the SVGs I was trying before still fall outside the container. I'm getting them from here:

https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/align-justify.svg

and then saving them out as an SVG document.

Not sure why these ones aren't scaling down?

Thanks Joe

UPDATE: So I didn't figure out why the SVG files from that GitHub page weren't scaling down from the get go, but a quick fix was to simply open them up in illustrator and save them back out as SVGs. That worked.