I'm building a portfolio website.
<div id = "hero">
<div id = "social">
<img src = "facebook.svg">
<img src = "linkedin.svg">
<img src = "instagram.svg">
</div>
</div>
#hero {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 300px;
#social {
width: 50%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
img {
width: 2em;
}
}
}
The problem is that I'm not able to resize SVGs using the CSS width
property. Here is what I obtain in different cases:
img { width: 2em; }
img { width: 3em; }
img { width: em; }
Please note how icons collapse toward the middle of the hero
div.
Instead, if I use the CSS height
property:
img { height: 2em; }
img { height: 3em; }
img { height: 4em; }
This behaviour is what I need, but I'm not sure this is the right way. Why this happens? Do you know better ways of resizeing SVG images (especially using the flexbox model)?
You have to modify the viewBox
property to change the height and the width correctly with a svg. It is in the <svg>
tag of the svg.
https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox
width="100" height="100"
in the svg file then add this x="0px" y="0px" width="100" height="100" viewBox="0 0 100 100"
while keeping the already defined width="100" height="100"
. img
so you could then do this: img{height: 20px; width: 20px;}
and the image will scale.I had to figure it out myself but some svgs your need to match the viewBox & width+height in.
E.g. if it already has width="x"
height="y"
then =>
add <svg ... viewBox="0 0 [width] [height]">
and the opposite.
After that it will scale with <svg ... style="width: xxx; height: yyy;">
The transform CSS property lets you rotate, scale, skew, or translate an element.
So you can easily use the transform: scale(2.5);
option to scale 2.5 times for example.
You can also use the transform: scale("")
option.
Open SVG using any text editor and remove width
and height
attributes from the root node.
Before
<svg width="12px" height="20px" viewBox="0 0 12 20" ...
After
<svg viewBox="0 0 12 20" ...
Now the image will always fill all the available space and will scale using CSS width
and height
. It will not stretch though so it will only grow to available space.
Source: Stackoverflow.com