Kiedy już mamy to, co nazywamy „blokiem defs” SVG - ten fragment SVG, który definiuje wszystko, co chcemy narysować później - gdzie to umieścimy? Do tej pory umieszczaliśmy go bezpośrednio w kodzie HTML i to absolutnie działa. Jeśli zostawimy go na górze strony, powiedz zaraz po otwierającym tagu:
To zadziała świetnie we wszystkich przeglądarkach obsługujących SVG.
To może być kuszące, aby przesunąć to w dół. Być może ikony nie są bardzo istotne dla strony, nie są tak istotne, jak rzeczywista zawartość, którą strona ma dostarczać, więc zamiast tego przenosimy ikony na dół strony, opóźniając ich ładowanie, jak to często robimy w przypadku JavaScript. Próbujemy tego na filmie, ale w ogóle występują problemy z renderowaniem ikon w przeglądarce Safari, które później próbowaliśmy . Szczerze mówiąc, widziałem niespójne zachowanie lub różne typy w innych przeglądarkach, jak również robię to w ten sposób, i wydaje się, że krajobraz nieco się zmienia. Słyszałem więc: to trudna rzecz do wykonania. Najbezpieczniej jest umieścić blok na górze, jeśli w końcu zachowasz defekty w swoich dokumentach.
W tym filmie przyjrzymy się podstawowym testom tego wszystkiego, a następnie przyjrzymy się niektórym rzeczywistym witrynom, które używają tego systemu i jak / gdzie wstawiają blok svg defs.
Zobacz Pen 954e71cb5d5e79fb61d3c89bb3f21b8a autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Uwaga
Podoba mi się termin „blokada SVG” - tylko po to, abyśmy mogli nazwać go czymś, co ma określony cel, ale tak naprawdę nie ma oficjalnej nazwy. Ale nie zawsze musisz faktycznie używać tagu. Kiedy używasz s, te i tak nie renderują się same, i rzeczywiście nie sądzę, że powinny znajdować się w środku . Słyszałem, że definicje gradientów w SVG są takie same i nie będą działać nawet, jeśli są w formacie . Niezależnie od tego, nadal jest to „blok kodu SVG, który po prostu definiujemy do wykorzystania później”, więc prawdopodobnie będę nazywać go „blokiem SVG defs”.