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
gata gbemou
Front End Web Development Techdegree Student 9,280 Points.SVG picture resizing
i need help of how to resize sag vector logo size. I'm building a footer of html file .i already link my github,twitter and linked to my profile. however, though everything seems to fall inline but the size of those logo are too large. I tried to use photoshop to adjust the size but it came completely off. beside those tools to resize(pic resize don't accept svg file) is there any code i could use to make smaller?
2 Answers
Lucas Brown
Courses Plus Student 11,225 PointsGive them a 'class' in your HTML and select that class within your CSS. Then, give the selected class a width or height property (or both). Usually, you only have to set one property and the remaining will automatically scale accordingly.
HTML example:
<img class="github" src="img/github.svg" alt="GitHub Icon">
CSS example:
.github {
width: 48px;
}
gata gbemou
Front End Web Development Techdegree Student 9,280 Pointsthanks Austin , that's what exactly happened.
Austin, what are the techniques to make sure that my style.css is apply properly .
on my hand it looks like it's working. i save index.html and style.css on the same folder.
Austin Whipple
29,847 PointsI'd start by double checking your CSS file link:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
If that's all set, check the element selectors. For instance do something like svg#linkedin to target a single icon.
gata gbemou
Front End Web Development Techdegree Student 9,280 Pointsgata gbemou
Front End Web Development Techdegree Student 9,280 Pointsthanks lucas, but i'm still having trouble with all the .svg icons . when i download from the project file , i see all them with the icon.but once i add to atom (text editor) and clicked on it to look at it. they are no longer visible . this is all i see.
is it supposed to be this way? sorry I'm new in coding.
Austin Whipple
29,847 PointsAustin Whipple
29,847 PointsSVG files won't open like graphic formats you're likely used to (jpg, png, etc.). They're XML-based, so when viewed by most programs they'll be shown as code. However, if you paste that XML into an HTML page you're working on, the browser will render it as an image.
Because browsers have access to the XML on the page, you can manipulate them more easily with CSS to change size, color, etc. without degrading quality. Important to note, however, that you do have to paste the XML directly into HTML page in order to change anything other than size.
Lucas' solution should work well assuming all you're looking to do is move things around and scale them.