Ikona w arkuszu stylów nie musi być osobnym plikiem. Wystarczy, że kod SVG zamienisz na Data URI SVG i wkleisz go do reguły background-image. Gdy formularz przyjmuje tylko PNG, ten sam kod wyeksportujesz jako plik graficzny.
Cztery kroki od kodu do pliku
- Wklej kod SVG w pole tekstowe. Na początku stoi przykład: niebieskie koło z białą gwiazdą.
- Sprawdź podgląd na ciemnym tle w szachownicę. Dzięki niemu jasne kształty pozostają widoczne.
- Kliknij Kopiuj Data URI albo Kopiuj Base64. Oba przyciski kopiują cały adres z prefiksem
data:. - Dla PNG wpisz rozmiar w pikselach i kliknij Pobierz jako PNG. Nazwa pliku zawiera rozmiar, na przykład
vector-512x512.png.
Data URI SVG: dwa sposoby kodowania
Pierwszy przycisk koduje procentowo i dodatkowo zabezpiecza apostrofy i cudzysłowy. Przy SVG wynik bywa krótszy niż Base64. Drugi wydłuża tekst o około jedną trzecią, ale radzi sobie ze znakami spoza ASCII. Narzędzie nie minimalizuje kodu SVG: adres zawiera twój kod bez zmian, tylko zakodowany. Mała ikona, na przykład strzałka o rozmiarze 400 bajtów w własnym polu wyboru, oszczędza jedno żądanie. Gdy pole z kodem jest puste, przyciski kopiowania i pobierania nic nie robią.
Gdy PNG się nie pobiera
- Brakuje atrybutu
xmlns="http://www.w3.org/2000/svg". Wtedy przeglądarka zwykle nie wczyta obrazu, a podgląd mimo to działa. Nie pojawia się żaden komunikat. - SVG łączy się z zewnętrznymi obrazami, czcionkami lub arkuszami stylów. Te zasoby nie są ładowane.
- Rozmiar jest za duży dla limitu canvasu.
Kwadrat, przezroczystość i zaufany kod
PNG zawsze jest kwadratowy, więc szeroka grafika zostanie rozciągnięta, a tło pozostanie przezroczyste. Pusty lub błędny rozmiar zamienia się na 512, a część dziesiętna jest odcinana. Przyciski kopiowania zapisują wynik w schowku. Plik PNG powstaje lokalnie i trafia do zwykłego pobierania. Wszystko dzieje się w przeglądarce i żaden przycisk nie wysyła żądań. Podgląd to element obrazu z adresem Data URI. Dodaje xmlns tylko na potrzeby wyświetlania, a eksport PNG i skopiowany Data URI go nie dodają. Skrypty i procedury obsługi zdarzeń we wklejonym kodzie nie działają w podglądzie.