如何在HTML中定义SVG并通过CSS background-image的url属性直接调用

实现方案 #

你可以通过以下两种方案实现效果，两种方案的CSS都仅负责通用展示规则，和具体SVG内容完全解耦，更换SVG不需要修改CSS代码。

方案1：使用<img>标签引入SVG（推荐，通用性最强） #

HTML 代码

<img class="circle-image" src="你的SVG资源地址" alt="图标">

CSS 代码

.circle-image {
  width: 3em;
  height: 3em;
  border-radius: 100%;
  object-fit: cover;
}

方案2：内联SVG代码到HTML中 #

如果不需要外部引入SVG，可以直接把SVG源码写在HTML容器内。

HTML 代码

<div class="circle-image">
  <!-- 此处替换为你自己的SVG源码即可 -->
  <svg viewBox="0 0 3 2" xmlns="http://www.w3.org/2000/svg">
    <rect width="1" height="2" x="0" fill="#009246"/>
    <rect width="1" height="2" x="1" fill="#fff"/>
    <rect width="1" height="2" x="2" fill="#ce2b37"/>
  </svg>
</div>

CSS 代码

.circle-image {
  width: 3em;
  height: 3em;
  border-radius: 100%;
  overflow: hidden;
}
.circle-image svg {
  width: 100%;
  height: 100%;
  display: block;
}

两种方案的CSS都是通用的圆形展示样式，可复用在任意需要圆形裁剪的图片/SVG场景，完全不需要和具体的SVG内容绑定，符合你要求的CSS与网页内容解耦的需求。

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