- Use single quotes for SVG attributes.
- Use
%23
for #.
- Use
%3c
for <.
- Use
%3e
for >.
Example Path
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
Example Polygon
&::after {
background-image: url("data:image/svg+xml,%3csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3e%3cpolygon points='28.05 36.05 25.9 33.95 34.3 25.55 8 25.55 8 22.55 34.3 22.55 25.85 14.1 28 12 40.05 24.05' fill='%23ffffff'/%3e%3c/svg%3e");
background-size: 24px 24px;
width: 24px;
height: 24px;
}