Praca na SVG

Question

Czy muszę wklejać cały kod SVG na "chama" do HTML czy jest jakiś inny sposób żeby mieć dostęp do id i móc pracować w CSS/JS?

Answer 1

Jak wklejać cały kod? Przecież możesz normalnie umieścić obraz SVG na stronie za pomocą tagu `<img>`

<img src="obraz.svg" alt="obraz">

Comments

wiem ale jak tak zrobiłem, nie działał mi css

Answer 2

ID do elementu svg możesz dodać bez problemu na przykład

<img src="awesome.svg" id="awesome-icon" />

Niestety taki sposób nie pozwoli Ci zmieniać obrazka za pomocą CSSa. Na przykład coś takiego nie przejdzie:

svg:hover {
  fill: red;
}

Aby to zrobić musisz wkleić cały kod z pliku svg do strony. Możesz jednak ten proces zautomatyzować za pomocą JSa. Tutaj przykładowy kod: Link

Dzięki temu elementy SVG będziesz mógł wklejać w kodzie jako zwykłe obrazki, następnie będą one konwertowane na "inline svg" (nie wiem czy jest jakieś dobre określenie na to po polsku) dzięki czemu będziesz mógł manipulować obrazkiem za pomocą CSSa.