Jakmile máme to, čemu říkáme náš „blok defs“ SVG - ta část SVG, která definuje všechny věci, které chceme později nakreslit - kam to dáme? Zatím jsme to dávali přímo do HTML, a to naprosto funguje. Necháme-li to v horní části stránky, řekněte hned za úvodní značku:
To bude fungovat skvěle ve všech prohlížečích, které podporují SVG.
Může to být lákavé posunout to dolů. Ikony možná nejsou pro stránku příliš důležité, ne tak důležité jako skutečný obsah, který mají poskytovat, takže místo toho přesuneme ikony do dolní části stránky a odložíme jejich načítání, jako to často děláme pomocí JavaScriptu. Zkoušíme to ve videu, ale má problémy s vykreslováním ikon Safari, které jsme později zkusili vůbec. Abych byl upřímný, viděl jsem nekonzistentní chování nebo různé typy v jiných prohlížečích, jak to dělají tímto způsobem, a zdá se, že se krajina v tomto ohledu trochu mění. Takže jsem slyšel: je obtížné implementovat. Nejbezpečnější je umístit blok na začátek, pokud nakonec ponecháte defy přímo ve svých dokumentech.
V tomto videu se podíváme na několik základních testů toho všeho a poté se podíváme na některé skutečné webové stránky, které tento systém používají, a na to, jak / kam vloží blok svg defs.
Podívejte se na pero 954e71cb5d5e79fb61d3c89bb3f21b8a od Chrisa Coyiera (@chriscoyier) na CodePen.
Poznámka
Líbí se mi termín „blok SVG defs“ - jen abychom jej mohli nazvat něčím, co má konkrétní účel, ale ve skutečnosti nemá oficiální název. Značku ale nemusíte vždy používat . Když použijete s, ty se stejně nevykreslí samy o sobě a opravdu si nemyslím, že by měly být uvnitř . Slyšel jsem, že definice přechodů v SVG jsou stejné a nebudou fungovat ani v případě, že jsou v . Bez ohledu na to je to stále „blok SVG kódu, který definujeme, který použijeme později“, takže jej pravděpodobně budu nadále nazývat „blok SVG defs“.