CSS avec SVG: Utilisation du monde réel

SVG: une plongée profonde dans le style et la manipulation avec CSS

Les graphiques vectoriels évolutifs (SVG) sont un format d'image vectoriel basé sur XML, idéal pour les graphiques Web. Son soutien à l'interactivité et à l'animation, associés à une excellente compatibilité du navigateur (puisque IE9), en fait un outil puissant pour le développement Web moderne. Cet article explore la mise à profit du CSS pour styliser et manipuler les SVG, améliorant leur polyvalence dans la conception Web.

Avantages clés de SVG

• Évolutivité: Contrairement aux images raster (PNG, JPG, GIF), les SVG maintiennent la netteté à n'importe quelle taille, parfait pour les logos et les icônes.
• Style CSS: Style directement et manipule les éléments SVG dans le DOM en utilisant CSS, permettant des interactions dynamiques et un style cohérent sur plusieurs SVG.
• Sprites SVG: Consolider plusieurs images en un seul fichier, en optimisant les performances en réduisant les demandes HTTP et en améliorant la mise en cache.
• Fonctions avancées: La prise en charge des animations et de l'interactivité dans les fichiers SVG autonomes étend ses applications au-delà des graphiques simples.

Pourquoi les SVG surpassent les bitmaps

Formats bitmap Définir l'image Color Pixel par pixel. Une petite image nécessite des milliers de pixels, résultant en une taille de fichiers plus grande même après compression. L'agrandissement des bitmaps conduit à la pixélation.

SVGS, étant à base de vecteur, définissent des images à l'aide de points, de lignes et de courbes. Il en résulte des tailles de fichiers beaucoup plus petites et une évolutivité supérieure. Par exemple, un cercle simple dans SVG peut être inférieur à 150 octets par rapport à un PNG ou JPG équivalent beaucoup plus grand. De plus, les arrière-plans SVG sont intrinsèquement transparents. La structure XML améliore également l'accessibilité et le référencement.

outils de création SVG

Bien que la compréhension du dessin SVG de base soit bénéfique, des outils spécialisés simplifient la création de formes complexes et le code de génération:

• Commercial: Adobe Illustrator, Affinity Designer, Sketch
• open source: Inkscape
• en ligne (gratuit / commercial): Gravit Designer, Vectr, svg-edit, boxy svg, vecEezy
• Bibliothèques de cartographie: Générez des graphiques SVG à partir de données à l'aide de JavaScript.

Les outils comme SVGO et SVGOMG peuvent encore optimiser le code SVG généré pour les tailles de fichiers plus petites.

en utilisant les SVG comme images statiques

dans <img src="https://img.php.cn/" alt="CSS with SVG: Real World Usage ">

<code class="language-css">.myelement {
  background-image: url("mybackground.svg");
}</code>

Cependant, les éléments interactifs dans le SVG sont désactivés. Les transforts et filtres CSS peuvent être appliqués, ce qui donne souvent des résultats supérieurs à la mise à l'échelle du bitmap.

arrière-plans SVG incorporés dans CSS

Inlinaison des SVG directement dans CSS en tant qu'images d'arrière-plan est efficace pour les petites icônes réutilisables, en évitant les demandes HTTP supplémentaires:

<code class="language-css">.myelement {
  background-image: url("mybackground.svg");
}</code>

outils comme les plugins PostCSS Assets rationalisent ce processus.

Images SVG réactives

Pour la conception réactive, assurez-vous que la largeur et la hauteur par défaut sont définies dans la balise <svg></svg> pour empêcher les problèmes de dimensionnement:

<code class="language-css">.mysvgbackground {
  background: url('data:image/svg+xml;utf8,<svg viewbox="0 0 800 600" xmlns="https://www.w3.org/2000/svg"><circle cx="400" cy="300" fill="#ff0" r="50" stroke="#f00" stroke-width="5"></circle></svg>') center center no-repeat;
}</code>

puis utilisez CSS:

<code class="language-html"><svg xmlns="https://www.w3.org/2000/svg" width="400" height="300"></svg></code>

Images SVG en ligne HTML

L'intégration du SVG directement dans HTML le fait partie du DOM, permettant la manipulation CSS et JavaScript:

<code class="language-css">img {
  display: block;
  max-width: 100%;
  height: auto;
}</code>

CSS peut alors cibler des éléments SVG spécifiques:

<code class="language-html"><svg id="invader" xmlns="https://www.w3.org/2000/svg" viewbox="35.4 35.4 195.8 141.8">
  <path d="..."></path>
</svg></code>

Cela permet un style dynamique en utilisant :hover, transitions et animations.

Sprites SVG: gestion efficace des icônes

combiner plusieurs icônes dans un seul fichier svg à l'aide de <symbol></symbol> éléments:

<code class="language-css">#invader {
  width: 200px;
  height: auto;
}

#invader path {
  stroke-width: 0;
  fill: #080;
}</code>

Utiliser <use></use> Éléments pour référencer les icônes dans HTML:

<code class="language-xml"><svg>
  <defs>
    <symbol id="icon-folder" viewbox="0 0 32 32">...</symbol>
  </defs>
</svg></code>

Cela améliore les performances, mais nécessite une manipulation minutieuse pour la compatibilité entre les navigateurs et la mise en cache efficace. Des techniques comme le chargement et l'injection de l'Ajax peuvent relever ces défis.

Effets SVG sur le contenu HTML (masques, coupure, filtres)

Tirez parti des propriétés CSS mask, clip-path et filter pour appliquer des effets tels que le masquage, l'écrêtage et les filtres visuels aux éléments SVG. La référence des éléments SVG dans CSS permet des manipulations visuelles complexes.

SVG autonome avec interactivité intégrée

Les fichiers SVG autonomes peuvent inclure CSS, JavaScript et même les bitmaps, créant des graphiques interactifs autonomes. Cela permet la distribution du contenu interactif sans s'appuyer sur des ressources externes.

Conclusion

SVG, combiné avec CSS, fournit une approche puissante et efficace des graphiques Web. Sa polyvalence s'étend des images statiques simples aux animations interactives complexes, offrant de nombreuses possibilités pour améliorer la conception Web.

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!