(help) scaling & centering SVG

[Hadden89]

I'm trying to fiddle a bit with icons but there is something I didn't understand well yet.

I add the well known <g transform="scale(.85 .85)"></g> to scale the icon path

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase"><g transform="scale(.75 .75)"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></g></svg>

but still no clue on how centering with the start infos. Probably should be transformed/translated doing some maths in which I'm very bad
My guess was to use transform origin="center" but unsure how to place it at html level and if it works at all.

//edit: probably I just had to use matrix which include both scale, skew (not used) and transform ^^

<g transform="matrix(.85 0 0 .85 2 2)"></g>

[sjudenim]

This doesn't answer your question as you asked it, but I find it much easier to work with the image in inkscape and then test it here to get the markup code. You can also work in reverse by loading the code at that site and then downloading the image to use in inkscape

That's what I did to your icon and got this

<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" class="feather feather-briefcase">
  <g transform="matrix(.75 0 0 .75 3.075 3.125)">
    <rect width="20" height="14" x="2" y="7" rx="2" ry="2"/>
    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
  </g>
</svg>

[Hadden89]

@sjudenim for some reason I failed with inkscape. I centered the icon in the viewbox (apparently) but still was messed up in V. Then I "optimized" it with svgomg (inkscape add a lot of not necessary code) and went manually with the matrix (scale+transform) which worked cool.

[sjudenim]

@Hadden89

You have to make sure your viewbox is the same size as the width and height in V. If the the viewbox is larger or smaller it will not be centered in V even though it is centered in the image. You can either adjust your viewbox to match or change the height and width in V for the button space (not the svg).