n°3
SVG en-ligne comme fond d'un élément avec CSS3 et Javascript
Web, Javascript
16 août 2016

Depuis CSS3 on peut définir une image SVG comme fond d'un élément sans URL, en passant directement l'encodage de l'image. On peut ainsi éviter de charger un fichier externe.

div {
  width: 50vw;
  height: 50vh;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSI2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDMgTDMgMCBMNCAxIEwyIDMgTDQgNSBMMyA2IFoiIGZpbGw9InJnYmEoMjAwLDIwMCwyMDAsMC43NSkiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

L'image SVG est encodée en base64 pour l'insérer en ligne directement dans le CSS. Des outils tel que celui-ci permettent cet encodage.

On peut aussi utiliser Javascript pour cela à l'intérieur d'un script. A ce moment là on peut même éviter d'avoir un fichier CSS.

Ici, par exemple, la même image en SVG HTML5 que j'encode et assigne avec Javascript.

var svgMarkup = "<svg width="4" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 3 L3 0 L4 1 L2 3 L4 5 L3 6 Z" fill="rgba(200,200,200,0.75)"/></svg>";

var svg64 = window.btoa(svgMarkup);

document.querySelector("div").style.backgroundImage = "url('data:image/svg+xml;base64,"+svg64+"')";

c. héraud-louisadat

architecte & développeur
75018 Paris
heraud-arobase-laponies-point-fr

*1992, Strasbourg.

Diplômé d'état en 2016 de l'ENSA Paris-Malaquais et de la RWTH Aachen puis habilité à maîtrise d'oeuvre en nom propre (HMONP) en 2019, j'ai travaillé pour diverses agences à Paris. Je suis doctorant à la Faculté des sciences historiques de l'Université de Strasbourg sur les « Méthodes de l'architecture Heimatschutz ». Je développe également des applications pour le Web et la 3D. Vous pouvez également consulter l'archive des travaux laponies.fr ainsi que la carte des bonnes adresses.

Amis, famille et blogroll : Atkinson+Héraud, Anaïs Héraud-Louisadat, Héraud–Baumann, Till Baumann, La Boucle.

alsace europe