SVG（Scalable Vector Graphics） 是一种用于描述二维图形和基于二维的图形应用程序的 XML 标记语言，它可以被任何图形看做是由几何形状组合而成。SVG 可以缩放到任意大小而不失真或失去任何质量。
一、SVG缩放居中
SVG图形缩放居中是许多设计师常常遇到的挑战。常规的做法是采用CSS技巧来使SVG居中，有两种常见的方式：
1. 使用CSS Flexbox
.parent {
display: flex;
justify-content: center;
align-items: center;
}
将SVG置于父元素内部，在其父元素上应用CSS Flexbox布局，SVG元素会自动居中。
2. 使用CSS绝对定位
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
将SVG置于绝对定位的子元素中，为其父元素添加相对定位，将SVG元素居中。
二、SVG等比例缩放
为了使SVG图形不会失真，缩放时应该采用等比例缩放。CSS中可以使用“transform：scale”属性来进行等比例缩放。例如：
svg{
height: 100px;
width: 100px;
transform: scale(2);
}
上述代码表示，在SVG原始尺寸的基础上，将图形等比例放大2倍。
三、SVG缩放图片
SVG中可以嵌入图片，也可以通过CSS样式设置background-image。无论哪种方式，在缩放时都需要特别注意。使用img来显示 SVG 图片时，不如直接在 HTML 中写入 SVG 代码，这样可以利用 SVG 的各种优势。例如：
<img src="example.svg" alt="Example SVG" width="200" height="200">
<svg viewBox="0 0 200 200" width="100" height="100">
<use xlink:href="#example" />
</svg>
第一种方式直接使用img标签，设置宽度和高度。在缩放时，图形会被拉伸，导致图像失真。第二种方式使用SVG标签嵌入图像，SVG会自动进行等比例缩放，保持图像不失真。
四、SVG缩放导致页面卡顿
在进行复杂的SVG缩放时，很容易导致页面卡顿的问题。这是因为SVG元素内部的DOM结构很复杂，浏览器需要经过许多计算才能正确绘制SVG图形。在这种情况下，我们可以考虑将SVG元素缩放到所需的大小之前，将其存储在本地，并在需要时载入。在SVG中，可以使用“viewBox”属性，按需载入指定大小。
五、SVG缩放的方法
除了上述方法外，SVG中还有许多其他的缩放方法：
1. CSS缩放
svg {
height: 100px;
width: 100px;
transform: scale(2);
}
使用CSS属性“transform: scale”进行缩放。
2. viewBox缩放
使用viewBox属性设置SVG元素显示区域，将SVG元素缩放到所需大小。
3. JS缩放
var svg = document.querySelector('svg');
var bbox = svg.getBBox();
var scale = 2;
svg.setAttribute('width', bbox.width * scale);
svg.setAttribute('height', bbox.height * scale);
使用JavaScript来获取SVG图形的边界框，并通过修改SVG元素的宽度和高度实现缩放。
六、SVG缩放和平移
在SVG中，还可以同时使用缩放和平移来实现更复杂的效果。例如：
将SVG元素缩小一半，并将其定位到(25, 25)的位置。
七、SVG缩放失真吗
在原始SVG尺寸的基础上进行等比例缩放，SVG图形不会失真。但是，如果SVG元素的比例被修改，例如将其缩放为非等比例的大小，图形会失真。
八、SVG缩放后偏移
在SVG缩放时，有时会发现一些元素在缩放后发生了偏移。这是因为SVG在进行缩放时会对其内部单独的元素进行变换。可以使用属性“transform-origin”来改变缩放时的原点。例如：
svg {
transform-origin: 50% 50%;
transform: scale(2);
}
上述代码表示将缩放原点改为SVG元素的中心，避免缩放后元素发生偏移。
九、SVG缩放后设置坐标出现问题
在进行SVG缩放时，我们还需要特别注意元素坐标的设置。例如：
在以上代码中，当SVG元素进行缩放时，其坐标系也会随之变化。在进行缩放时，应该根据需要设置元素的新坐标。
十、SVG缩放之后元素线条宽度不变
当SVG元素进行缩放时，其线条宽度不会随之变化。这是因为SVG中的线条宽度是以像素为单位进行计算的。可以使用属性“vector-effect”来改变线条宽度的计算单位。例如：
svg path {
vector-effect: non-scaling-stroke;
stroke-width: 2px;
}
上述代码表示使用基于路径的量来计算线条宽度，缩放时线条宽度不会改变。
