Ajout de graphiques vectoriels évolutifs (SVG) dans un navigateur non pris en charge
Dans un article précédent de cette série, nous avons mentionné un peu les pièges de SVG avec les anciens navigateurs et l'utilisation de Raphael.js pour servir le graphique comme solution alternative. Dans cet article, nous examinerons plus en détail cette question..
L'idée est simple, nous utiliserons toujours des éléments SVG comme principal moyen de fournir des graphiques sur notre page Web, mais nous fournirons également une fonction de secours. afin qu'il puisse encore être rendu dans des navigateurs non pris en charge.
Bien sûr, nous pouvons emprunter de nombreuses voies, mais nous n’examinerons que deux solutions qui, à mon avis, sont une meilleure solution générique. Voyons comment nous pouvons le faire.
Utilisation d'un élément d'objet
En plus de l'insérer directement dans un document HTML, il existe plusieurs façons d'intégrer SVG. Par exemple, si nous stockons le graphique dans .svg fichier, nous pouvons utiliser le élément.
À des fins de démonstration, nous avons ajouté un logo Apple avec SVG sur notre page Web. Cependant, les navigateurs non pris en charge resteront vides. Pour résoudre le problème, nous pouvons servir un graphique bitmap, comme suit;
De cette façon, les navigateurs supportés continueront de prendre la .svg, tandis que les navigateurs non pris en charge porteront le graphique bitmap. Nous avons ajouté le “png” marquez en dessous du logo Apple pour savoir quel graphique est livré.
Cependant, comme nous l'avons mentionné dans l'autre message, Les graphiques bitmap ne sont pas aussi flexibles et évolutifs que SVG. Alors, jetons un coup d'oeil à une autre solution.
Utiliser Modernizr
Une autre méthode que nous pouvons utiliser est d'utiliser Moderniser. Pour ceux d'entre vous qui ne sont pas familiers avec cette bibliothèque JavaScript, ne vous inquiétez pas, nous aurons un article dédié à couvrir à ce sujet. Pour l'instant, continuez avec nous.
Tout d’abord, préparons quelques bibliothèques JavaScript requises, Modernizr.js et Raphael.js. Ensuite, nous devons également convertir notre .svg fichier dans un format pris en charge par Raphael avec cet outil, ReadySetRaphael.js, et enregistrez la sortie dans un fichier séparé. .js fichier; nommons-le svg.js.
Incluez le fichier Modernzr.js dans le document HTML, comme suit:
Et pour les deux autres fichiers, raphael.js et svg.js, nous allons le charger conditionnellement, uniquement lorsqu'il est visualisé dans des navigateurs non pris en charge.
Avec Modernizr, nous pouvons détecter la capacité du navigateur. Dans ce cas, nous déterminerons si le navigateur est capable de restituer le fichier SVG, et si ce n’est pas le cas, nous servirons le script:
if (! Modernizr.inlinesvg) document.write (''
