0

I'm trying to add a custom bullet using CSS list-style-image. Here is the attribute:

ul {
    list-style-image:url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z'/></svg>");
}

For convenience, this is the SVG file that is embedded in the list-style-image:

<?xml version='1.0' encoding='utf-8'?>
<svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'>
    <path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z'/>
</svg>

The problem is, when I try to add a fill attribute to <path>, the whole thing seems to break, as the SVG stop showing up as a bullet (the default ul circle bullet shows). I've tried using both fill='#f00', style='#f00' and stroke='#f00'. All of them breaks the SVG.

Any idea what might be the problem?

1 Answer 1

1

You cannot add fill to a path in a svg that has been converted to base64 like you normally do with inline svgs. Either add the fill before conversion to base64, or add it like this in your current css:

fill='%23f00'

The above is equivalent to fill='#f00'. This goes also for stroke, basically replace # with %23 in base64.

Stroke example: stroke='%23f00' stroke-width='1'

So your svg with fill code will be:

ul {
    list-style-image:url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='utf-8'?><svg width='18' height='18' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'><path d='m1671,566q0,40 -28,68l-724,724l-136,136q-28,28 -68,28t-68,-28l-136,-136l-362,-362q-28,-28 -28,-68t28,-68l136,-136q28,-28 68,-28t68,28l294,295l656,-657q28,-28 68,-28t68,28l136,136q28,28 28,68z' fill='%23f00'/></svg>");
}
1
  • Thanks! I will give this a try.
    – John Doe
    Commented Apr 2, 2021 at 7:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.