Chez momo-fr

Responsive et SVG : mariage de raison

Le format SVG et le responsif design

Avec l’avènement du responsif design le format SVG doit s’imposer !

Responsive et SVG : <b>mariage de raison</b> 1Trifouillant des thèmes WordPress régulièrement, je constate la présence de plus en plus importante de logos en SVG. Ce format d’image vectoriel que je connais depuis mes débuts dans le web, m’a surtout déplu au départ car non supporté par Internet Explorer 6 (c’est d’ailleurs le cas de ses suivants 7 et 8, depuis Explorer 9 ce format de fichier est enfin supporté chez Microsoft).

C’est un format de fichier très intéressant à l’heure du Responsive Design. Pouvoir agrandir selon la résolution de l’écran un logo sans perte de qualité est un plus indéniable, mais tous les logos ne peuvent finir en format SVG, les plus complexes, ou utilisants des fonctionnalités poussées du format SVG ne seront pas visibles sur tous les terminaux et navigateurs. La norme SVG est encore trop mal suivie par les acteurs du web, pourtant elle est très actuelle.

Les normes définies sur ce format sont en général la SVG Tiny 1.1 et Tiny 1.2, ce dernier permet une gestion plus étendue des possibilités de SVG (dégradés, transparence, etc), si certains navigateurs supporte SVG en natif d’autres utilisent un plug-in web installé par le système, on retrouve cette compatibilité sur la plupart des smartphones actuels.

Depuis 2009 Google propose une plug-in pour combler les lacunes de Windows à ce sujet, il est donc potentiellement supporté par les versions IE7 et 8.

Un secteur ou le SVG est plébiscité c’est la cartographie embarquée.

J’ai fait quelques tests depuis des exports Illustrator en 1.1 et 1.2, tout n’est pas encore clair et on rencontre des soucis avec des navigateurs exotiques, Internet Explorer fait des misères selon l’installation Windows où il est utilisé… bref, pour l’heure c’est une bonne piste, on peut prévoir une balise <object> avec une alternative en image pour les conditions difficiles.

L’histoire continue dans le monde du webdesign, on en fini jamais avec les bouts de codes pour quelques irréductibles… c’est finalement la preuve que c’est un domaine ou la liberté existe, même de nous ennuyer pour des choses qui devraient être consensuelles.

A noter que WordPress ne permet pas l’importation de fichier SVG par défaut, il faut user d’une extension ou modifier le fichier functions.php pour contourner cette restriction (de sécurité).

Un peu de SVG pour conclure cet article :

Fichier SGV en Tiny 1.1Fichier SVG en Tiny 1.2

Logotype en Tiny 1.1 à 80 %Logotype en Tiny 1.1 à 115 %

Sources : Le train de 13h37, Wikipedia, SCGWeb, SVG for WordPress

Vous aimerez aussi

Une réponse

Répondre à Kumita Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Plus de résultats...

Generic selectors
Corespondance exacte
Rechercher dans le titre
Rechercher dans le contenu
Post Type Selectors

Autres catégories du Blog

Partager cette publication