Le Blog

Le blog laboratoire de F.L.D. Studio
0

Composants SVG

Le concept

Concevoir des composants réutilisables construit en utilisant les techniques décritent dans le post précédant :

  • Construction des éléments en utilisant des unitées de mesure relationnelles. L'unitée REM pour le parent et qui se base sur la taille de la police de la page. L'unitée EM pour les enfants pour leur permettre de s'adapter à la taille de son parent.
  • Utilisation d'illustrations au format .svg définies dans une map-sprite In-Line embarquée dans la page HTML.

Ces deux techniques permettent par exemple de concevoir un bouton 'Envoyer' que l'on utilisera dans un formulaire et qui pourra être personnalisé via le CSS sans avoir à utiliser des images différentes pour gérer les couleurs ou de de trop  modifier le CSS pour l'adpater au design du site.

Exemple de composants 1

  • Bouton : Envoyer
  • Lien : Nous appeller

Un exemple sur CodePen

See the Pen Composant HTML by Du Marais ( @DjF ) on CodePen .

Le bouton 'Envoyer' sera facilement réutilisable sans modifier le code HTML. Si on souhaite changer l'image, on utilisera simplement une autre map-sprite.svg avec le même identificatif d' id. Pour le styliser, couleur, fond, bordure, effets déclanché par les statuts Hover,Active ou Focus on pourra le faire via le CSS.

Le lien Téléphone qui utilise la balise href="tel" permettant à un utilisateur de smartphone de composer le numéro en cliquant sur le lien posséde les même possibilités. On modifira aussi le numéro à composer dans le balisage HTML.

Exemple de composants 2

  • Lien : lire la suite
  • Lien : Retour
  • Bouton : Envoyer

See the Pen Icones cachés by Du Marais (@DjF) on CodePen.

On reprend le même principe avec du style CSS pour masquer et afficher l'icone qui accompagne le bouton et en le revelant sur le hover soit du lien, soit du bouton.

SVG inline

Pour rappel l'utilisation de la map-sprite est préférée ici à la définition du SVG dans le CSS car elle permet une plus grande modularité. Il est possible via des techniques coté serveur (PHP) de concevoir un système qui charge ou non les ressources svg necessaires à la page. 

L'image SVG embarquée  permet d'économiser des requêtes DNS. Elle convient bien à l'affichage d'éléments qui ne sont pas necessairement affichés sur toutes les pages d'un site et ils peuvent être stylisés et animés en CSS. Ses incovénients sont la taille de la page qui augmente et l'impossibilité de mettre les images en cache. Si on souhaite mettre les images dans le cache et conserver des pages HTML moins lourdes on utilisera des images .svg externes.

Voir les articles : 

Catégories: Développement WEB, svg

Commentaires: Pas de commentaires

Envoyer un commentaire