Blog du grouik

Vous le saviez déjà, il est possible d'insérer "en dur" vos SVG dans vos fichiers css.

La première étape est de réduire la taille du svg. Cet outil en ligne fait très bien l'affaire.

https://jakearchibald.github.io/svgomg/

Ensuite, on encode en base64; et on envoie tout ça dans le css comme ceci par exemple:

.exemple{
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYmIwYTIxIiBzdHJva2Utd2lkdGg9IjEuOSI+PHBhdGggZD0iTTE2IDlhNyA3IDAgMSAxLTctNyIgY29sb3I9IiMwMDAiIG92ZXJmbG93PSJ2aXNpYmxlIi8+PHBhdGggZD0iTTUuNyAxMi4zbDQuNi00LjZtLTQuNiAwbDQuNiA0LjYiLz48L2c+PC9zdmc+);
}

(309 caractères)

Mais, il est aussi possible de les laisser en UTF8, à condition d'Urlencoder le svg (on peut ne pas urlencoder les guillemets et les espaces afin d'optimiser, mais alors il faut encadrer toute la chaîne par des doubles quotes). Comme ceci:

.exemple{
 background-image:  url("data:image/svg+xml;utf8,%3Csvg xmlns%3D 'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg ' width%3D '302.9 ' height%3D '302.9 '%3E%3Cg fill%3D 'none ' stroke%3D '%23fff ' stroke-width%3D '20 '%3E%3Cpath d%3D 'M293 151.4c0 78-63.5 141.5-141.6 141.5C73.4 293 10 229 10 151 10 73.2 73.3 10 151.4 10c78 0 141.5 63.3 141.5 141.4z ' color%3D '%23000 ' overflow%3D 'visible '%2F%3E%3Cg stroke-width%3D '12 '%3E%3Cpath d%3D 'M170.3 177c0 24.4-20 44.3-44.4 44.3-25 0-45-20-45-44.4 0-25 20-45 44.4-45 ' color%3D '%23000 ' overflow%3D 'visible '%2F%3E%3Cpath d%3D 'M105.4 197.5l29-29m-29 0l29 29 '%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

(590 caractères) Et ... Fuck c'est un fail. le but de ce billet était de montrer qu'en restant en UTF8, c'était plus court....

J'ai rédigé les lignes précédentes en utilisant le logo du Hackerspace. Essayons avec un autre SVG;

Ce symbole par exemple:

Je le passe dans la moulinette sus-citée, le code svg donne:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M10 11.8L8.5 7.7l-1.6 3.7c-.3.8-1.4.8-1.8.1L3.9 9l-1.1 1.6-1.6-1.2 2-3c.4-.6 1.4-.6 1.7.1l1 2.1 1.7-4c.3-.8 1.5-.8 1.8 0l1.6 4 2.1-5.9 1.8.6-3 8.5c-.3.9-1.5.9-1.9 0z"/></svg>

Exemple d’intégration css en base 64:

.exemple{
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEwIDExLjhMOC41IDcuN2wtMS42IDMuN2MtLjMuOC0xLjQuOC0xLjguMUwzLjkgOWwtMS4xIDEuNi0xLjYtMS4yIDItM2MuNC0uNiAxLjQtLjYgMS43LjFsMSAyLjEgMS43LTRjLjMtLjggMS41LS44IDEuOCAwbDEuNiA0IDIuMS01LjkgMS44LjYtMyA4LjVjLS4zLjktMS41LjktMS45IDB6Ii8+PC9zdmc+);
}

(325 caractères)

Exemple d’intégration css en UTF8:

.exemple{
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 16 16'%3E%3Cpath d%3D'M10 11.8L8.5 7.7l-1.6 3.7c-.3.8-1.4.8-1.8.1L3.9 9l-1.1 1.6-1.6-1.2 2-3c.4-.6 1.4-.6 1.7.1l1 2.1 1.7-4c.3-.8 1.5-.8 1.8 0l1.6 4 2.1-5.9 1.8.6-3 8.5c-.3.9-1.5.9-1.9 0z'%2F%3E%3C%2Fsvg%3E");
}

(276 caractères)

Voila cette fois, le svg est plus court s'il est laissé en UTF8. La conclusion est: n'encodez pas systématiquement en base 64, parce que c'est moche et que parfois, ça prend plus de place.

PS: Source

PS2: le temps de rédiger ce billet, mon train ne va pas tarder à arriver. Tchouss