css - how to change svg fill color when used as base-64 background image data? -

i'm using svg project, loaded in css this:

background-image: url('data:image/svg+xml;charset=us-ascii,%3csvg%20xmlns%3d%22http%3a//www.w3.org/2000/svg%22%20xmlns%3axlink%3d%22http%3a//www.w3.org/1999/xlink%22%20version%3d%221.1%22%20x%3d%220px%22%20y%3d%220px%22%20width%3d%2222px%22%20height%3d%2238px%22%20viewbox%3d%220%200%2022%2038%22%20enable-background%3d%22new%200%200%2022%2038%22%20xml%3aspace%3d%22preserve%22%3e%3cstyle%3e.style0%7bfill%3a%09%23f47216%3b%7d%3c/style%3e%3cpath%20d%3d%22m2.643%2038c-0.64%200-1.282-0.231-1.79-0.699c-1.074-0.988-1.143-2.661-0.154-3.735l13.13-14.258l0.664%204.4%20c-0.967-1.094-0.865-2.765%200.229-3.732s2.765-0.864%203.7%200.229l19.37%2017.592c0.898%201%200.9%202.545-0.035%203.542l4.588%2037.1%20c4.067%2037.7%203.4%2038%202.6%2038z%22%20class%3d%22style0%22/%3e%3c/svg%3e'); 

i have hover states highlight changing fill color of arrow.

for now, i'm applying same svg data fill portion (fill%3a%09%23f47216%3b%7d%3c f47216 color) changed right/new color. works pretty well. though, i'd know if there's maybe other smarter method.

base64 be:

url('data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihhtbg5zonhsaw5rpsjodhrwoi8vd3d3lnczlm9yzy8xotk5l3hsaw5riib2zxjzaw9upsixljeiihg9ijbweciget0imhb4iib3awr0ad0imjjwecigagvpz2h0psizohb4iib2awv3qm94psiwidagmjigmzgiigvuywjszs1iywnrz3jvdw5kpsjuzxcgmcawidiyidm4iib4bww6c3bhy2u9inbyzxnlcnzlij48c3r5bgu+lnn0ewxlmhtmawxsogkjzjq3mje2o308l3n0ewxlpjxwyxroigq9ik0yljy0myazogmtmc42ncawlteumjgyltaumjmxlteunzktmc42otljlteumdc0ltauotg4lteumtqzltiunjyxltaumtu0ltmunzm1bdezljezlte0lji1oewwljy2nca0ljqgyy0wljk2ny0xlja5nc0wljg2ns0yljc2nsawljiyos0zljczmnmyljc2ns0wljg2ncazljcgmc4ymjlmmtkumzcgmtcuntkyyzauodk4idegmc45idiuntq1ltaumdm1idmuntqytdquntg4idm3ljegqzqumdy3idm3ljcgmy40idm4idiuniazohoiignsyxnzpsjzdhlsztailz48l3n2zz4='); 

using tool http://www.base64encode.org/

this doesn't answer question directly, let following. can test see if:

.icon:hover .style0 {     fill: red; } 

will work, or use

.icon {     background-image: url('data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihhtbg5zonhsaw5rpsjodhrwoi8vd3d3lnczlm9yzy8xotk5l3hsaw5riib2zxjzaw9upsixljeiihg9ijbweciget0imhb4iib3awr0ad0imjjwecigagvpz2h0psizohb4iib2awv3qm94psiwidagmjigmzgiigvuywjszs1iywnrz3jvdw5kpsjuzxcgmcawidiyidm4iib4bww6c3bhy2u9inbyzxnlcnzlij48c3r5bgu+lnn0ewxlmhtmawxsogkjzjq3mje2o308l3n0ewxlpjxwyxroigq9ik0yljy0myazogmtmc42ncawlteumjgyltaumjmxlteunzktmc42otljlteumdc0ltauotg4lteumtqzltiunjyxltaumtu0ltmunzm1bdezljezlte0lji1oewwljy2nca0ljqgyy0wljk2ny0xlja5nc0wljg2ns0yljc2nsawljiyos0zljczmnmyljc2ns0wljg2ncazljcgmc4ymjlmmtkumzcgmtcuntkyyzauodk4idegmc45idiuntq1ltaumdm1idmuntqytdquntg4idm3ljegqzqumdy3idm3ljcgmy40idm4idiuniazohoiignsyxnzpsjzdhlsztailz48l3n2zz4=');     height: 40px;     width: 40px; }  .icon:hover {     background-image: url('data:image/svg+xml;base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciihhtbg5zonhsaw5rpsjodhrwoi8vd3d3lnczlm9yzy8xotk5l3hsaw5riib2zxjzaw9upsixljeiihg9ijbweciget0imhb4iib3awr0ad0imjjwecigagvpz2h0psizohb4iib2awv3qm94psiwidagmjigmzgiigvuywjszs1iywnrz3jvdw5kpsjuzxcgmcawidiyidm4iib4bww6c3bhy2u9inbyzxnlcnzlij48c3r5bgu+lnn0ewxlmhtmawxsoglyzwq7ftwvc3r5bgu+phbhdgggzd0ittiunjqzidm4yy0wljy0idatms4yoditmc4ymzetms43os0wljy5owmtms4wnzqtmc45odgtms4xndmtmi42njetmc4xntqtmy43mzvsmtmumtmtmtqumju4tdaunjy0idquncbjltauoty3lteumdk0ltauody1ltiunzy1idaumji5ltmunzmycziunzy1ltauody0idmunyawljiyouwxos4znyaxny41otjjmc44otggmsawljkgmi41ndutmc4wmzugmy41ndjmnc41odggmzcumsbdnc4wnjcgmzcunyazljqgmzggmi42idm4eiigy2xhc3m9inn0ewxlmcivpjwvc3znpg=='); } 

which seems inefficient me because forced replicate lot of same information hover when want change color.

working example