Testando o suporte a SVG em vários mecanismos do navegador da Web [Estudo de Caso]
O SVG (Scalable Vector Graphics) é oficialmente suportado por todos os principais navegadores, incluindo o Internet Explorer. O suporte abrange uma ampla variedade de softwares de edição de imagens, particularmente o Inkscape, que usa SVG como seu formato nativo (se você quiser uma atualização em SVG, clique aqui).
Mas o que exatamente é suportado pelos navegadores da web? Todos os mecanismos de renderização exibem arquivos SVG e seus recursos da mesma maneira? E os recursos avançados deles, como filtros? Bem, isso é o que vamos descobrir. Pegamos uma amostra de navegadores modernos, incluindo alguns dos menos notórios, e testou-os com um arquivo SVG feito para este fim.
A imagem de teste
Nós preparamos a nossa imagem de teste com foco em elementos que os artistas são mais propensos a usar. Entre os recursos testados estão: caminhos de texto e suas interações, gradientes, filtro de desfoque gaussiano e, finalmente, um filtro composto avançado empilhado de mais tipos de filtro.
Mecanismos do navegador da Web
Motor de piscar
Começamos com - de longe o mecanismo de renderização mais frequente - Blink. Blink é o mecanismo nativo dos navegadores Google Chrome e Chromium, Opera e Android WebView. Todos os navegadores acima mencionados processam imagens de teste da mesma maneira nas plataformas testadas.
Quando comparado com a imagem original produzida pelo Inkscape, não houve problemas, exceto uma pequena diferença na renderização de efeitos de filtro empilhados.
| Navegador | Versão | Plataforma | Resultado |
| Cromo | 43.0.2357.125 | Linux |  |
| Ópera | 30.0.1835.59 | Linux | |
| Ópera | 30.0.1856.93524 | Android | |
| Ópera | 30.0.1835.88 | janelas | |
| cromada | 38.0.2125.114 | Android | |
| cromada | 43.0.2357.130 | janelas | |
| Tocha | 39.0.0.9626 | janelas |
Mecanismo de Webkit
De acordo com as estatísticas recentes de uso do navegador, as três principais posições não pertencem a navegadores baseados em webkit (a partir de maio de 2015). No entanto, esse mecanismo é difundido entre os desenvolvedores. Além disso, existem várias implementações e garfos do mesmo
Todos os navegadores testados renderizaram nosso arquivo SVG sem problemas; no entanto, diferenças na renderização do Specular Lighting, um componente de filtro composto, foram observadas em comparação com o Inkscape.
| Navegador | Versão | Plataforma | Resultado |
| Safári | 8.0.6 | Mac OS |  |
| Lontra | 0.9.05 | Linux | |
| QupZilla | 1.8.6 | Linux | |
| QupZilla | 1.8.6 | janelas | |
| Golfinho | 10.3.1 | Android | |
| Konqueror | 15.04.2 | Linux | |
| Navegador UC | 10.5.0.575 | Android |
Motor tridente
Trident é um mecanismo proprietário usado pelo Internet Explorer versões 4.0 - 11.0. IE interpretou nosso SVG perfeitamente. Além disso, a aparência do filtro composto corresponde à imagem original melhor. Nós também testamos o IE 9, o segundo IE mais usado (em maio de 2015) e descobrimos que essa versão tinha problemas com desfoque gaussiano e filtro composto..
Isso não é uma surpresa, já que o IE 9 foi lançado inicialmente antes do esboço final do padrão SVG 1.1 SE, no qual efeitos de filtro foram oficialmente adicionados.
| Navegador | Versão | Plataforma | Resultado |
| IE | 11.0.9600.17843 | janelas |  |
| Navegador | Versão | Plataforma | Resultado |
| IE | 9.0.8112.16421 | janelas |  |
Motor de lagartixa
Gecko é um motor desenvolvido pela Mozilla Corporation e, portanto, usado no navegador Firefox ou no cliente de e-mail Thunderbird. Ele também é usado pelos navegadores PaleMoon, Waterfox e muitos outros garfos de versões anteriores do Firefox. No caso do motor Gecko, os resultados não foram exatamente iguais em diferentes plataformas.
A versão do Windows exibiu uma pequena falha na renderização do texto ao longo do caminho; o mesmo problema foi observado nos navegadores Firefox e PaleMoon. Assim como o Webkit, o Gecko parece ter problemas com a renderização correta da primitiva do filtro Specular Lighting.
| Navegador | Versão | Plataforma | Resultado |
| Raposa de fogo | 38.0.5 | Linux |  |
| Raposa de fogo | 38.0.5 | Android | |
| Lua pálida | 25,5 | Android |
| Navegador | Versão | Plataforma | Resultado |
| Raposa de fogo | 38.0.5 | janelas |  |
| Lua pálida | 25,5 | janelas |
Navegadores problemáticos
Como pode ser visto acima, todas as versões recentes dos principais mecanismos / navegadores de renderização passaram no nosso teste sem dificuldades significativas. Vamos checar aqueles que não se saíram tão bem.
Maxthon é um navegador multiplataforma desenvolvido na China. De acordo com os 20 navegadores web alternativos de Fahad Khan para o Windows, o Maxthon usa os mecanismos Trident e Webkit. Não notamos nenhum problema com a renderização do SVG no Linux (v. 1.0.5.3) e no Windows (v. 4.4.5.3000); no entanto, em um dispositivo Android, nem o desfoque gaussiano nem outras primitivas de filtro foram processadas.
Navegador CM realizado rapidamente no teste do dispositivo Samsung Galaxy S3, mas também não suporta nenhum dos efeitos de filtro descritos pela especificação SVG 1.1 SE.
| Navegador | Versão | Plataforma | Resultado |
| Maxthon | 4.4.6.2000 | Android |  |
| Navegador CM | 5,19 | Android |
Konqueror é um navegador padrão para o KDE, um dos ambientes de desktop Linux mais populares. A capacidade de renderizar arquivos SVG no Konqueror depende do mecanismo de renderização. Com o WebKit ativado, nosso teste do SVG foi renderizado corretamente. No entanto, o mecanismo de renderização padrão do Konqueror, o KHTML, parece não ter suporte para vários recursos: os efeitos de filtro não são aplicados aos marcadores de finalização de objeto e de traço subjacentes e o texto ao longo dos objetos de caminho ou padrão não é renderizado.
| Navegador | Versão | Plataforma | Resultado |
| Konqueror KHTML | 15.04.2 | Linux |  |
Conclusão
Em nosso teste, focamos no suporte ao formato SVG em todos os mecanismos modernos de renderização da web. Testamos 4 mecanismos de renderização principais e 15 navegadores diferentes, incluindo os mais populares, como o Maxthon ou o Dolphin. Quase todas as versões atuais dos navegadores passaram pelo nosso teste e é difícil selecionar um vencedor definitivo.
Parece que Apoio, suporte e Empilhamento correto de primitivos de filtro é o último desafio remanescente para os motores de renderização atuais. Quando comparamos nossa imagem SVG original com todos os resultados renderizados, nomeamos subjetivamente o IE 11 (mecanismo Trident) para o primeiro lugar.
No entanto, é claro que o mecanismo Blink está em estreita perseguição e, portanto, recomendamos navegadores baseados em Blink para renderizar arquivos SVG. Se você deseja realizar um teste rápido do seu navegador favorito, sinta-se à vontade para usar nossa página de teste do renderizador SVG aqui.
Nota do editor: Este post foi escrito para Hongkiat.com por Michal Rost. Michal trabalha como programador em uma empresa biomédica, mas dedica seu tempo livre ao desenvolvimento de aplicativos de código aberto e portais sem fins lucrativos. Ele é o fundador da scalablegfx. Você pode encontrá-lo no Twitter.
