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 !

Trifouillant 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

Une réponse

Laisser un commentaire

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

Autres catégories du Blog

 

Vous aimerez aussi

Partager cette publication

Partager sur twitter
Partager sur facebook
Partager sur linkedin
Partager sur pinterest
Partager sur telegram
Partager sur whatsapp
Partager sur tumblr
Partager sur email
Partager sur print