Pour créer des contenus mobiles éblouissants, vous devez équilibrer la quantité de données téléchargées avec un impact visuel maximal. Les graphiques vectoriels sont un excellent moyen d'obtenir des résultats visuels époustouflants avec une bande passante minimale.
Beaucoup de gens pensent que le canevas est le seul moyen de dessiner un mélange de vecteurs et de rasters sur le Web, mais il existe d'autres alternatives qui présentent certains avantages. Un excellent moyen de créer des dessins vectoriels consiste à utiliser des Scalable Vector Graphics (SVG), qui constituent un élément clé de HTML5.
Nous savons tous que le responsive design est essentiel pour gérer les différentes tailles d'écran, et le SVG est idéal pour gérer facilement les écrans de différentes tailles.
Le format SVG est idéal pour présenter des dessins vectoriels et constitue un excellent complément des bitmaps, qui sont plus adaptés aux images en tons continus.
L'un des avantages les plus intéressants des fichiers SVG est qu'ils sont indépendants de la résolution. Vous n'avez donc pas besoin de vous soucier du nombre de pixels de votre appareil. Le résultat sera toujours mis à l'échelle et optimisé par le navigateur pour un rendu optimal.
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 des fichiers SVG. Il existe donc de nombreuses façons de générer du contenu. Nous allons vous présenter quelques façons d'utiliser des éléments SVG, ainsi que des conseils d'optimisation pour vous aider à vous lancer.
Principes de base du scaling
Commençons par un scénario simple : vous souhaitez utiliser une image pleine page comme arrière-plan de votre page Web. Il serait vraiment utile d'afficher en permanence 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. Pour illustrer cela, commençons par le logo HTML5.
Le logo HTML5 est présenté ci-dessous. Vous l'aurez deviné, il provient d'un fichier SVG.
Cliquez sur le logo et examinez-le dans n'importe quel navigateur moderne. Vous constaterez qu'il s'adapte parfaitement à toutes les tailles de fenêtre. Essayez de l'ouvrir dans votre navigateur préféré, redimensionnez la fenêtre et vérifiez que l'image est nette à n'importe quel agrandissement. Si nous essayions de le faire avec une image bitmap, nous devrions soit diffuser de nombreuses tailles différentes pour chaque écran que nous pourrions rencontrer, soit être contraints de supporter des images à échelle horriblement pixellisées.
Qu'est-ce que vous avez ? Eh bien, comme vous ne l'aviez pas remarqué, c'est le seul format qui évolue indépendamment de l'appareil que nous utilisons. Nous n'avons donc besoin de diffuser qu'un seul composant auprès de nos utilisateurs, sans avoir à connaître la taille de leur écran ou de leur fenêtre. C'est pratique !
Mais ce n'est pas tout : le logo HTML5 ne fait que 1 427 octets ! Ouah ! C'est tellement petit que cela n'aura presque aucun impact sur un forfait de données mobiles lors du chargement, ce qui le rend rapide à charger, et donc abordable et rapide pour vos utilisateurs !
Autre avantage des fichiers SVG : ils peuvent être compressés GZIP pour les réduire davantage. Lorsque vous compressez un fichier SVG de cette manière, vous devez remplacer son extension par ".svgz". Dans le cas du logo HTML5, il ne fait plus que 663 octets une fois compressé. La plupart des navigateurs modernes le gèrent facilement.
Avec notre exemple de fichier sur certains des derniers appareils, nous observons un avantage d'environ 60 fois en utilisant des données vectorielles compressées. Notez également que ces comparaisons sont effectuées entre le JPEG et le SVG, et non le PNG. Cependant, le format JPEG est un format avec pertes, ce qui entraîne une qualité inférieure à celle des formats SVG ou PNG. Si nous utilisions le format PNG, l'avantage serait de plus de 80 fois, ce qui est stupéfiant !
Mais bien sûr, les formats PNG et JPEG ne sont pas identiques. De nombreux conseils d'optimisation vous recommandent d'utiliser le format JPEG plutôt que 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 agrandie de six fois. L'image de droite est identique, mais elle est encodée au format JPEG.
Il est facile de constater que la réduction de la taille de fichier au format JPEG a un coût, avec des artefacts de couleur sur les bords nets, ce qui fait probablement penser à votre rétine qu'elle a besoin de lunettes :-) Pour être honnête, le format JPEG est optimisé pour les photos, et c'est pourquoi il n'est pas aussi adapté à l'illustration vectorielle. Dans tous les cas, la version SVG est la même que la version PNG en termes de qualité. Elle prévaut donc sur tous les comptes, qu'il s'agisse de la taille du fichier ou de la clarté.
Créer des arrière-plans vectoriels
Voyons comment 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 fixe CSS:
<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>
Vous remarquerez que, quelle que soit la taille de l'écran, l'image est bien dimensionnée et les bords sont nets.
Bien sûr, nous aimerions ajouter du contenu à l'arrière-plan.
Mais comme vous pouvez le constater, le résultat n'est pas idéal, car nous ne pouvons pas lire le texte. Que faire ?
Ajuster l'arrière-plan pour qu'il soit plus agréable
L'action évidente est d'éclaircir toute la couleur de l'image de fond. Pour ce faire, utilisez la propriété d'opacité CSS ou le fichier SVG lui-même. Pour ce faire, ajoutez simplement le code suivant à votre contenu CSS :
#bg {
opacity: 0.2;
}
Vous obtiendrez alors un résultat semblable à celui-ci :
Bien que simple, cette solution peut 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 celle des objets opaques.
Une meilleure solution
Modifier la couleur dans le contenu SVG d'origine est bien plus efficace que de définir l'opacité avec CSS. Voici notre logo HTML5 modifié pour qu'il semble délavé en modifiant les couleurs utilisées, ce qui évite d'utiliser la propriété d'opacité. L'image de fond ci-dessous est donc identique au résultat obtenu en modifiant l'opacité, mais elle sera en réalité peinte beaucoup plus rapidement, ce qui nous permettra de gagner du temps de processeur et d'économiser une précieuse autonomie de la batterie.
Maintenant que nous avons une bonne compréhension des principes de base, passons à d'autres fonctionnalités.
Utiliser efficacement les gradients
Supposons que nous souhaitions créer un bouton. Nous pourrions commencer par créer un rectangle aux coins arrondis. Ensuite, nous pouvons ajouter un beau dégradé linéaire pour donner une belle texture au bouton. Le code à utiliser pourrait 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 obtenu ressemblera à ceci :
Notez que le dégradé que nous avons ajouté va de gauche à droite. Il s'agit de la direction de dégradé par défaut dans SVG. Mais nous pouvons faire mieux, pour deux raisons : l'esthétique et les performances. Essayons de modifier le sens du dégradé pour le rendre un peu plus agréable. Définir les attributs "x1", "y1", "x2" et "y2" du dégradé linéaire permet de contrôler l'orientation de la couleur de remplissage.
Définir uniquement l'attribut "y2" nous permet de modifier le dégradé pour qu'il soit diagonal. Cette petite modification de code :
<linearGradient id="blueshiny" y2="1">
donne un aspect différent à notre bouton. Il ressemble à l'image ci-dessous.
Nous pouvons également modifier facilement le dégradé pour qu'il aille de haut en bas avec cette petite modification de code :
<linearGradient id="blueshiny" x2="0" y2="1">
Le résultat ressemble à l'image ci-dessous.
Vous vous demandez peut-être pourquoi nous discutons de différents angles du dégradé.
Il s'avère que le dernier exemple (celui avec le dégradé allant de haut en bas) est le plus rapide à dessiner sur la plupart des appareils. C'est un secret très peu connu des geeks graphiques qui écrivent du code pour navigateur : les dégradés verticaux (de haut en bas) se peignent presque aussi vite qu'une couleur unie. (La raison en est que la peinture d'un objet se fait en lignes horizontales sur la page. Le cœur du code de dessin comprend que la couleur ne change pas sur chaque ligne et l'optimise donc.)
Par conséquent, lorsque vous choisissez d'utiliser des dégradés dans la conception de votre page, les dégradés verticaux sont plus rapides et consomment moins de batterie. Cette accélération s'applique également aux dégradés CSS. Il ne s'agit donc pas uniquement d'une fonctionnalité SVG.
Si cette nouvelle connaissance des dégradés nous semble vraiment audacieuse, 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é au fond de notre logo HTML5 pour donner une teinte multicouleur subtile qui s'affiche rapidement, aussi rapidement qu'un arrière-plan de couleur unie.
Si vous chargez le contenu dans un navigateur pour ordinateur et que vous redimensionnez le contenu avec des formats extrêmes, des barres blanches s'affichent en haut/en bas ou à gauche/à droite. Quoi qu'il en soit, après les modifications de code apportées ci-dessus, l'arrière-plan résultant se présente comme suit :
Créez facilement des animations
À présent, vous vous demandez peut-être quel est l'intérêt d'utiliser un dégradé SVG comme arrière-plan de votre page. Il peut être judicieux de le faire avec des dégradés CSS, mais l'un des avantages du SVG est que le dégradé lui-même se trouve dans le DOM. Cela signifie que vous pouvez le modifier à l'aide d'un script, mais surtout que vous pouvez profiter des animations intégrées au format SVG pour ajouter 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>
Consultez l'image ci-dessous pour voir le résultat de ces modifications.
Le code modifie les couleurs de notre dégradé linéaire à travers tous les différents arrêts de couleur que nous avons définis dans un cycle continu qui prend 20 secondes à s'exécuter. L'effet est que le dégradé semble monter sur la page dans un mouvement continu qui ne s'arrête jamais.
L'avantage est qu'aucun script n'est nécessaire. C'est pourquoi il s'exécute en tant qu'image référencée à partir de cette page, mais il réduit également la charge de travail sur un processeur mobile en supprimant le besoin de script.
De plus, le navigateur lui-même peut tirer parti de ses connaissances sur le dessin pour s'assurer que le coût supplémentaire du processeur est minimal pour effectuer l'animation sophistiquée.
Il y a toutefois une mise en garde: certains navigateurs ne gèrent pas du tout ce style d'animation, mais vous obtiendrez tout de même un joli arrière-plan de couleur, mais cela ne changera pas. Vous pouvez contourner ce problème en utilisant un script (et requestAnimationFrame), mais cela va au-delà de cet article.
Notez également que ce fichier SVG non compressé ne fait que 2 922 octets, ce qui est incroyablement petit pour fournir un effet graphique aussi riche, ce qui ravira vos utilisateurs et leurs forfaits de données.
Où allons-nous à partir d'ici ?
Dans de nombreux cas, le format SVG n'est pas idéal, car les photos et les vidéos sont mieux représentées dans d'autres formats. Le texte est un autre exemple, où le HTML et le CSS natifs fonctionnent beaucoup mieux en général. Toutefois, en tant qu'outil de l'arsenal des illustrations dessinées à la main, il peut être le choix idéal.
Nous avons abordé quelques utilisations fondamentales de base des graphiques SVG, montrant à quel point il est facile de générer de petits contenus qui fournissent des graphiques éclatants en plein écran avec un téléchargement minimal. De petites améliorations du contenu peuvent créer facilement des résultats graphiques incroyables avec des quantités insignifiantes de balisage. Dans l'article suivant, nous verrons plus en détail comment l'animation intégrée au SVG peut être utilisée pour des effets plus simples et plus puissants, et nous comparerons l'utilisation du canevas avec le SVG pour choisir l'outil approprié pour créer votre site de graphiques mobiles.
Autres ressources utiles
- Inkscape, une application de dessin Open Source qui utilise le format de fichier SVG.
- Open Clip Art, une immense bibliothèque de cliparts Open Source contenant des milliers d'images SVG.
- Page SVG du W3C, contenant des liens vers des spécifications, des ressources, etc.
- Raphaël est une bibliothèque JavaScript qui fournit une API pratique pour dessiner et animer du contenu SVG avec un excellent remplacement pour les anciens navigateurs.
- Ressources SVG de la Slippery Rock University : inclut un lien vers un Introduction aux SVG très utile