Como aplicar gradiente em path's num sprite de symbols svg? | Performance Web I: otimizando o front-end

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

Referente ao curso Performance Web I: otimizando o front-end, no capítulo Otimizações de Imagens e atividade SVGs otimizados

por JEAN

| 70.2k xp | 3 posts

Web Designer / Front-End Developer

Olá pessoal! Eu achei esse recurso de symbols espetacular!!!!! Fiquei entusiasmado por vários dias, criando svgs e inserindo tudo em symbol num único svg e chamando pela tag use. PORÉM... eis que surge uma logo com GRADIENTE! E empaquei... Não consigo de jeito nenhum fazer com que o gradiente funcione dentro de um symbol num svg externo, chamando pela use. Já tentei de várias maneiras, colocando o linearGradient no topo do file svg onde estão os symbols e referenciando por id, já tentei colocar o linearGradient agrupado com a path que necessita deste gradiente...enfim, nada funciona :( apenas cores sólidas. Alguém poderia me dar um help? Preciso muito fazer isso funcionar. Estou deixando as URLs para entenderem melhor o que estou quebrando a cabeça pra fazer funcionar caso não tenham entendido:

Logo American Express em SVG: http://www.somparacarro.com.br/logo-american-teste.svg

Página do HTML do Symbol: http://www.somparacarro.com.br/svg-american-teste.html

SVG do Symbol: http://www.somparacarro.com.br/svg-american-teste.svg

Desde já eu fico imensamente agradecido quem puder me ajudar neste problema que pelo jeito milhares de pessoas que se aventuraram nos symbols deve ter empacado.

Abraço! Jean Hilgert

3 respostas

por Sérgio Lopes

| 603.7k xp | 913 posts

Instrutor CTO na Alura

10/01/2017

Jean, excelente pergunta. Eu nunca tinha tentado fazer isso tbm. E estou tentando tbm sem sucesso.

Aparentemente existe problema com gradientes em <defs> quando usamos essa sintaxe de <use> com arquivo externo. Se fosse um SVG inlineado na pagina, por exemplo, parece que funciona (exemplo).

Outra coisa que consegui fazer funcionar (no Chrome pelo menos) é deixar o gradiente apenas inlineado na página (o symbol ainda no arquivo externo). Mas acho que isso tá longe do ideal.

Achei esse bug aqui do pessoal discutindo isso tbm e aparentemente com problemas: https://github.com/jkphl/svg-sprite/issues/74#issuecomment-94913539

por JEAN

| 70.2k xp | 3 posts

Web Designer / Front-End Developer

10/01/2017

Sim, exatamente! É uma pena se não tiver solução. Aí terei que apelar pra gambiarra temporariamente rs... Se até os gringos estão com dificuldade então é pq o negócio é mais embaixo mesmo.... O gradiente inline funciona sim só que se não me engano ele aplica em todo o svg então se em algum local for outra cor ou gradiente, ele faz a aplicação ali também, certo? Se eu estiver enganado, podes me mostrar o gradiente inline com symbol externo?

solução!

por Sérgio Lopes

| 603.7k xp | 913 posts

Instrutor CTO na Alura

11/01/2017

Pesquisei mais um pouco Jean, e parece ser bug no Chrome e WebKit. Achei esse bug aberto há 5 anos no Chrome sem solução e esse demo do problema que é justo o que vc queria.

Se testar no Firefox, funciona de boa. Problema é Blink/WebKit mesmo.

Eu consegui fazer funcionar no Chrome adicionando o gradiente inline e referenciando o symbol externo mesmo:

<body style="background: gray;">

<svg xmlns="http://www.w3.org/2000/svg">
   <defs>
    <linearGradient id="a" x1="7144.39" x2="3586.95" y1="6183.55" y2="-245.58" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#007AA9"/>
      <stop offset="1" stop-color="#00C0ED"/>
    </linearGradient>
  </defs>
</svg>

<svg>
    <use xlink:href="svg-american-teste.svg#logo-american" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>

</body>

Mas isso tá errado, quebra o Firefox (que faz a coisa certa por padrão).

O único jeito parece ser deixar tudo inline como na minha mensagem anterior. Mas claro nem sempre é possível e perde-se a vantagem do SVG externo.

No caso específico desse ícone que o gradiente é relativamente simples e aplicado no fundo quadrado inteiro, dá pra fazer uma gambiarra e defini-lo com CSS na hora de importar o symbol. (mas é um hack e não daria certo em outras situações mais complexas)

<svg style="background: linear-gradient(to bottom, #007AA9, #00C0ED)">
    <use xlink:href="svg-american-teste.svg#logo-american" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>