[css-d] Using svg that is not base64 encoded for li bullet

[Larry Martell]

I have this code and it works, displaying a green circle instead of
the defaut li bullet:

    .observations li::before {
        content:
url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CgogPGc+CiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPgogIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSIxMiIgd2lkdGg9IjEyIiB5PSItMSIgeD0iLTEiLz4KIDwvZz4KIDxnPgogIDx0aXRsZT5MYXllciAxPC90aXRsZT4KICA8cGF0aCBzdHJva2U9Im51bGwiIGZpbGw9IiMxYWFmNTQiIGlkPSJzdmdfMSIgZD0ibTAuMjAyMzEsNC45NzYxNjljMCwtMi42NTUzNTkgMi4xMzg2NTQsLTQuODA0MDQyIDQuNzgxNjIsLTQuODA0MDQyYzIuNjQxODA3LDAgNC43ODE2MiwyLjE0ODY4MyA0Ljc4MTYyLDQuODA0MDQycy0yLjEzOTgxMiw0LjgwNDA0MiAtNC43ODE2Miw0LjgwNDA0MmMtMi42NDI5NDcsMCAtNC43ODE2MiwtMi4xNDg2ODMgLTQuNzgxNjIsLTQuODA0MDQyeiIvPgogPC9nPgo8L3N2Zz4=");
        margin-right: 6px;
    }

<ul class="observations" style="padding-left: 20px; list-style-type:none;">
    <::before></::before>
    <li style="line-height: 1.25;"><span style="color: black;">Current
version: Agile vGold Required version: Agile Silver</span></li>
</ul>

But now I need to change the color of the circle programmatically. I
ran that base64 through a decoder and it came out with this:

  <path stroke="null" fill="#1aaf54" id="svg_1"
d="m0.20231,4.976169c0,-2.655359 2.138654,-4.804042
4.78162,-4.804042c2.641807,0 4.78162,2.148683
4.78162,4.804042s-2.139812,4.804042 -4.78162,4.804042c-2.642947,0
-4.78162,-2.148683 -4.78162,-4.804042z"/>

And I am trying to use that in my li::before (hoping I can then set
the fill color):

.observations li::before {
         background-image:url("data:image/svg+xml;utf8,<svg
xmlns='http://www.w3.org/2000/svg' stroke='null' fill='#1aaf54' <path
d='m0.20231,4.976169c0,-2.655359 2.138654,-4.804042
4.78162,-4.804042c2.641807,0 4.78162,2.148683
4.78162,4.804042s-2.139812,4.804042 -4.78162,4.804042c-2.642947,0
-4.78162,-2.148683 -4.78162,-4.804042z' /> </svg>");
}

But no image is displayed. Can anyone see what I am doing wrong, or
tell me another way I can change the color of the circle.

Thanks!
______________________________________________________________________
css-discuss [css-d@css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/