16: System ikon SVG - źródło zewnętrzne - CSS-Tricks

Umieszczenie tego bloku SVG na górze dokumentu zdecydowanie działa. Ma to również pewne zalety, takie jak fakt, że nie trzeba wysyłać żądania HTTP, wszystkie informacje potrzebne do rysowania grafiki znajdują się bezpośrednio na stronie. Ale ma też pewne wady. Wszystkie te informacje muszą zostać przeanalizowane przez przeglądarkę na każdej stronie dokumentu. To nie jest oddzielny dokument, który może być już zapisany w pamięci podręcznej klienta, tak jak inne zasoby. A mówiąc o pamięci podręcznej, jeśli Twoja witryna buforuje HTML (zazwyczaj jest to dobry pomysł), możesz rozważyć to „rozdęcie pamięci podręcznej strony”, ponieważ każda strona w pamięci podręcznej zawiera ten duży, powtarzalny blok kodu - niezbyt wydajne wykorzystanie pamięci podręcznej serwera.

Dobrą wiadomością jest to, że możemy przenieść blokowanie plików SVG do zewnętrznego pliku i używać go tak jak obrazu lub innego zasobu.

Kiedy go użyjemy, ścieżka do pliku będzie w atrybucie, na przykład:

Warto wiedzieć: ograniczenia międzydomenowe są w tym przypadku trudne. Nawet nagłówki CORS nie pomogą ci z mojego doświadczenia. Więc nie ma CDN (nie można nawet odtwarzać na CodePen i na pewno nie można odtwarzać na file: // URL).

Kolejna ważna rzecz, którą należy wiedzieć: zdecydowanie musisz mieć atrybut xmlns, aby to zadziałało. Tak jak w przypadku, twój blok defs SVG powinien zaczynać się od:

Odniosłem wrażenie, że nie potrzebujesz tego w dokumencie HTML5 (w podobny sposób, w jaki nie potrzebujesz typów na s), ale być może dlatego, że ten plik nie znajduje się już w granicach dokumentu HTML5 (to jest z odniesieniami zewnętrznymi), potrzebujesz tego.

Z tego powodu demo tego jest tutaj.

Równie ważne jest, aby wiedzieć: żadna wersja IE tego nie obsługuje (do 11 w momencie publikacji). Ale jest sposób, aby to zadziałało, zasadniczo poprzez Ajaxing w bitach SVG, których potrzebujesz i wstawienie go tam, gdzie byłby, co sprawia, że jest to rodzaj „normalnego” wbudowanego SVG, który jest obsługiwany. Uruchomienie i przetestowanie tego w przeglądarce Internet Explorer przy użyciu BrowserStack zajmuje nam gorącą minutę, ale ostatecznie to się udaje.