Créer un contenu mobile éblouissant consiste à trouver le juste équilibre entre la quantité de données téléchargées et un impact visuel maximal. Les graphiques vectoriels sont un excellent moyen d'obtenir des résultats visuels époustouflants en utilisant une bande passante minimale.
Beaucoup de gens considèrent que le canevas est le seul moyen de dessiner un mélange de vecteurs et de trames sur le Web, mais il existe des alternatives qui présentent certains avantages. L'utilisation du Scalable Vector Graphics (SVG), un élément clé du HTML5, est un excellent moyen de dessiner.
Nous savons tous que le responsive design joue un rôle important dans la gestion des différentes tailles d'écran, et le format SVG est idéal pour gérer facilement les écrans de différentes tailles.
Le format SVG est un excellent moyen de présenter des dessins au trait vectoriels. Il complète parfaitement les bitmaps, ce dernier étant mieux adapté aux images à tons continus.
L'un des principaux avantages du format SVG est qu'il est indépendant de la résolution. Ainsi, vous n'avez pas besoin de penser au nombre de pixels présents sur votre appareil. Le résultat sera toujours mis à l'échelle et optimisé par le navigateur.
Des outils de création populaires tels que l'application Drawing dans Google Drive, Inkscape, Illustrator, Corel Draw et bien d'autres génèrent le format SVG. Il existe donc de nombreuses façons de générer du contenu. Nous allons vous présenter quelques façons d'utiliser les assets SVG, ainsi que des conseils d'optimisation pour vous aider à démarrer.
Principes de base du scaling
Commençons par un scénario simple : vous voulez qu'un graphique pleine page soit l'arrière-plan de votre page Web. Il serait vraiment utile d'avoir le logo de votre entreprise ou tout autre élément en plein écran en arrière-plan, mais bien sûr, c'est très difficile à faire avec toutes les différentes tailles d'écran disponibles. Pour illustrer nos propos, nous allons commencer par le logo HTML5, très simple.
Le logo HTML5 est illustré ci-dessous. Comme vous l'aurez deviné, il provient d'un fichier SVG.
Cliquez sur le logo et regardez-le dans un navigateur récent. Vous verrez qu'il s'adapte parfaitement aux fenêtres, quelle que soit la taille de la fenêtre. Essayez de l'ouvrir dans votre navigateur préféré, redimensionnez la fenêtre et vérifiez que l'image est nette, quel que soit l'agrandissement. Si nous avions essayé d'utiliser une image bitmap, nous devrions proposer de nombreuses tailles différentes pour chaque écran que nous pourrions rencontrer, ou nous devrions nous adapter à des images à l'échelle horriblement pixélisées.
Quel est donc le problème ? Si vous ne l'aviez pas remarqué, c'est le seul format qui évolue indépendamment de l'appareil que nous utilisons pour le regarder. Il nous suffit donc de diffuser un seul asset à nos utilisateurs, sans jamais avoir besoin de connaître la taille de leur écran ou de leur fenêtre. C'est parfait !
Et ce n'est pas tout : le logo HTML5 ne fait que 1 427 octets ! C'est si petit qu'il n'affaiblira pratiquement aucun forfait de données mobiles lors de son chargement, ce qui rend son chargement rapide, et donc peu cher et rapide pour vos utilisateurs.
Autre avantage des fichiers SVG : ils peuvent être compressés avec GZIP pour les réduire davantage. Pour compresser le SVG, vous devez remplacer l'extension du fichier par ".svgz". Pour le logo HTML5, il est réduit à 663 octets une fois compressé. La plupart des navigateurs récents le gèrent facilement !
Avec notre fichier d'exemple sur certains des appareils les plus récents, nous constatons un avantage 60 fois supérieur en utilisant des données vectorielles compressées. Notez également que ces comparaisons sont effectuées entre le JPEG et le SVG, et non PNG. Cependant, le format JPEG est un format avec pertes, ce qui se traduit par une qualité inférieure à celle du format SVG ou PNG. Si nous devions utiliser le format PNG, l'avantage serait de plus de 80 fois, ce qui est stupéfiant !
Mais bien sûr, PNG et JPEG ne sont pas créés de la même manière. Un certain nombre de conseils d'optimisation vous suggèrent d'utiliser le format JPEG au lieu du format PNG, mais ce n'est pas toujours une bonne idée. Examinez les images ci-dessous. L'image de gauche est une image PNG de la partie supérieure droite du logo HTML5 agrandi à 6 fois. L'image de droite est identique, mais encodée au format JPEG.
Il est facile de constater que la réduction de la taille du fichier dans JPEG a un coût, avec des artefacts de couleur sur les bords tranchants, ce qui fait probablement penser à votre rétine qu'il a besoin de lunettes:-) Pour être juste, JPEG est optimisé pour les photos, c'est pourquoi il n'est pas aussi efficace pour l'art vectoriel. Dans tous les cas, la version SVG est la même que le fichier PNG en termes de qualité. Par conséquent, elle s'applique à tous les comptes, aussi bien en termes de taille de fichier que de clarté.
Créer des arrière-plans vectoriels
Voyons comment vous pouvez utiliser un fichier vectoriel comme arrière-plan d'une page. Vous pouvez facilement déclarer votre fichier d'arrière-plan à l'aide du positionnement CSS fixe:
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
Quelle que soit la taille de l'écran, l'image est de taille agréable, avec des bords nets et nets.
Ensuite, bien sûr, nous aimerions mettre du contenu en arrière-plan.
Mais comme vous pouvez le constater, le résultat n'est pas optimal, car nous ne pouvons pas lire le texte. Alors, que faire ?
Ajuster l'arrière-plan pour un meilleur rendu
La chose évidente à faire est d'éclaircir toute la couleur de l'image de fond. Pour ce faire, vous pouvez facilement utiliser la propriété d'opacité CSS ou l'opacité du fichier SVG lui-même. Pour que cela fonctionne, il vous suffit d'ajouter ce code à votre contenu CSS:
#bg {
opacity: 0.2;
}
Le résultat serait le suivant:
Bien que simple, cette solution risque de poser des problèmes de performances sur un appareil mobile. Pour la plupart des navigateurs mobiles existants, l'utilisation de la propriété d'opacité peut être beaucoup plus lente que le dessin d'objets opaques.
Une meilleure solution
Il est bien préférable de modifier la couleur du contenu SVG d'origine plutôt que de définir l'opacité en CSS. Voici notre logo HTML5 modifié de façon à s'estomper en changeant les couleurs utilisées tout en évitant la propriété d'opacité. Ainsi, l'image de fond ci-dessous semble identique au résultat obtenu en modifiant l'opacité, mais elle se peigne beaucoup plus rapidement, ce qui nous fait gagner du temps sur le processeur et permet d'économiser de la batterie.
Maintenant que nous avons bien compris les principes fondamentaux, passons à d'autres fonctionnalités.
Utiliser efficacement les gradients
Disons que nous voulons créer un bouton. Nous pourrions commencer par créer un rectangle avec de beaux angles arrondis. Nous pourrions ensuite ajouter un dégradé linéaire pour donner au bouton une jolie texture. Pour ce faire, le code peut se présenter comme suit:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
Le bouton résultant se traduira par quelque chose comme ceci:
Remarquez comment le dégradé que nous avons ajouté va de gauche à droite. Il s'agit de la direction du dégradé par défaut en SVG. Mais nous pouvons faire mieux, pour plusieurs raisons: l'esthétique et les performances. Essayons de changer la direction du dégradé pour le rendre un peu plus agréable. Définir les attributs 'x1', 'y1', 'x2' et 'y2' pour le dégradé linéaire contrôle la direction de la couleur de remplissage.
En ne définissant que l'attribut "y2", nous pouvons modifier le dégradé afin qu'il soit en diagonale. Cette légère modification du code:
<linearGradient id="blueshiny" y2="1">
donne un aspect différent à notre bouton, il finit par ressembler à l'image ci-dessous.
Nous pouvons aussi facilement modifier le dégradé pour aller de haut en bas avec cette légère modification du code:
<linearGradient id="blueshiny" x2="0" y2="1">
et cela finit par ressembler à l’image ci-dessous.
Que pensez-vous de la discussion sur les différents angles du dégradé ?
Il s'avère que le dernier exemple, celui avec le dégradé allant du haut vers le bas, est le plus rapide à dessiner sur la plupart des appareils. Un secret très peu connu pour les geeks du graphisme qui écrivent un code de navigateur où les dégradés verticaux (de haut en bas) peignent presque aussi rapidement qu'une couleur unie. (En effet, le fait de peindre un objet s'effectue sous forme de lignes horizontales le long de la page et les fondus du code de dessin comprennent que la couleur ne change pas d'une ligne à l'autre, ce qui l'optimise.)
Ainsi, lorsque vous choisissez d'utiliser des dégradés dans la conception de votre page, les dégradés verticaux sont plus rapides et sollicitent moins la batterie. Cette accélération s'applique également aux dégradés CSS. Il ne s'agit donc pas seulement d'un élément SVG.
Si nous nous sentons vraiment aventureux avec ces nouvelles connaissances en matière de dégradés, nous pouvons peut-être ajouter un dégradé sympa derrière notre logo HTML5 en ajoutant le code ci-dessous:
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
Le code ci-dessus ajoute un dégradé linéaire vertical estompé à l'arrière-plan de notre logo HTML5 pour donner une teinte multicolore subtile qui s'exécute rapidement (aussi vite qu'un arrière-plan de couleur unie).
Si vous chargez le contenu dans un navigateur pour ordinateur et que vous le redimensionnez dans des formats extrêmes, des barres blanches s'affichent en haut/bas, ou en haut/en bas ou sur le côté gauche/droit. Quoi qu'il en soit, après les modifications de code effectuées au-dessus de l'arrière-plan résultant, ressemblera à ceci:
Animez vos vidéos en toute simplicité
À présent, vous vous demandez peut-être à quoi sert un dégradé SVG pour votre page. Cela peut effectivement être pratique avec les dégradés CSS, mais l'un des avantages du SVG est que le dégradé lui-même réside dans le DOM. Cela signifie que vous pouvez le modifier à l'aide d'un script, mais surtout, vous pouvez profiter de la fonctionnalité d'animation intégrée au SVG pour apporter des modifications subtiles à votre contenu.
Par exemple, nous allons modifier notre logo HTML5 coloré en remplaçant la définition du dégradé linéaire par le code ci-dessous:
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
Examinez l'image ci-dessous pour découvrir le résultat des modifications ci-dessus.
Le code modifie les couleurs de notre dégradé linéaire par l'intermédiaire des différents arrêts de couleur que nous avons définis dans un cycle continu de 20 secondes. En effet, le dégradé semble se déplacer vers le haut de la page dans un mouvement continu qui ne s'arrête jamais.
L'avantage, c'est qu'aucun script n'est nécessaire. C'est pourquoi il s'exécute en tant qu'image référencée sur cette page, mais il réduit également la charge de travail d'un processeur mobile en supprimant la nécessité d'utiliser un script.
En outre, le navigateur lui-même peut tirer parti de sa connaissance du tableau afin de s'assurer qu'une surcharge de processeur minimale est utilisée pour exécuter l'animation sophistiquée.
Il y a une mise en garde: certains navigateurs ne gèrent pas ce style d'animation du tout, mais dans ce cas, l'arrière-plan coloré s'affichera toujours, mais il ne changera pas. Vous pouvez contourner ce problème en utilisant un script (et requestAnimationFrame), mais cela dépasse un peu cet article.
Une autre chose à noter : ce fichier SVG non compressé ne fait que 2 922 octets, ce qui est extrêmement petit pour fournir un effet graphique aussi riche, ce qui permettra à vos utilisateurs et à vos forfaits de données de rester satisfaits tout au long du processus.
Où voulez-vous aller ?
Dans de nombreux cas, le format SVG n'est pas optimal, et les photos et vidéos sont mieux représentées dans d'autres formats. Le texte en est un autre, dans lequel le code HTML et CSS natif est généralement plus efficace. Toutefois, en tant qu'outil idéal pour les dessins au trait, il peut s'agir d'un choix idéal.
Nous avons abordé quelques utilisations fondamentales des graphismes SVG, montrant à quel point il est facile de générer de petits contenus qui affichent des graphismes saisissants en plein écran avec un minimum de téléchargement. De petites améliorations du contenu permettent de créer facilement des résultats graphiques incroyables avec de petites quantités de balisage. Dans l'article suivant, nous verrons plus en détail comment utiliser l'animation intégrée au format SVG pour créer des effets plus simples et plus puissants. Nous comparons également l'utilisation du canevas avec le format SVG afin de choisir l'outil adapté pour créer votre site graphique pour mobile.
Autres ressources utiles
- Inkscape est une application de dessin Open Source qui utilise SVG.
- Ouvrez Clip Art, une immense bibliothèque de clipart open source contenant des milliers d'images SVG.
- Page SVG W3C contenant des liens vers les spécifications, les ressources, etc.
- Raphaël est une bibliothèque JavaScript qui fournit une API pratique pour dessiner et animer des contenus SVG, avec une solution de remplacement idéale pour les anciens navigateurs.
- Ressources SVG de l'Université de Slippery Rock : inclut un lien vers un primaire SVG, qui est très utile.