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+"')";