html - Can I use an svg image (i.e. the xml) as a list-style-image CSS attribute? -

html - Can I use an svg image (i.e. the xml) as a list-style-image CSS attribute? -

i want distribute single file webpage colleagues, i.e. no external graphics/js/css. in html file, need alter list-style-image attributes lists, in case replace bullet image. know can inserting graphic data:url below

ul { list-style-image: url('data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wij8+cjxzdmcgd2lkdgg9ijiwiibozwlnahq9ijiwiib4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihhtbg5zonn2zz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmcipgogpcetlsbdcmvhdgvkihdpdgggu1zhlwvkaxqglsbodhrwoi8vc3znlwvkaxquz29vz2xly29kzs5jb20vic0tpgokidxnpgogidx0axrszt5myxllciaxpc90axrszt4kica8y2lyy2xligzpbgw9im5vbmuiihn0cm9rzt0iizawmdawmcigc3ryb2tllxdpzhropsiyiibzdhjva2utzgfzagfycmf5psjudwxsiibzdhjva2utbgluzwpvaw49im51bgwiihn0cm9rzs1saw5ly2fwpsjudwxsiibmawxslw9wywnpdhk9ijaiign4psixmc4xmzixmdmiign5psi5ljg2njk4nyigcj0ini42odk0ntmiiglkpsjzdmdfmiivpgogidxsaw5liglkpsjzdmdfmyigeti9ijezljy3njq2osigedi9ijewljizmzmzmyigete9ijuuntu4odiyiib4mt0imtaumjmzmzmziibmawxslw9wywnpdhk9ijaiihn0cm9rzs1saw5ly2fwpsjudwxsiibzdhjva2utbgluzwpvaw49im51bgwiihn0cm9rzs1kyxnoyxjyyxk9im51bgwiihn0cm9rzs13awr0ad0imiigc3ryb2tlpsijmdawmdawiibmawxspsjub25lii8+ciagpgxpbmugawq9inn2z181iib5mj0ios43otqxmtyiihgypsixnc4ymtc2ndgiihkxpsi5ljc5ndexniigede9ijuuotgymzuziibmawxslw9wywnpdhk9ijaiihn0cm9rzs1saw5ly2fwpsjudwxsiibzdhjva2utbgluzwpvaw49im51bgwiihn0cm9rzs1kyxnoyxjyyxk9im51bgwiihn0cm9rzs13awr0ad0imiigc3ryb2tlpsijmdawmdawiibmawxspsjub25lii8+cia8l2c+cjwvc3znpg=='); }

the above graphic svg file, original svg is

<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <!-- created svg-edit - http://svg-edit.googlecode.com/ --> <g> <title>layer 1</title> <circle fill="none" stroke="#000000" stroke-width="2" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="10.132103" cy="9.766961" r="6.589453" id="svg_2"/> <line id="svg_3" y2="13.676469" x2="10.233333" y1="5.558822" x1="10.233333" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="none"/> <line id="svg_5" y2="9.794116" x2="14.217648" y1="9.794116" x1="5.982353" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="none"/> </g> </svg>

i'd prefer able reference svg rather data: version of it, allow me straight modify image in svg rather modifying, trasnforming raw info version , updating data:url.

is possible reference svg graphic in css attribute ?

best regards,

colm

p.s. original question bit limited. mentioned image in svg due limited knowledge how images can created within html document.

my solution utilize html5 canvas instead of svg image, i.e. draw image/icon bulet list in javascript. 1 time done, e.g. in canvas id="plus" can create url e.g.

var pluscanvas = document.getelementbyid('plus'); imgplus = "url(" + pluscanvas.todataurl() + ")";

and modify image @ will, e.g.

$(this).css('list-style-image', imgplus)

you can utilize <img> tag

<img src="image.svg" alt="blah blah blah blah" />

you can create .svg file copying svg code , paste in text editor, save .svg.

refer http://css-tricks.com/using-svg/ more methods

<img src="http://upload.wikimedia.org/wikipedia/commons/5/55/magnifying_glass_icon.svg" alt="blah blah blah blah" />

eg:-

html css svg