How to center rect box with an svg-CodePudding

I am trying to center this wrench svg inside the rect box but I am having no luck, any thoughts. Basically Id like to center the wrench icon in the rect box.

<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <rect width="32" height="32" rx="4" />
    <path d="M15.0799 1.85914C14.4167 1.71925 13.7291 1.70835 13.0553 1.83113C12.0053 2.02243 11.0387 2.52916 10.284 3.28379C9.5294 4.03842 9.02267 5.00511 8.83137 6.05503C8.64007 7.10495 8.77329 8.18824 9.21327 9.16053C9.34197 9.44494 9.28105 9.77933 9.06031 10.0001L2.15031 16.9101C1.89313 17.1672 1.74866 17.516 1.74866 17.8797C1.74866 18.2434 1.89314 18.5922 2.15031 18.8494C2.40748 19.1066 2.75628 19.2511 3.11998 19.2511C3.48367 19.2511 3.83247 19.1066 4.08965 18.8494L10.9996 11.9394C11.2204 11.7187 11.5548 11.6577 11.8392 11.7864C12.8115 12.2264 13.8948 12.3596 14.9447 12.1683C15.9946 11.977 16.9613 11.4703 17.7159 10.7157C18.4706 9.96106 18.9773 8.99437 19.1686 7.94444C19.2914 7.27058 19.2805 6.58298 19.1406 5.9198L16.225 8.83537C15.8979 9.15602 15.458 9.33559 15 9.33559C14.5419 9.33559 14.1021 9.15599 13.775 8.83534L13.7696 8.83009L12.1643 7.22476C11.8437 6.89764 11.6641 6.45781 11.6641 5.99974C11.6641 5.54167 11.8437 5.10186 12.1644 4.77474L12.1696 4.76938L15.0799 1.85914ZM12.7864 0.355426C14.1363 0.109471 15.5291 0.280751 16.7792 0.846441C17.0035 0.947945 17.1637 1.15308 17.2078 1.3953C17.252 1.63752 17.1744 1.88597 17.0003 2.06007L13.2339 5.82652C13.1891 5.87306 13.1641 5.93513 13.1641 5.99974C13.1641 6.06434 13.1891 6.1264 13.2338 6.17294L14.8268 7.76588C14.8733 7.81059 14.9354 7.83559 15 7.83559C15.0646 7.83559 15.1266 7.81059 15.1732 7.76589L18.9396 3.99941C19.1137 3.82531 19.3622 3.74775 19.6044 3.79188C19.8466 3.83602 20.0518 3.99622 20.1533 4.22053C20.719 5.47062 20.8902 6.86342 20.6443 8.21332C20.3983 9.56322 19.7468 10.8061 18.7766 11.7763C17.8063 12.7466 16.5635 13.3981 15.2136 13.644C14.037 13.8584 12.8278 13.7558 11.709 13.3514L5.15031 19.9101C4.61183 20.4485 3.8815 20.7511 3.11998 20.7511C2.35846 20.7511 1.62812 20.4485 1.08965 19.9101C0.55117 19.3716 0.248657 18.6413 0.248657 17.8797C0.248657 17.1182 0.551171 16.3879 1.08965 15.8494L7.64833 9.29073C7.24389 8.17188 7.14129 6.96272 7.35567 5.78615C7.60162 4.43625 8.25313 3.19337 9.22337 2.22313C10.1936 1.25289 11.4365 0.601381 12.7864 0.355426Z" fill="#A0AEC0"/>
</svg>

CodePudding user response：

One way is to use transform on the path:

<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <rect width="32" height="32" rx="4" />
    <path transform="translate(5, 5)" d="M15.0799 1.85914C14.4167 1.71925 13.7291 1.70835 13.0553 1.83113C12.0053 2.02243 11.0387 2.52916 10.284 3.28379C9.5294 4.03842 9.02267 5.00511 8.83137 6.05503C8.64007 7.10495 8.77329 8.18824 9.21327 9.16053C9.34197 9.44494 9.28105 9.77933 9.06031 10.0001L2.15031 16.9101C1.89313 17.1672 1.74866 17.516 1.74866 17.8797C1.74866 18.2434 1.89314 18.5922 2.15031 18.8494C2.40748 19.1066 2.75628 19.2511 3.11998 19.2511C3.48367 19.2511 3.83247 19.1066 4.08965 18.8494L10.9996 11.9394C11.2204 11.7187 11.5548 11.6577 11.8392 11.7864C12.8115 12.2264 13.8948 12.3596 14.9447 12.1683C15.9946 11.977 16.9613 11.4703 17.7159 10.7157C18.4706 9.96106 18.9773 8.99437 19.1686 7.94444C19.2914 7.27058 19.2805 6.58298 19.1406 5.9198L16.225 8.83537C15.8979 9.15602 15.458 9.33559 15 9.33559C14.5419 9.33559 14.1021 9.15599 13.775 8.83534L13.7696 8.83009L12.1643 7.22476C11.8437 6.89764 11.6641 6.45781 11.6641 5.99974C11.6641 5.54167 11.8437 5.10186 12.1644 4.77474L12.1696 4.76938L15.0799 1.85914ZM12.7864 0.355426C14.1363 0.109471 15.5291 0.280751 16.7792 0.846441C17.0035 0.947945 17.1637 1.15308 17.2078 1.3953C17.252 1.63752 17.1744 1.88597 17.0003 2.06007L13.2339 5.82652C13.1891 5.87306 13.1641 5.93513 13.1641 5.99974C13.1641 6.06434 13.1891 6.1264 13.2338 6.17294L14.8268 7.76588C14.8733 7.81059 14.9354 7.83559 15 7.83559C15.0646 7.83559 15.1266 7.81059 15.1732 7.76589L18.9396 3.99941C19.1137 3.82531 19.3622 3.74775 19.6044 3.79188C19.8466 3.83602 20.0518 3.99622 20.1533 4.22053C20.719 5.47062 20.8902 6.86342 20.6443 8.21332C20.3983 9.56322 19.7468 10.8061 18.7766 11.7763C17.8063 12.7466 16.5635 13.3981 15.2136 13.644C14.037 13.8584 12.8278 13.7558 11.709 13.3514L5.15031 19.9101C4.61183 20.4485 3.8815 20.7511 3.11998 20.7511C2.35846 20.7511 1.62812 20.4485 1.08965 19.9101C0.55117 19.3716 0.248657 18.6413 0.248657 17.8797C0.248657 17.1182 0.551171 16.3879 1.08965 15.8494L7.64833 9.29073C7.24389 8.17188 7.14129 6.96272 7.35567 5.78615C7.60162 4.43625 8.25313 3.19337 9.22337 2.22313C10.1936 1.25289 11.4365 0.601381 12.7864 0.355426Z" fill="#A0AEC0"/>
