svg用作背景图

svg用做背景图的几种方式

1. 直接使用

background: url('data:image/svg xml;charset=utf-8,<svg width="10" height="10" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><g> <rect stroke="#000" transform="rotate(44.6804313659668 4.999999999999999,5.000000000000001)" height="6" width="6" y="2" x="2" stroke-width="0" fill="' $mainColor '"/></g></svg>') no-repeat 50% 50% / 100% 100%;

2. 转为base64后使用

background-image: url('data:image/svg xml;charset=utf-8,<svg width="41pt" height="44pt" viewBox="0 0 41 44" version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="#c01a3aff"><path fill="#c01a3a" opacity="1.00" d=" M 19.37 0.00 L 21.38 0.00 C 25.49 2.03 29.46 4.34 33.44 6.61 C 34.78 7.49 36.56 8.41 36.65 10.24 C 37.03 14.14 36.80 18.08 36.85 22.00 C 36.75 24.09 37.10 26.83 34.91 28.00 C 30.95 30.47 26.83 32.72 22.65 34.81 C 19.78 36.46 16.95 33.99 14.45 32.76 C 11.20 30.65 7.30 29.35 4.62 26.48 C 3.55 22.79 4.20 18.84 4.02 15.04 C 4.20 12.40 3.41 8.79 6.28 7.30 C 10.52 4.66 14.93 2.29 19.37 0.00 M 7.12 10.18 C 7.02 15.14 7.07 20.09 7.07 25.05 C 11.59 27.64 16.05 30.36 20.76 32.60 C 24.97 29.86 29.84 28.10 33.75 24.95 C 33.92 20.09 34.14 15.17 33.61 10.34 C 29.27 7.69 24.91 4.86 20.18 3.00 C 15.69 5.12 11.50 7.83 7.12 10.18 Z" /><path fill="#c01a3a" opacity="1.00" d=" M 12.03 15.90 C 11.49 13.85 13.99 12.40 15.68 13.39 C 17.71 15.45 19.11 18.02 20.82 20.34 C 22.60 17.93 24.10 15.26 26.30 13.18 C 28.29 12.15 31.06 14.60 29.62 16.57 C 27.51 19.80 25.26 22.95 22.87 25.97 C 22.05 27.37 19.80 27.44 18.92 26.05 C 16.46 22.79 14.04 19.46 12.03 15.90 Z" /><path fill="#c01a3a" opacity="1.00" d=" M 0.00 36.60 C 1.80 34.11 2.80 29.97 6.00 29.14 C 9.77 30.69 13.50 32.65 16.66 35.26 C 16.70 38.54 13.77 41.19 12.24 44.00 L 10.30 44.00 C 8.99 42.59 7.80 41.09 6.60 39.59 C 4.39 39.29 2.19 38.96 0.00 38.54 L 0.00 36.60 M 3.72 36.17 C 6.94 35.81 9.30 37.50 11.06 40.01 C 11.96 38.90 12.75 37.71 13.54 36.53 C 11.08 35.10 8.61 33.72 6.12 32.35 C 5.32 33.63 4.53 34.90 3.72 36.17 Z" /><path fill="#c01a3a" opacity="1.00" d=" M 24.15 35.32 C 27.64 32.61 31.58 30.04 35.89 28.94 C 38.04 31.12 39.52 33.85 41.00 36.51 L 41.00 38.46 C 38.80 38.89 36.59 39.21 34.37 39.49 C 33.16 41.03 31.94 42.56 30.61 44.00 L 28.86 44.00 C 27.15 41.22 24.72 38.63 24.15 35.32 M 27.52 36.36 C 28.25 37.56 28.98 38.76 29.77 39.92 C 31.68 37.57 34.00 35.66 37.26 36.08 C 36.47 34.81 35.68 33.54 34.90 32.26 C 32.43 33.61 29.97 34.98 27.52 36.36 Z" /></g></svg>');

3. 外置引用

background-image: url(test.svg);