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
Gerardo Téllez Galindo
Courses Plus Student 3,062 PointsSVG image it's bigger than the original .png file
Hi, I seem to have a problem whe converting my images to svg's. When I replace my png's to svg's my images gets bigger than the original png. Can anyone tell me if I'm doing something wrong?
Colin Marshall
32,861 PointsAre you talking bigger in dimensions or bigger in file size? Also, please tell us what process and applications you are using to convert the SVG's.
Gerardo Téllez Galindo
Courses Plus Student 3,062 PointsYes, I am selecting the svg image as 'object'. Tyler Price I'm talking about bigger dimensions. I'm using Illustrator CS5. Maybe I'm doing something wrong in the process. Let me try again. Colin Marshall
Colin Marshall
32,861 PointsYou probably need to set a max-width in your CSS to the object using a class. The S in SVG stands for scalable so it's naturally going to scale to the size of its container, assuming that you opened up the SVG with a text editor after saving it in Illustrator and got rid of the height and width values.
Gerardo Téllez Galindo
Courses Plus Student 3,062 PointsJust realized that Colin Marshall. Thank you!
4 Answers
Gerardo Téllez Galindo
Courses Plus Student 3,062 PointsYes, I did. I just can't figure it out
Kester Browne
24,414 PointsUse your svg file in image tags and use width: size in em to dictate the size of the image.
Gerardo Téllez Galindo
Courses Plus Student 3,062 PointsI think now I understand what happened. It seems that when turning the image to .svg and removing the width and height it tends to fill all the size of the div it's into... And since the beginning I made my logo image smaller tan the div itself. I'm pretty sure that's the problem. Thank you for your help and special thanks to Kester Browne I could find the problem.
Bruno Dias
10,554 PointsThank you Kester Browne and Gerardo.
Had the exact same issue here, spent almost 2 days trying to fix it and was chocked when I found this very simple solution.
Tyler Wendlandt
4,267 PointsTyler Wendlandt
4,267 Pointsare you selecting the new svg image as 'object' in your style.css?