什么是SVG
SVG全称为Scalable Vector Graphics，可缩放矢量图形。它是一种基于XML语言描述二维图形的语言，可在文本文件中表示出各种图形，并且支持CSS样式和JavaScript脚本。与普通的图像格式不同，SVG图像在放大或者缩小时不会失真，因为它是基于矢量而不是像素的。
在Web开发中，SVG图像可以替代部分背景图片和图标，从而使页面的展示更加灵活和美观。但是，SVG图像的生成和编辑可能需要使用专业工具，比如Adobe Illustrator。
在CSS中显示SVG
要在CSS中显示SVG图像，一般有两种方式：
1.使用![]()
标签
最简单的方式就是把SVG图像作为一个普通的图片来展示，使用标签即可：
<img src="image.svg" alt="Image">这种方式的好处是兼容性好，直接把SVG文件嵌入HTML中，可以应用CSS样式。但是，需要注意的是，<img> 标签没有类似于background-size这样的CSS属性，因此无法直接对SVG进行缩放和平铺。如果需要修改SVG图像的大小和比例，需要通过CSS设置其父元素的大小属性来实现。
2.使用背景图像
另一种方法是将SVG作为背景图像，并在CSS中设置其background-size属性以及其他属性来展示。例如：
background-image: url(image.svg);
background-repeat: no-repeat;
background-size: contain;
这种方式的好处是可以直接对SVG进行缩放，平铺和颜色调整。同时，还可以在伪类元素中使用SVG，实现各种交互效果。
CSS修改SVG
1.改变颜色
要改变SVG图像的颜色，可以使用CSS的filter属性或background-color属性。
使用filter属性，可以将SVG图像应用不同的CSS函数，例如$hue-rotate$，$brightness$，$contrast$和$invert$。例如：
background: url(image.svg) no-repeat;
filter: hue-rotate(90deg);
这将对背景图片进行旋转，使它的颜色变为红色。
使用background-color属性，则可以将SVG图像颜色设置为背景颜色的反相色。例如：
background: url(image.svg) no-repeat;
background-color: #ff0000;
这将把SVG图像替换成背景颜色为红色。
2.修改大小和比例
要通过CSS修改SVG图像的大小和比例，可以使用background-size属性。该属性具有以下可选值：
auto：使用原始图像尺寸，或按照CSS盒子模型计算
cover：等比例缩放，使图像完全覆盖容器
contain：等比例缩放，使图像完全适应容器
像素值：指定宽度，高度，或同时指定宽度和高度
例如，要将SVG图像缩小一半：
background: url(image.svg) no-repeat;
background-size: 50%;
将SVG图像设置为$cover$，使其完全覆盖容器：
background: url(image.svg) no-repeat;
background-size: cover;
3.添加动画效果
要为SVG图像添加动画效果，可以使用CSS@keyframes规则和animation属性。例如，以下CSS代码可以使SVG图像按照一个缓慢的圆形路径移动：
@keyframes move {
0% {background-position: 0% 50%;}
100% {background-position: 100% 50%;}
}
.element {
background: url(image.svg) no-repeat;
animation: move 5s ease-in-out infinite;
}
其中，$@keyframes$规则指定SVG图像移动的路径和时间，$animation$属性将该动画应用于.CSS元素。此外，还可以在CSS中使用transform属性为SVG图像添加其他的动画效果。
结论
通过以上方法，我们可以在CSS中美观而灵活地展示SVG图像。对于开发人员来说，了解这些技能将有助于创建更具交互性和响应性的Web页面。