如何正确编辑SVG文件，使其转为正方形并让原图形居中？

我有一批SVG格式的Logo，大多是不同宽高比的横版矩形，想要把它们调整为完美正方形，同时让原Logo在正方形内水平、垂直居中。

以下是示例SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="53.6" height="48.7" viewBox="0 0 53.6 48.7" xmlns:v="https://vecta.io/nano">
<path d="M53.6 24.3L11.4 0v23.5c0-1.2-.1-1.6-.5-2.1-.5-.5-1-.6-3-.6-1.8 0-2.9.1-3.5.4-.7.4-1 .9-1.1 1.8h2.3c.1-.6.2-.6 1.9-.6 1.4 0 1.6.1 1.6 1.1v.3H9c-.4-.4-.7-.5-1.7-.5-1.7 0-2.3 0-2.9.2-.9.2-1.3.9-1.3 2 0 1.5.6 2 2.7 2 1.5 0 2.1-.1 2.5-.2.4-.2.7-.4.9-.8h.1v.9h2.2v21.4l42.1-24.5zM7 25.9c-1.2 0-1.6-.1-1.6-.7 0-.5.4-.7 1.8-.7 1 0 1.3 0 1.5.1.3.1.4.3.4.5 0 .7-.5.8-2.1.8zm-7-7.6h2.4v9H0z" fill="#9253a0"/>
<path d="M15.4 19.5V21h3.7v1.7h-3.7v1.8c0 .7 0 .8.1.9.1.2.4.3.8.3.5 0 .7-.1.8-.3.1-.1.1-.2.1-.8h2.1c0 1.2-.1 1.6-.5 2-.5.6-1.2.8-2.8.8-1.5 0-2.1-.1-2.5-.6-.3-.3-.5-.7-.5-1.4v-.9-1.8h-1.2V21H13v-1.4h2.4zm6.8 1.5v.9h.1c.4-.8 1.1-1.1 2.4-1.1 1.9 0 2.5.6 2.5 2.5v.4H25c0-.9-.3-1.2-1.2-1.2-.5 0-1 .2-1.2.5s-.3.7-.3 1.6v2.6H20V21h2.2zm13.5.4c.6.5.8 1 .8 2.6 0 1.7-.2 2.3-.7 2.8-.6.5-1.4.6-3.7.6s-3.1-.1-3.7-.6-.7-1.1-.7-2.9c0-1.5.2-2.1.8-2.5s1.5-.6 3.6-.6c2.2 0 3 .2 3.6.6zm-5.6 2.8c0 .8.1 1.1.5 1.3.3.1.8.2 1.6.2 1.8 0 2.1-.2 2.1-1.6 0-.8-.1-1.2-.6-1.3-.3-.1-.8-.2-1.5-.2-1.8 0-2.1.2-2.1 1.6zm9.4-5.8v1.8h-2.3v-1.8h2.3zm0 2.6v6.3h-2.3V21h2.3zm3 4.2c0 .5.5.7 1.9.7 1.5 0 1.9-.1 1.9-.6 0-.3-.2-.4-.5-.5h-3.2c-1.8 0-2.5-.6-2.5-1.9 0-1 .3-1.6 1.1-1.8.5-.2 1.6-.3 3.2-.3 2.1 0 2.9.1 3.4.6.3.3.4.6.5 1.4H46c-.1-.2-.1-.2-.2-.3-.2-.1-.7-.2-1.5-.2-1.5 0-1.9.1-1.9.5 0 .3.2.4.5.4l3.2.1c1.8 0 2.5.5 2.5 2 0 1.8-.8 2.2-4.4 2.2-2.3 0-3-.1-3.6-.6-.4-.3-.5-.8-.5-1.5h2.4z" fill="#fff"/>
</svg>

这些SVG的属性情况不一：有的同时包含width、height和viewBox，有的只有viewBox，有的仅包含width/height，需要一个通用的解决方案。

我当前的做法是把width和height设为原宽高中的较大值，同时保留原始viewBox，看起来能满足需求，但不确定这是否符合规范（同时使用width/height和viewBox是否合适？）。另外也考虑过添加<g>标签并使用transform属性，但也觉得不是正确做法。

正确解决方案：利用SVG原生属性实现规范居中 #

首先明确：同时使用width/height和viewBox完全符合SVG规范。viewBox定义了SVG内部的坐标系统和内容范围，width/height定义了SVG元素在页面中占据的实际尺寸，浏览器会通过默认的preserveAspectRatio="xMidYMid meet"属性，自动将viewBox内的内容按比例缩放，并在width/height指定的容器内水平、垂直居中，这正好匹配你的需求。

针对不同属性情况的SVG，处理方式如下：

1. 同时包含viewBox、width、height的SVG

• 计算正方形边长：squareSize = max(原width值, 原height值)
• 将width和height都修改为squareSize，保留原viewBox即可。浏览器会自动把原Logo内容在正方形内居中，多余的空间会留空白（如果需要填充背景，可在SVG最底部添加一个与正方形尺寸一致的<rect>元素）。

以示例SVG为例：原width=53.6，height=48.7，将height改为53.6后，浏览器会自动把垂直方向的内容居中，水平方向刚好填满，完美实现正方形效果。

2. 仅包含viewBox，无width/height的SVG

• 从viewBox提取原宽高：viewBox格式为min-x min-y width height，取后两个数值作为原宽高
• 计算squareSize = max(viewBox宽度, viewBox高度)
• 添加width和height属性，值都设为squareSize，同样依赖默认的preserveAspectRatio实现居中。

3. 仅包含width/height，无viewBox的SVG

• 这种情况下，SVG的坐标系统默认等同于viewBox="0 0 width height"
• 直接将width和height都设为max(原width值, 原height值)即可，浏览器会自动按比例缩放并居中内容。

为什么不推荐用<g>+transform？ #

这种方法需要手动计算偏移量（比如横版SVG需要向下偏移(squareSize - 原height)/2），不仅操作繁琐，还容易因单位或坐标系统差异出错，完全没必要——SVG原生的preserveAspectRatio已经提供了更简洁、规范的声明式解决方案。

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