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

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

Patricia Arquette
Patricia Arquetteoriginal
2024-12-09 20:52:10907parcourir

How Can I Embed SVG Images Directly into My CSS Using Inline Definitions?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn