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)?
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;">
You can also use the transform: scale("")
option.
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.
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.
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
Source: Stackoverflow.com