Når vi har fått det vi kaller vår “defs block” av SVG - den delen av SVG som definerer alle ting vi vil tegne senere - hvor legger vi den? Så langt har vi satt den direkte i HTML-en, og det fungerer absolutt. Hvis vi lar det være øverst på siden, si like etter åpningskoden :
Det vil fungere bra i alle nettlesere som støtter SVG.
Det kan være fristende å flytte dette ned. Kanskje ikonene ikke er veldig viktige for å side, ikke så viktige som det virkelige innholdet de siden skal levere, så vi flytter ikonene til bunnen av siden i stedet for å utsette innlastingen som vi ofte gjør med JavaScript. Vi prøver dette i videoen, men har problemer med at Safari gjengir ikonene vi senere prøvde å i det hele tatt. For å være ærlig, har jeg sett inkonsekvent oppførsel eller forskjellige typer i andre nettlesere også gjør det på denne måten, og det ser ut til at landskapet skifter litt i denne forbindelse. Så jeg har hørt: er en vanskelig ting å implementere. Det tryggeste å plassere blokken øverst hvis du ender med å holde defs rett i dokumentene dine.
I denne videoen ser vi på noen grunnleggende testing av alt dette, og ser deretter på noen virkelige nettsteder som bruker dette systemet og hvordan / hvor de setter inn svg defs-blokken.
Se pennen 954e71cb5d5e79fb61d3c89bb3f21b8a av Chris Coyier (@chriscoyier) på CodePen.
Merk
Jeg liker begrepet “SVG defs block” - bare slik at vi kan kalle det noe som har et bestemt formål, men som egentlig ikke har et offisielt navn. Men du trenger ikke alltid å faktisk bruke en tag. Når du bruker s, gjengis de ikke på egenhånd uansett, og jeg tror faktisk ikke at de skal være innenfor . Jeg har hørt definisjoner av graderinger i SVG er de samme, og vil ikke engang fungere hvis de er i . Uansett er det fremdeles en "blokk med SVG-kode vi bare definerer å bruke senere", så jeg vil sannsynligvis fortsette å kalle den en "SVG defs-blokk."