I have been working on a project for a while that in parts displays 4 svgs I made with http://svgeditoronline.com/. But for some reason when I try to display the last 3 svgs, it looks not right for lack of a better word. The first one looks just fine.
Here is the html and css that I have wrote
<button class="Button" onclick="RunApp(A_Settings)">
<img class="Button-icon" src="Resources/Settings.svg" />
</button>
.Button {
height: 85%;
aspect-ratio: 1/1;
margin-top: 0.25%;
margin-bottom: 0.25%;
margin-left: 0.50%;
transition: all 0.3s ease-in-out;
border: 5px solid black;
border-radius: 10px;
}
.Button:hover {
transform: scale(1.1);
}
.Button-icon {
height: 90%;
aspect-ratio: 1/1;
margin-top: 0.25%;
margin-bottom: 0.25%;
}
What it's supposed to look like How it looks
To provide some context, I'm working on this project using Replit, but I've also tested the code by loading the HTML file locally with the same results. Also if it's helpful, here is the svg code:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="375" height="375" viewBox="0 0 375 375" xml:space="preserve">
<desc>Created with Fabric.js 3.6.6</desc>
<defs>
</defs>
<g transform="matrix(3.19 0 0 3.19 187.99 187.99)" >
<polygon style="stroke: rgb(0,0,0); stroke-width: 22; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: round; stroke-miterlimit: 4; fill: rgb(189,189,61); fill-opacity: 0; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" points="-50,-50 -50,50 50,50 50,-50 " />
</g>
<g transform="matrix(0.57 0.56 -0.56 0.57 104.59 91.86)" >
<path style="stroke: rgb(0,0,0); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-62.2, -20.73)" d="m 20.013628 0 l 84.37401 0 l 0 0 c 11.053215 -1.04756605e-14 20.013626 9.282301 20.013626 20.7326 c 0 11.450296 -8.960411 20.7326 -20.013626 20.7326 l -84.37401 0 l 0 0 c -11.053222 0 -20.013628 -9.282303 -20.013628 -20.7326 c -5.2380687e-15 -11.450298 8.960406 -20.7326 20.013628 -20.7326 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.59 -0.54 0.54 0.59 104.55 140.67)" >
<path style="stroke: rgb(0,0,0); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" translate(-62.2, -20.73)" d="m 20.013628 0 l 84.37401 0 l 0 0 c 11.053215 -1.04756605e-14 20.013626 9.282301 20.013626 20.7326 c 0 11.450296 -8.960411 20.7326 -20.013626 20.7326 l -84.37401 0 l 0 0 c -11.053222 0 -20.013628 -9.282303 -20.013628 -20.7326 c -5.2380687e-15 -11.450298 8.960406 -20.7326 20.013628 -20.7326 z" stroke-linecap="round" />
</g>
<g transform="matrix(0.8 -0.01 0.01 0.8 211.04 163.61)" >
<path style="stroke: rgb(0,0,0); stroke-width: 8; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" translate(-62.2, -20.73)" d="m 20.013628 0 l 84.37401 0 l 0 0 c 11.053215 -1.04756605e-14 20.013626 9.282301 20.013626 20.7326 c 0 11.450296 -8.960411 20.7326 -20.013626 20.7326 l -84.37401 0 l 0 0 c -11.053222 0 -20.013628 -9.282303 -20.013628 -20.7326 c -5.2380687e-15 -11.450298 8.960406 -20.7326 20.013628 -20.7326 z" stroke-linecap="round" />
</g>
</svg>
Thanks for any assistance you can provide (and possibly disproving the bad reputation that this website has)
I tried things like remaking the svg and using more specific styling.
The vector-effect property (and attribute) affect how strokes are rendered at different sizes of the SVG. You've set it to non-scaling-stroke, which means the stroke will (relatively) get thicker as the image gets smaller.
The solution - just remove the vector-effect attributes. This will cause the proportions to be retained, which is presumably what you want.