Jak dodać plik w formacie SVG do strony internetowej?

Jak dodać plik w formacie SVG do strony internetowej?

Czas czytania: 2 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.

jak dodać SVG do strony www
jak dodać SVG do strony www, how add SVG to web page

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.

<img src="star.svg" alt="Star - gwiazdka">

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
budowa obrazka – jak dodać obrazek do strony

Plik SVG w tle elementu na stronie

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

background: url(star.svg);

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

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

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/