Mettre du SVG dans vos logos

Mettre du SVG dans vos logos (le 24/06/2013)

Avec tous ces sites en responsive, le problème d'optimiser certaines images pour les écrans à haute densité de pixels – appelés Retina par abus de langage – commence à se faire sentir.

Disons-le très net : j'ai très peu de demandes expresses de clients sur le sujet de l'optimisation Retina. Toutefois, comme j'aime optimiser en standard tout ce qui peut l'être aisément, j'ai pris l'habitude de demander à mon graphiste chéri des exports SVG des logos des sites internet. Ainsi, le fait d'avoir un format vectorisé solutionne de facto le rendu du logo sur ces écrans, sans pour autant sacrifier le côté performances du site ni le fonctionnement de ce dernier.

Prenons donc un exemple, le logo du site de l'agence CSM.

Voici le code du logo :

<a href="../fr/" accesskey="1">
<!--[if lte IE 8]>
<img src="../layout/images/logo-csm.png" alt="Retour à l'accueil de CSM" width="240" height="84" />
<![endif]-->
<!--[if gt IE 8]><!-->
<img src="../layout/images/svg/logo-csm.svg" alt="Retour à l'accueil de CSM" width="240" height="84" onerror="this.removeAttribute('onerror'); this.src='../layout/images/logo-csm.png';" />
<!--<![endif]-->
</a>

Dans l'idée, SVG étant supporté partout sauf pour IE8 et inférieurs, on proposera donc le logo en SVG pour tout le monde, et en roue de secours une version dans un format GIF/JPEG ou PNG pour les vieux IE.

Pour le cas où un quelconque navigateur autre que les vieux IE ne supporte pas les images en SVG, l'erreur sera détectée et la version en PNG prendra automatiquement le relai (une sécurité sûrement dispensable, mais on n'est jamais trop prudent sur une image aussi importante qu'un logo).

Ajout : un tweet me signale qu'Android 2.x pourrait bénéficier de cette sécurité, pas si dispensable que cela donc !

Côté htaccess, il ne faudra pas oublier ces lignes :

# activera la compression pour SVG
AddOutputFilter INCLUDES;DEFLATE svg
AddOutputFilter INCLUDES;DEFLATE image/svg+xml

# fera fonctionner les fontes SVG sur iPad
AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Les premières activeront la compression, faisant passer le poids du fichier SVG de 24 ko à 7 ko. La suite garantira que le type MIME soit correctement défini pour faire fonctionner les polices SVG sur iPad.

Et voilà ! Sans révolutionner le monde, cette méthode sera un petit plus pour vos sites, en attendant qu'on ait une solution meilleure pour toutes les images sur les sites responsive.

Si vous avez envie de vous amuser, vous pouvez utiliser la ligne suivante dans votre head.

<link rel="logo" type="image/svg" href="http://www.csm-sa.ch/layout/images/svg/logo-csm.svg" />

L'exemple vient du site relogo, ce n'est pas un standard, c'est juste rigolo. :)

Pour en lire plus sur le sujet, vous pouvez lire ou relire cet article de Stéphanie Walter : Un logo cliquable SVG avec alternatives.

Permalien :

Flux RSS des commentaires de ce billet : https://www.nicolas-hoffmann.net/rss/commentaires.php?id_news=1567

4 commentaires

Posté par noclat le 24/06/2013 à 22:58:39
Dommage que les SVG ne profitent pas d'un aliasing décent. Le PNG avec @2x reste encore la meilleure solution si on veut privilégier la qualité d'affichage.
Posté par Philippe le 25/06/2013 à 0:25:40
Bien utile ce tuto pour optimiser la qualité d'un élément majeur de toute communication visuelle : le logotype !
Posté par Guirec le 25/06/2013 à 1:47:55
Le logo du site est en effet l'idéal pour commencer à utiliser SVG. Je crois que je ne le fais pas encore, je vais y remédier (sourire)

J'aimerais aussi utiliser le SVG pour davantage que le logo du site et là j'ai peur d'être moins efficace que avec mes images au format .png.

Avec les PNG je fais des sprites (économie de requêtes et @2x pour retina), peut-on faire des sprites avec des SVG ? (pour le moment en test j'ai transformé mes SVG en font pour cela)

Autre question: peut-on faire des manipulations "simples" tel que changer la couleur du SVG facilement ? Sans forcément passer par une librairie JS (svg.js) ? Si c'est possible en CSS ce serait génial.
Posté par Nico le 25/06/2013 à 9:30:43
@noclat : tu en saurais plus sur le sujet ? Ça m'intéresse.

Guirec : oui, un SVG n'est jamais qu'un fichier texte, ça s'édite au besoin (sourire)

Ajouter un commentaire









L'option « Se souvenir de mes informations » utilise un cookie, elle ne sera pas effective si vous les avez désactivés.

Les balises HTML ne seront pas interprétées, il est donc inutile d'en mettre. Par contre, les sauts de lignes de votre commentaire seront pris en compte, ne mettez donc pas de <br />, le site s'en chargera. Bien sûr, un commentaire vide ne sera pas ajouté !

L'auteur (autrement dit moi) n'est pas responsable des éventuelles fautes d'orthographe dans les commentaires.
Tout propos raciste et/ou insultant sera supprimé sans préavis. Les commentaires hors de propos destinés à faire de la pub pour des sites seront également supprimés sans ménagement.

Je vous prie de me pardonner, j'ai énormément de mal à lire le "langage" SMS, il n'est donc pas du tout interdit de s'abstenir de l'utiliser. Qui plus est, vous avez sûrement un clavier digne de ce nom et pas celui d'un téléphone portable. Ne vous gênez pas pour utiliser l'option "Prévisualiser" si vous voulez vous relire avant de poster, je vous en remercie d'avance !

Cet article a été écrit par Nicolas Hoffmann.

Ce site est la propriété de Nicolas Hoffmann.
Tous droits réservés, les textes du blog sont publiés sous licence CC BY-NC-SA.