如何在Styled Components的Div组件中使用SVG作为背景图

要给Styled Components的Div设置SVG背景，有两种简单可行的实现方式，以下是具体操作：

方法一：将SVG转为Base64格式引用 #

把SVG代码转换成Base64编码后，直接通过background-image调用，这种方式无需处理字符转义，使用更省心。

实现代码： #

import styled from 'styled-components';

export const StyledStepBox = styled.div`
  width: 30%;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 已将你提供的SVG转换为Base64编码 */
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzQiIGhlaWdodD0iNTY4IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjc0IDU2OCI+PHJlY3Qgd2lkdGg9IjI3NCIgaGVpZ2h0PSI1NjgiIGZpbGw9IiM0ODNFRkYiIHJ4PSIxMCIvPjxtYXNrIGlkPSJhIiB3aWR0aD0iMjc0IiBoZWlnaHQ9IjU2OCIgeD0iMCIgeT0iMCIgbWFzay11bml0cy11c2VyU3BhY2VPbmVzPSJ1c2VyU3BhY2VPbmVzIiBzdHlsZT0ibWFzay10eXBlOmFscGhhIj48cmVjdCB3aWR0aD0iMjc0IiBoZWlnaHQ9IjU2OCIgZmlsbD0iI2ZmZiIgcngxMCIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI2EpIj48cGF0aCBmaWxsPSIjNjI1OUZGIiBmaWxsLW9wYWNpdHk9ImV2ZW5vZGQiIGQ9Ik0tMzQuNjkyIDU0My4xMDFDMy4yNDcgNjMyLjUzOCAxNjguNzY3IDY4NS4wMTcgMjExLjk2IDYxMi41MmM0My4xOTQtNzIuNDk3LTY2LjA5OS04NS42NTMtMTA0LjczNS0xNjAuNTY5LTM4LjYzNS03NC45MTYtNjguNjU3LTEyMS42NzQtMTI0LjQ4Mi0xMDQuNjA3LTU1LjgyNCAxNy4wNjgtNTUuMzc1IDEwNi4zMi0xNy40MzYgMTk1Ljc1N1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIGZpbGw9IiNGOTgxOEUiIGZpbGwtb3BhY2l0eT0iZXZlbm9kZCIgZD0iTTIzMy4wOTUgNjAxLjE1M2M2MC42NzktMjguMjc4IDkyLjgzOS0xNDMuNTI2IDQxLjg3NS0xNzEuNTI4LTUwLjk2NS0yOC4wMDMtNTcuMzk3IDQ3LjU3OS0xMDguMDU5IDc1Ljk4Ny01MC42NjIgMjguNDA4LTgyLjE0IDUwLjIwNy02OS4wNDQgODguMjQxIDEzLjA5NiAzOC4wMzQgNzQuNTQ5IDM1LjU3OCAxMzUuMjI4IDcuM1oiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjxwYXRoIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49ImJldmVsIiBzdHJva2Utd2lkdGg9IjUiIGQ9Im0xNjUuMzA1IDQ2OS4wOTcgMTAuNjA3LTEwLjgwNk0yMDkuNDYxIDQ3NC41ODFsLTEyLjUwNi0xMC41MDNNMTg3LjU2IDQ4OC45OTFsLTYuOTA4IDE0Ljc5OCIvPjxwYXRoIGZpbGw9IiNGRkFGN0UiIGQ9Ik0uMzA1IDU0Ni44OTFjMzcuMDAzIDAgNjctMjkuOTk3IDY3LTY3cy0yOS45OTctNjctNjctNjctNjcgMjkuOTk3LTY3IDY3IDI5Ljk5NyA2NyA2N1oiLz48L2c+PC9zdmc+');
  background-size: cover; /* 可根据需求调整为contain、100% 100%等 */
  background-repeat: no-repeat;
  background-position: center;
`;

方法二：直接内联SVG字符串（需转义特殊字符） #

如果不想转换Base64，可以直接把SVG代码嵌入到data:image/svg+xml中，但要注意转义#为%23，避免和CSS语法冲突，同时统一引号格式防止报错。

实现代码： #

import styled from 'styled-components';

export const StyledStepBox = styled.div`
  width: 30%;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="274" height="568" fill="none" viewBox="0 0 274 568"><rect width="274" height="568" fill="%23483EFF" rx="10"/><mask id="a" width="274" height="568" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><rect width="274" height="568" fill="%23fff" rx="10"/></mask><g mask="url(%23a)"><path fill="%236259FF" fill-rule="evenodd" d="M-34.692 543.101C3.247 632.538 168.767 685.017 211.96 612.52c43.194-72.497-66.099-85.653-104.735-160.569-38.635-74.916-68.657-121.674-124.482-104.607-55.824 17.068-55.375 106.32-17.436 195.757Z" clip-rule="evenodd"/><path fill="%23F9818E" fill-rule="evenodd" d="M233.095 601.153c60.679-28.278 92.839-143.526 41.875-171.528-50.965-28.003-57.397 47.579-108.059 75.987-50.662 28.408-82.14 50.207-69.044 88.241 13.096 38.034 74.549 35.578 135.228 7.3Z" clip-rule="evenodd"/><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="bevel" stroke-width="5" d="m165.305 469.097 10.607-10.806M209.461 474.581l-12.506-10.503M187.56 488.991l-6.908 14.798"/><path fill="%23FFAF7E" d="M.305 546.891c37.003 0 67-29.997 67-67s-29.997-67-67-67-67 29.997-67 67 29.997 67 67 67Z"/></g></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
`;

注意事项： #

• background-size参数可按需调整：cover会让SVG覆盖整个容器（可能裁剪边缘），contain会完整显示SVG并保持比例，100% 100%会强制拉伸SVG填满容器。

内容的提问来源于stack exchange，提问作者Yuri da Paz Simonin