Un logo cliquable SVG avec alternatives

Posted in Technologie

Cet article s’intéressera au format SVG qui propose une solution flexible : une seule image vectorielle, qui pourra être redimensionnée et s’afficher dans différentes tailles sur tout support sans perte de qualité.

Nous verrons ici un exemple très concret : l’utilisation sur un site du SVG pour le logo cliquable qui renvoie à l’accueil de notre site. Nous ne voulons pas pénaliser les utilisateurs dont les navigateurs ne supportent pas le SVG, donc nous allons leur proposer un fallback (alternative) en PNG.

Plusieurs méthodes sont proposées dans cet article, avec ou sans l’utilisation de JavaScript, avec à chaque fois avantages et inconvénients. À vous de faire le choix de celle qui conviendra le mieux à votre projet.

  Voir la démonstration    Voir le code sur github 

 

(Note : le code est libre de droit vous pouvez le ré-utiliser comme bon vous semble, à l’exception du logo Geeks and the City prêté pour la démo)

Le SVG, c’est quoi ?

Avant de chercher comment inclure notre logo SVG dans une page, un petit rappel sur ce qu’est exactement ce format. SVG est l’acronyme de Scalable Vector Graphic, un langage XML utilisé pour décrire des graphiques en 2 dimensions. Puisque les images sont générées « en code » à base de formes géométriques et non de pixels, elles sont « zoomables » à l’infini et on peut les redimensionner sans perte de qualité (à condition bien sûr de respecter les proportions sous peine d’avoir une distorsion de l’image).

Un petit exemple de code, pour dessiner un carré noir :

    Mon carré noir 
   

Pour les plus motivés qui souhaitent plus d’informations sur la syntaxe du SVG je vous conseille le tutoriel SVG, le dessin vectoriel pour le web.

Pas de panique pour nos amis designers, vous pourrez utiliser vos logiciels de dessin vectoriel préférés pour des images plus complexes. Les logiciels Illustrator et Inkscape gèrent très bien la création de fichier .svg et il existe même une extension pour Fireworks dédiée.

Quelques règles de base cependant à respecter pour que vos images SVG soient compatibles avec le maximum de navigateurs possibles : 

• Evitez les dégradés trop compliqués, préférez les dégradés linéaires et radiaux; l’outil d’Illustator pour créer le dégradé de filet est à proscrire.
• N’utilisez pas les effets Photoshop proposés dans Illustrator qui se basent …

Auteur : InpIxelItrust

Retrouvez tout l’article Un logo cliquable SVG avec alternatives sur le site Alsacreations.com – Actualités.

Article révélé par MashupXFeed®