Uma vez que temos o que estamos chamando de “bloco defs” de SVG - aquele pedaço de SVG que define todas as coisas que queremos desenhar depois - onde o colocamos? Até agora, colocamos isso diretamente no HTML e isso funciona perfeitamente. Se deixarmos no topo da página, diga logo após a tag de abertura :
Isso funcionará muito bem em todos os navegadores que suportam SVG.
Pode ser tentador mudar isso. Talvez os ícones não sejam super vitais para a página, não tão vitais quanto o conteúdo real que a página deve fornecer, então movemos os ícones para a parte inferior da página, adiando seu carregamento como costumamos fazer com JavaScript. Tentamos isso no vídeo, mas tem problemas com o Safari de renderizar os ícones que tentamos mais tarde . Para ser honesto, tenho visto comportamentos inconsistentes ou vários tipos em outros navegadores também fazendo isso dessa maneira, e parece que a paisagem está mudando um pouco nesse aspecto. Já ouvi dizer: é algo difícil de implementar. É mais seguro colocar o bloqueio no topo se você acabar mantendo as defs corretas em seus documentos.
Neste vídeo, veremos alguns testes básicos de tudo isso e, em seguida, alguns sites do mundo real que estão usando este sistema e como / onde eles inserem o bloco svg defs.
Veja a Caneta 954e71cb5d5e79fb61d3c89bb3f21b8a de Chris Coyier (@chriscoyier) no CodePen.
Observação
Eu gosto do termo “SVG defs block” - só para podermos chamá-lo de algo que tem um propósito específico, mas não tem um nome oficial. Mas, você nem sempre precisa usar uma tag. Quando você usa s, eles não renderizam por conta própria de qualquer maneira e, de fato, acho que não deveriam estar dentro . Ouvi dizer que as definições de gradientes em SVG são iguais e nem funcionam se estiverem no . De qualquer forma, ainda é um “bloco de código SVG que estamos apenas definindo para usar mais tarde”, então provavelmente continuarei chamando-o de “bloco SVG defs”.