</svg>

CodePudding user response：

You could also move your icon by changing the actual d path commands.
This will require to convert your path commands to relative.
This could be done e.g with Yann Armelin's SvgPathEditor

Once all comannds are relative, you just have to change the first M x/y coordinates.

<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
    <rect width="32" height="32" rx="4" />
    <path d="M20.08 6.86 c -0.66 -0.14 -1.35 -0.15 -2.02 -0.03 c -1.05 0.19 -2.02 0.7 -2.77 1.45 c -0.75 0.75 -1.26 1.72 -1.45 2.77 c -0.19 1.05 -0.06 2.13 0.38 3.11 c 0.13 0.28 0.07 0.62 -0.15 0.84 l -6.91 6.91 c -0.26 0.26 -0.4 0.61 -0.4 0.97 c 0 0.36 0.14 0.71 0.4 0.97 c 0.26 0.26 0.61 0.4 0.97 0.4 c 0.36 0 0.71 -0.14 0.97 -0.4 l 6.91 -6.91 c 0.22 -0.22 0.56 -0.28 0.84 -0.15 c 0.97 0.44 2.06 0.57 3.11 0.38 c 1.05 -0.19 2.02 -0.7 2.77 -1.45 c 0.75 -0.75 1.26 -1.72 1.45 -2.77 c 0.12 -0.67 0.11 -1.36 -0.03 -2.02 l -2.92 2.92 c -0.33 0.32 -0.77 0.5 -1.23 0.5 c -0.46 0 -0.9 -0.18 -1.22 -0.5 l -0.01 -0.01 l -1.61 -1.61 c -0.32 -0.33 -0.5 -0.77 -0.5 -1.23 c 0 -0.46 0.18 -0.9 0.5 -1.22 l 0.01 -0.01 l 2.91 -2.91 z m -2.29 -1.5 c 1.35 -0.25 2.74 -0.07 3.99 0.49 c 0.22 0.1 0.38 0.31 0.43 0.55 c 0.04 0.24 -0.03 0.49 -0.21 0.66 l -3.77 3.77 c -0.04 0.05 -0.07 0.11 -0.07 0.17 c 0 0.06 0.03 0.13 0.07 0.17 l 1.59 1.59 c 0.05 0.04 0.11 0.07 0.17 0.07 c 0.06 0 0.13 -0.02 0.17 -0.07 l 3.77 -3.77 c 0.17 -0.17 0.42 -0.25 0.66 -0.21 c 0.24 0.04 0.45 0.2 0.55 0.43 c 0.57 1.25 0.74 2.64 0.49 3.99 c -0.25 1.35 -0.9 2.59 -1.87 3.56 c -0.97 0.97 -2.21 1.62 -3.56 1.87 c -1.18 0.21 -2.39 0.11 -3.5 -0.29 l -6.56 6.56 c -0.54 0.54 -1.27 0.84 -2.03 0.84 c -0.76 0 -1.49 -0.3 -2.03 -0.84 c -0.54 -0.54 -0.84 -1.27 -0.84 -2.03 c 0 -0.76 0.3 -1.49 0.84 -2.03 l 6.56 -6.56 c -0.4 -1.12 -0.51 -2.33 -0.29 -3.5 c 0.25 -1.35 0.9 -2.59 1.87 -3.56 c 0.97 -0.97 2.21 -1.62 3.56 -1.87 z" fill="#A0AEC0"/>
</svg>

Other benefits:

usually you can decrease the svg file size using relative commands
some graphic apps might already added unnecessarily transforms (like scale(1 1), rotate(0) etc): you can keep your svg more slick and readable

Also described by Lea Verou.