Comment puis-je intégrer des images SVG directement dans mon CSS à l'aide de définitions en ligne ?

Incorporation d'images SVG en ligne dans CSS

CSS fournit une méthode pratique pour intégrer des graphiques vectoriels évolutifs (SVG) directement dans sa base de code à l'aide de définitions en ligne . Cette technique permet aux développeurs d'intégrer des graphiques SVG en tant qu'images d'arrière-plan ou d'autres éléments de conception.

Utilisation

Pour intégrer une image SVG en ligne dans CSS, utilisez la syntaxe suivante :

/* Class with inline SVG background image */
.my-class {
  background-image: url("data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' width='...' height='...'>
      ...
    </svg>");
}

Exemple

Considérez ce qui suit exemple :

body {
    background-image: url("data:image/svg+xml;utf8,
      <svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
        <linearGradient>

Dans cet exemple, une définition SVG en ligne crée un arrière-plan dégradé coloré qui s'étend sur toute la page. Le SVG en ligne contient un LinearGradient pour définir un dégradé de couleurs et un rectangle rempli avec le dégradé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!