如何调整网站Logo的SVG大小而不缩放其背景？

我想将SVG用作网站Logo，但修改width和height属性调整大小时，整个图像会被缩放，无法达到预期效果。我尝试过以下操作：

• 直接导入SVG文件和通过React组件导入两种方式
• 设置preserveAspectRatio、viewBox等属性

均未解决问题，调整图像大小会导致整个图像缩小，不符合需求。

需要实现的效果如图所示：

相关React代码如下：

import React from 'react';
import "./Header.css";
import IconSvg from "../../../assests/logo.svg";
// import SvgImage from "../../../utils/logo";
import {NavLink} from 'react-router-dom';

export default function Header() {
  return (
    <div className="header">
      <div className="header-img">
        {/* <img src={IconSvg} alt="icon"/> */}
        {/* <SvgImage/> */}
      </div>
      <div className="header-controlls">
        <div className="header-controlls-controll">
          <NavLink className="link" to="/"> Home </NavLink>
        </div>
        <div className="header-controlls-controll">
          <NavLink className="link" to="/About">About </NavLink>
        </div>
        <div className="header-controlls-controll">
          <NavLink className="link" to="/Orders">Orders </NavLink>
        </div>
        <div className="header-controlls-controll">
          <NavLink className="link" to="/Cart">Cart </NavLink>
        </div>
      </div>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者anandsingh