Jak dodać plik SVG do strony internetowej?

Kategoria wpisu Frontend, Kurs HTML, Kursy, PHP, HTML, CSS Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Temat plików SVG nie jest nowy na moim blogu – poruszyłam jego tematykę w sumie już kilkakrotnie. Tym razem postaram się wam pokazać jak można umieścić taki plik na stronie internetowej.

Dodawanie pliku SVG jako zwykły obrazek <img>

Jak zapewne wiecie lub też nie ze względu bezpieczeństwa WordPress nie zezwala na dodawanie plików SVG więc będę musiała trochę improwizować. Na potrzeby tego kursu stworzyłam taki o to plik:

plik SVG - wersja w JPG

plik SVG – wersja w JPG

Zanin zaczniecie pisać „ale to jest JPG a nie SVG” zapraszam akapit wyżej nad obrazek. Pliki SVG możemy dodawać analogicznie jak zwykłe obrazy np.

 

See the Pen
SVG size
by Aura (@Julka85)
on CodePen.

Jak widać użycie tego pliku nie rożni się specjalnie od innego pliku graficznego takiego jak JPG czy PNG.

budowa obrazka – jak dodać obrazek do strony

SVG jako tło

Podobnie sprawa ma się w przypadku użycia pliku jako tła strony, lub jakiegoś elementu.

Plik będzie funkcjonował analogicznie jak w przypadku innych.

Kolorowanie pliku SVG

Pliki SVG swoją strukturą nie przypominają tradycyjnych plików graficznych jak JPG czy PNG. Ich struktura bardziej przypomina kod strony internetowej. Przykładowo tak wygląda mój obrazek z gwiazdką:

Jak widać kod obrazka do skomplikowanych nie należy. I myślę, że bez większego problemu można go zmodyfikować.

See the Pen
Color SVG
by Aura (@Julka85)
on CodePen.

Jak widać na przykładzie przeniosłam <style> do CSS i dodałam efekt :hover. Zasady są takie jak w przypadku zwykłego obiektu HTML.

Teraz podniesiemy poprzeczkę i spróbujemy dodać do naszego pliku prostą animację.

See the Pen
move svg
by Aura (@Julka85)
on CodePen.

źródła:
https://css-tricks.com/using-svg/

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *