Kolorowanie ikonki pliku .svg

Question

Witam, do mojego paska menu brakowało mi jednej ikonki którą stowrzyłem podczas dzisiejszego romansu z grafiką wektorową. Ma ona trochę inną składnię niż gotowce których używałem i niestety nie działa dodanie do niej:

fill="#ffffff"

i cały czas pozostaje czarna.

Jak żyć? Proszę o pomoc, oto kod:
 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X7 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="25px" height="25px"  version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 847 847"
 xmlns:xlink="http://www.w3.org/1999/xlink" fill="#ffffff">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:#020201}
    .fil1 {fill:#141413}
   ]]>
  </style>
 </defs>
<symbol fill="#ffffff" id="illuminati" viewBox="-4001 -3417 8848 7680">
 <path class="fil0" d="M-1512 1740c-5,-47 1274,-2286 3092,-914 163,123 747,708 766,886 18,175 -1416,2270 -3087,916 -160,-130 -754,-699 -771,-888zm-2489 2514l0 -28 4436 -7643 4412 7680 -8848 -9z"/>
 <path class="fil0" d="M251 2127c-57,0 -43,14 -43,-41 -486,-380 -19,-947 424,-728 337,167 312,874 -381,769zm-75 -1316c-1329,404 -640,2189 491,1865 1254,-360 718,-2233 -491,-1865z"/>
 <path class="fil1" d="M251 2127c0,-56 13,-41 -43,-41 0,55 -14,41 43,41z"/>
</symbol>
 <g id="Warstwa_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <g id="_664591424">
   <g>
    <path class="fil0" d="M250 538c0,-4 118,-211 285,-84 15,11 69,65 71,81 2,17 -131,210 -285,85 -14,-12 -69,-65 -71,-82zm-229 232l0 -3 409 -705 407 709 -816 -1z"/>
    <path class="fil0" d="M413 574c-5,0 -4,1 -4,-4 -45,-35 -2,-87 39,-67 31,15 29,80 -35,71zm-7 -122c-123,38 -59,202 45,172 116,-33 66,-206 -45,-172z"/>
    <path class="fil1" d="M413 574c0,-5 1,-4 -4,-4 0,5 -1,4 4,4z"/>
   </g>
  </g>
 </g>
</svg>

Pozdrawiam

Answer 1

path[class*=fil] {fill: #f00;}

Styluj ścieżki, nie symbol

Comments

Do symbolu dodałem z desperacji :) Poprzednio, w gotowcach zadziałało dodanie w <svg...
 

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="25px" height="25px" fill="#ffffff" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
	<path d="M76.982,50c0-0.847-0.474-1.575-1.167-1.957L26.541,19.595c-0.363-0.253-0.803-0.404-1.279-0.404
		c-1.239,0-2.244,1.004-2.244,2.243c0,0.087,0.016,0.169,0.026,0.253h-0.026v57.131h0.026c0.127,1.119,1.066,1.99,2.218,1.99
		c0.409,0,0.787-0.117,1.117-0.308l0.02,0.035L75.875,51.97l-0.02-0.035C76.526,51.547,76.982,50.83,76.982,50z"/>
</g>
</svg>

A teraz nie działa...
Nie rozumiem też twojego kodu. Po dodaniu fill="#ffffff" lub fill: #f00; do ścieżek, ikonka dalej jest czarna.

---

Dodałem ten kod do css i ikonka stała się czerwona

---

Teraz to już wymiękam :D Miała być biała, u mnie jest czarna, u ciebie czerwona. Tylko rozumiem zapisałeś to jako plik svg który potem dodałeś do html za pomocą:
 

<embed src="ikonki/illuminati.svg" type="image/svg+xml"/>

?

---

Zrobiłem nowy obrazek wektorowy tym razem już biały, zmienilem tylko wielkosc i szerokosc na px i działa.

---

embed? Przecież teraz się wkłada SVG od razu do HTML, względnie do img ;)

---

Jak od razu do html? Chcę mieć czytelny kod a nie dodatkowe sto lini.

---

Przecież widać wyraźnie gdzie się zaczyna i kończy SVG w HTML. Poza tym - wynikowy kod nie ma być czytelny. Czytelność powinna być zachowana tylko w czasie developingu, a na produkcji najlepiej, żeby kod był zminifikowany, jak choćby na mojej domowej.

No i wiele rzeczy z SVG można zrobić tylko wówczas, gdy będzie w HTML (jak choćby właśnie zabawa z fill)

---

Dzięki za rady ;)