Adicionando gráficos vetoriais escalonáveis (SVG) no navegador não suportado
Em um post anterior desta série, mencionamos um pouco sobre a armadilha do SVG com navegadores antigos e usando Raphael.js para servir o gráfico como uma solução alternativa. Neste post, vamos dar uma olhada neste assunto ainda mais.
A ideia é simples, continuaremos a utilizar elementos SVG como o principal meio de fornecer gráficos na nossa página Web, mas, ao mesmo tempo, também forneceremos uma função de retorno para que ele ainda possa ser renderizado em navegadores sem suporte.
Claro, existem muitos caminhos que podemos seguir, mas vamos apenas olhar para duas soluções que eu acho que é uma solução genérica melhor. Então, vamos ver como podemos fazer isso.
Usando o Elemento Objeto
Além de colocá-lo diretamente em um documento HTML, existem várias maneiras de incorporar o SVG. Por exemplo, se armazenarmos o gráfico em .svg arquivo, podemos usar o elemento.
Para fins de demonstração, adicionamos um logotipo da Apple com o SVG à nossa página da web. No entanto, os navegadores não suportados permanecerão vazios. Para resolver o problema, podemos servir um gráfico Bitmap, da seguinte forma;
Desta forma, os navegadores suportados continuarão a .svg, enquanto os navegadores não suportados terão o gráfico de bitmap. Nós adicionamos o “png” marque abaixo o logotipo da Apple para rastrear qual gráfico está sendo entregue.
No entanto, como já mencionamos no outro post, Os gráficos de bitmap não são tão flexíveis e dimensionáveis quanto o SVG. Então, vamos dar uma olhada em outra solução.
Usando Modernizr
Outro método que podemos usar é usando Modernizr. Para aqueles de vocês que não estão familiarizados com esta biblioteca JavaScript, não se preocupe, nós teremos uma postagem dedicada para abordá-la. Por enquanto, basta nos acompanhar.
Primeiro de tudo, vamos preparar algumas bibliotecas JavaScript necessárias, Modernizr.js e Raphael.js. Então, nós também precisamos converter nosso .svg arquivo em um formato suportado pelo Raphael com essa ferramenta, ReadySetRaphael.js, e salve a saída em um .js Arquivo; vamos dar um nome svg.js.
Inclua o Modernzr.js no documento HTML, assim:
E para os outros dois arquivos, raphael.js e svg.js, vamos carregá-lo condicionalmente, apenas quando é visualizado em navegadores não suportados.
Com Modernizr podemos detectar a capacidade do navegador, neste caso vamos detectar se o navegador é capaz de renderizar SVG, e se não for, vamos servir o script:
if (! Modernizr.inlinesvg) document.write (''
