Jak dodać plik w formacie SVG do strony internetowej?

Czas czytania: 3 minut

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 na stronie w formacie SVG

Istnieje kilka metod umożliwiających nam dodawanie plików w formacie SVG na stronę internetową. Mogą być co prawda problemy z dodaniem pliku SVG do np. WordPress (problem ten rozwiązują na szczęście wtyczki). Zazwyczaj źródłem takiego problemu są względy bezpieczeństwa. Większość popularnych plików jest rastrowa (np. JPG, PNG) podczas gdy SVG jest plikiem wektorowym.

W formacie SVG najczęściej spotkać można np. logo.

Jak dodawać pliki SVG do WordPress

Domyślnie biblioteka multimediów WoerdPress nie ma możliwości dodawania plików SVG. Być może zmieni się to z kolejnymi aktualizacjami. Dlatego by móc swobodnie dodawać pliki w formacie SVG warto jest zaintalować wtyczki np.SVG Support lub Safe SVG

Dodawanie pliku SVG jako zwykły obrazek <img>

Najprościej i najłatwiej dodać można do strony plik z pomocą zwykłego <img>. Ta metoda powinna działać praktycznie na prawie każdej stronie.

Pliki w formacie SVG możemy dodawać analogicznie jak zwykłe obrazy np.

<img src="star.svg" alt="Star - gwiazdka" style="width:400px;height:auto">

---

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

Dodawanie z pomocą <object>

Kolejnym sposobem dodawania plików SVG do witryny jest zastosowanie znacznika <object>

<object data="star.svg" type="image/svg+xml"></object>

Plik SVG z pomocą CSS jako tło

Podobnie sprawa ma się w przypadku użycia pliku jako tła do strony, lub jakiegoś elementu (np. <div>).

element{
background: url(star.svg);
}

Plik będzie funkcjonował analogicznie jak każdy inny umieszczony w tle.

Kolorowanie (zmiana koloru w) 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ą:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#312783;stroke:#000000;stroke-miterlimit:10;}
    .st1{fill:#3C3C3B;stroke:#000000;stroke-miterlimit:10;}
</style>
<polygon class="st0" points="236.75,217.66 159,200.43 100.72,254.71 93.08,175.44 23.45,136.79 96.48,105.03 111.71,26.86 
    164.49,86.5 243.54,76.83 203.13,145.46 "/>
<ellipse class="st1" cx="176.34" cy="262.33" rx="97.61" ry="3.75"/>
</svg>

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

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ę.

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