SVG na Base64: jak konwertowac i osadzac wektory inline
SVG to wektorowy format graficzny przechowywany jako tekst XML. Mozna go osadzac w HTML i CSS na kilka sposobow: jako plik zewnetrzny, jako inline SVG, lub jako Base64. Kazda metoda ma swoje zastosowania.
SVG jako Base64 vs inline SVG
Inline SVG: <svg xmlns='http://www.w3.org/2000/svg'>...</svg> - bezposrednio w HTML. Zalety: mozliwosc manipulacji przez CSS i JS, czytelny kod. Base64 SVG: <img src='data:image/svg+xml;base64,...'> lub w CSS url(). Zalety: dziala w atrybucie src elementu img, mozna uzyc w CSS background-image. Dla ikon interaktywnych manipulowanych przez JavaScript: inline SVG. Dla statycznych ikon i tla: Base64 lub plik zewnetrzny.
Konwersja SVG na Base64 przez WikiPlus
Wgraj plik SVG do WikiPlus Image to Base64. Narzedzie wygeneruje data URI: data:image/svg+xml;base64,.... Skopiuj i uzyj w HTML lub CSS. Alternatywa bez Base64: SVG mozna rowniez osadzic jako data URI bez kodowania Base64, uzywajac URL-encodingu: data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>...</svg>. Ta metoda jest czytelniejsza i czesto krotSza dla prostych SVG.
Optymalizacja SVG przed konwersja na Base64
Przed konwersja SVG na Base64, warto go zoptymalizowac przez SVGO (narzedzie optymalizacji SVG). SVGO usuwa zbedne komentarze, spacje i atrybuty, zmniejszajac rozmiar SVG o 20-70%. Mniejszy SVG = krotszy ciag Base64 = mniejszy dokument HTML/CSS. SVGO jest dostepny jako narzedzie CLI, plugin Webpack/Vite, lub online przez sqip.io.
Kiedy SVG nie powinien byc Base64
Nie uzywaj SVG Base64 gdy: SVG jest duzy (ponad 10 KB) - zewnetrzny plik z cachowaniem bedzie lepszy; SVG musi byc manipulowany przez JavaScript (zmiana kolorow, animacje) - potrzebujesz inline SVG; SVG jest reuzywany na wielu stronach - zewnetrzny plik jest cachowany przez przegladarke; potrzebujesz obslugiwac bardzo stare przegladarki (IE8 i starsze) - Base64 SVG moze nie dzialac.
Często zadawane pytania
- Czy animacje SVG dzialaja po zakodowaniu Base64?
- Tak, animacje CSS i SMIL wewnatrz SVG dzialaja po zakodowaniu Base64. Animacje JavaScript (manipulacja DOM) nie dzialaja - SVG osadzony przez Base64 jest izolowany od DOM strony.
- Jak zmieniac kolory SVG osadzonego jako Base64?
- Nie mozna bezposrednio zmienic kolorow SVG osadzonego jako Base64 przez CSS. Musisz zmienic kolor w zrodle SVG, ponownie zakodowac i zaktualizowac data URI. Dla dynamicznie zmienianych ikon uzywaj inline SVG lub CSS currentColor.
- Jaki jest najlepszy sposob testowania SVG Base64?
- Wklej data URI do atrybutu src elementu img w narzedziu deweloperskim przegladarki lub w prostym pliku HTML i otworz go w przegladarce.