Encodage SVG pour CSS

Note aux utilsateurs : dans l'optique de « partage », les fichiers soumis sont enregistrés de manière anonyme et accessibles à tout le monde.

Conversion SVG

Glisser un fichier SVG sur la page ou coller le code dans le champ
nb: si la prévisualisation ne fonctionne pas, ne pas hûrler ! Il s'agit probablement d'un bug sur le SVG initial. Vérifier le code ici.

Comment ça marche ?

L'intégration de pictogrammes et autres logos dans un site web s'effectue de différentes manières : svg inline, img src="path/to/image", etc… Pour l'intégration via CSS nous pouvons le faire également en encodant en base64 le contenu du SVG au détriment d'un surpoids d'environ 30%.

Une alternative CSS consiste à encoder le contenu XML du SVG de telle sorte que l'on puisse utiliser directement ce code dans un background-image en variabilisant les attributs de type fill compatibles avec un préprocesseur comme SASS.

Et pour les gros volumes de SVG et un peu plus de performance web, une autre option (pour aller) un plus loin

Exemple

Ce code affichera un pictogramme "+" orange. Une fois encodé, le XML fournira une chaine de caractères exploitable dans un background-image CSS, ce qui donnera :

Exemples en vrac

Exporter des SVG « propres »

Ci-dessous, le code d'un SVG qui a été soumis au convertisseur.

Ce code est relativement propre mais peut aisément être optimisé. En l'état, le SVG a un poids de 1673 octets. Mais à bien y regarder, on trouve des attributs dont on peut se passer sans nuire au résultat graphique.

On peut retirer les attributs de taille width="35" height="35" et de mise en forme fill="none".
Pour qu'il soit encore plus sympa à utiliser, on ajoute un viewBox="0 0 35 35". Et hop, un SVG bien responsive ! Mais ce n'est pas tout… Le path du SVG précise un fill="#000".
En l'état, ce n'est pas gênant mais ça ne sert à rien. Un path sans notion de couleur spécifiée est noir, quoi qu'il arrive. Aller hop, on l'enlève aussi, ce fill.
Très bien, mais ensuite ? Et bien on ouvre son Illustrator et on va exporter ce fichier mais en configurant un peu les paramètres.

Sélectionner le menu « Fichier › Exporter… › Exporter pour les écrans » (retenir le raccourci clavier me parait utile).

Dans cette boite de dialogue, sélectionner la molette d'options au niveau de « Format ».
La boite de configuration propose les différentes options pour chaque format d'export possible. Dans la partie SVG, mettre les paramêtres comme ci-dessous.
Cette configuration permet d'exporter des SVG optimisés au mieux.

Une fois le fichier exporté, il reste une dernière étape : passer le code en revue dans un IDE de votre choix.
Pour le fichier traité ici, on obtient un code qui ressemble maintenant à ça.

En l'état, nous avons toujours le même visuel, mais en version responsive et bien plus léger (922 octets).
Il ne reste plus qu'à enlever (ou pas) le <title>sample-clean</title> et le tour est joué.

Là, j'entends des grincheux au fond de la classe qui disent « - Eh mais il est noir ton truc ! Je le veux en couleur ! ». Mais bien sûr qu'on va le faire en couleur, en lisant le petit tuto sur les SVG… Et-c-est-tout !

Utilisation des sources
Les sources de « Encodage SVG pour CSS » proposées par sont mises à disposition selon les termes de la licence Creative Commons CC BY-NC-SA 4.0.
(licence Creative Commons CC BY-NC-SA 4.0 : Attribution - Pas d'utilsation commerciale - Partage dans les mêmes conditions)
Si vous souhaitez participer, même modestement, au maintien du site et pour son usage, vous pouvez cliquer sur le joli bouton…
Un petit sou avec
Voir aussi…
  • Lazy Load Intersection Observer Lazy Load avec IntersectionObserver API pour images, picture, iframe, etc. Chargement lazy load de contenu, chargement différé de contenu de page web, script lazy loading
  • Vérifier un numéro de carte bancaire Vérification de carte bancaire, script de validation de carte bancaire. Contrôle de format de numéro de carte bancaire, algorithme de Luhn carte de crédit Visa, Mastercard, Maestro, CB, Carte Bancaire, Discover Card, American Express, JCB Cards
  • Owl Carousel multiple Gérer plusieurs carrousels/sliders sur une seule page avec Owl Carousel 2. Manage multiple carousels/sliders on one page with Owl Carousel 2
  • Conversion SVG/CSS Encodage SVG pour CSS compatible Sass, SVG encoder, base64 SVG pour CSS. SVG to base64, Convert SVG to Data URI for css
  • Optimisation SVG Intégration SVG via xlink/use/symbol, factorisation de symbol SVG, optimisation SVG web performance
  • SVG Responsive Utilisation des media queries internes à SVG
  • Design, flux et accessibilité jQuery Responsive layout logical DOM plugin
  • Lightbox Responsive et Accessible Lightbox images jQuery Responsive accessible a11y. Automatisation d'une Lightbox multipages. Lightbox image unique ou multiple. Lightbox responsive et accessible a11y wcag
  • Tooltip (infobulle) a11y Tooltip (infobulle) compatible a11y et SEO, naviguable au clavier, accessible par lecteur d'écran. Infobulle accessible, accessible tooltip
  • Script de contrôle de code postal Script de contrôle de codes postaux internationaux. Script zipcode, zipcode validator. Valider un code postal à la saisie, javascript contrôle de code postal
  • Widget calendrier PHP Construction d'un widget « calendrier » en PHP et asynchrone
  • Responsive background-image jQuery responsive background-image plugin, plugin jQuery responsive background images
  • Drapeaux ISO 3366 SVG Drapeaux nationaux vectoriels normés ISO alpha 2, alpha 3 et numérotation Organisation des Nations Unies (ONU). Drapeaux SVG pour internationalisation de sites multilingues.
  • Layout rigolo Une autre approche pour définir un layout de page responsive.
  • Serveur d'images placeholders Serveur d'images placeholder pour le développement front-end
  • Générateur de noms API de génération de couples prénom/nom aléatoires.
  • Générateur images TTF API de génération de textes en images.
2020-12-06