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.
Co znajdziesz w tym wpisie
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:
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.
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/
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.