Changing svg dimensions with styled component mediaquery does not update viewBox - svg

Question

Example
import styled from 'styled-components';
import { ReactComponent as SvgLogoUnstyled } from 'src/assets/svg/logo.svg';
const SvgLogo = styled(SvgLogoUnstyled)`
height: 40px;
width: 40px;
#media (max-width:1427px){
width: 17px;
height: 17px;
}
`;
export default SvgLogo;
When changing screen size, the svg viewBox remains at 40px, but gets cropped at 17px.
In html css this does not happen. Both the viewBox and dimensions get updated.
Can anyone advise a fix?
Note: Using transform scale - does not resolve this problem, because it keeps the width at 40px which adds unnecessary margin, when I do actually need the logo to be at 17px width.
transform: scale(0.42); /*17 / .4*/
I have managed to hack it a little but its ugly
#media (max-width:1427px){
transform: scale(0.42); /* transform: scale(0.42); /*17 / .4*/
margin: 0 -12px 0 4px; /* added minus margin to reset ( (40 - 17) / 2)*/
box-sizing: content-box; /* enable expansion without cropping if additional margin top/bottom*/
}

Answer 1

Ok it turned out to be simple.
I was using css to set the width and height and change it on mediaquery, but the actual svg itself had a width,height on it. Simply removing the width, height from the svg, but keeping the viewBox, ensured the svg retained its aspect ratio.
Answer here: https://css-tricks.com/scale-svg/
Point going forward, when creating svgs, remove the width, height attributes from them before inserting into html and always use css to set the dimensions.