How would I scale down a SVG brought in through content? - html

Question

Essentially I'm having an SVG icon fade out and reveal a link on hover but they're huge when I link them and look really bad.
I've tried using 'img' instead of 'a' but failed as they still would be way too big and width and height had no effect.
Also tried manually scaling them down in illustrator but that caused problems when changing the viewport size and they'd miss align themselves.
Fiddled with the problem for a while and as im pretty new to SVG's I ended up giving up and coming here.
It looks like this https://imgur.com/a/4c1KpHF
Hovering over the icons on the left causes them to fade out and the link fade in.
HTML:
<div class="list">
</div>
CSS:
.icon-HOME::before{
content: url(/icons/Home.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child:after {
content: "HOME";
}
.icon-ABOUT::before{
content: url(./icons/About.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child + a:after {
content: "ABOUT";
}
.icon-WORK::before{
content: url(./icons/Work.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child + a + a:after {
content: "WORK";
}
.icon-CONTACT::before{
content: url(./icons/Contact.svg);
filter: invert(100%);
transition: all 0.5s ease-in-out;
}
#nav_bar div a:first-child + a + a + a:after {
content: "CONTACT";
}
#nav_bar div a:hover:after {
opacity: 1;
}
#nav_bar div a:hover:before {
opacity: 0;
}
Any other additional advice is greatly appreciated!! Thank you in advance to anyone that offers their help!

Answer 1

If your SVGs are local files, you can edit the SVG element attribute to reduce their widths/height.
e.g. <svg width="285" >
If you add just width the height should scale with it.
It wasn't clear if you've tried this only in CSS, but let me know if it works directly editing the SVG attribute.

Answer 2

You can try CSS transform with scale.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
transform: scale(0.5);
or you can try max width too:
https://www.w3schools.com/cssref/pr_dim_max-width.asp
max-width: 150px;