Utilisation du CSS dans le monde réel avec SVG –

Le format SVG est un format d'image vectorielle léger qui permet d'afficher une variété de graphiques sur le Web et d'autres environnements, prenant en charge l'interactivité et l'animation. Dans cet article, nous allons explorer les différentes manières d’utiliser CSS avec SVG et les moyens d’inclure des SVG dans une page Web et de les manipuler.

Le format SVG (Scalable Vector Graphic) est un standard ouvert depuis 1999, mais l'utilisation du navigateur est devenue pratique en 2011 après la publication d'Internet Explorer 9. Aujourd'hui, SVG est bien pris en charge par tous les navigateurs bien que des fonctionnalités plus avancées puissent varier.

Avantages SVG

, JPG et GIF définissent la couleur des pixels individuels. Une image 100 × 100 PNG nécessite 10 000 pixels. Chaque pixel nécessite quatre octets pour le rouge, le vert, le bleu et la transparence, de sorte que le fichier résultant est de 40 000 octets (plus un peu plus pour les métadonnées). La compression est appliquée pour réduire la taille du fichier. Le format PNG et GIF utilise la compression sans perte de type ZIP tandis que le format JPG est sans perte et supprime les détails les moins visibles.

Les images bitmap sont idéales pour les photographies et les images plus complexes. en XML. Les points, les lignes, les courbes, les chemins, les ellipses, les rectangles, le texte, etc. sont dessinés sur un canevas SVG. Par exemple:

La ​​vue viewBox définit un espace de coordonnées. Dans cet exemple, une zone de 800 × 600 commençant à la position 0,0 a un cercle jaune avec une bordure rouge tracée au centre:

Les avantages des vecteurs sur les bitmaps: [19659010] le SVG ci-dessus utilise moins de 150 octets, ce qui est considérablement plus petit qu'un équivalent PNG ou JPG

SVG est idéal pour les logos, graphiques, icônes et diagrammes plus simples. Seules les photographies sont généralement impraticables, bien que les SVG aient été utilisés pour les espaces réservés pour chargement paresseux .

Il est utile de comprendre les bases de [19459267] SVG 19459007 Vous voudrez bientôt créer des formes plus complexes avec un éditeur capable de générer le code. Les options incluent:

Chacune a des forces différentes et vous obtiendrez des résultats différents pour des images apparemment identiques. En général, des images plus complexes nécessitent des logiciels plus complexes.

Le code résultant peut généralement être simplifié et minimisé en utilisant SVGO ( plugins sont disponibles pour la plupart des outils de construction ) ou Jake Archibold Outil interactif SVGOMG .

Les SVG en tant qu'images statiques

Utilisés dans une balise HTML ou CSS background-url les SVG agissent de manière identique aux bitmaps:

 / * CSS background * /
.myelement {
  background-image: url ('mybackground.svg');
}

Le navigateur désactivera tous les scripts, liens et autres fonctions interactives incorporés dans le fichier SVG. Vous pouvez manipuler un fichier SVG en utilisant CSS de manière identique à d'autres images en utilisant les filtres transform etc. Les résultats de l'utilisation de CSS avec SVG sont souvent supérieurs aux bitmaps.

Arrière-plans SVG intégrés au CSS

Un SVG peut être intégré directement en code CSS en tant qu'image d'arrière-plan. Cela peut être idéal pour les petites icônes réutilisables et évite les requêtes HTTP supplémentaires. Par exemple:

 .mysvgbackground {
  background: url ('data: image / svg + xml; utf8, ') centre-centre no-repeat;
}

Le codage UTF-8 standard (plutôt que base64) peut être utilisé, il est donc facile de modifier l'image SVG si nécessaire.

CSS avec SVG: Images SVG réactives

Lors de la création d'un site Web responsive omettre les attributs width et height et permet à une image de dimensionner au maximum via CSS:

 img {
  bloc de visualisation;
  largeur max: 100%;
}

Cependant, un SVG utilisé en tant qu'image n'a pas de dimensions implicites. Vous pourriez découvrir que max-width est calculé comme zéro et que l'image disparaît complètement. Pour résoudre le problème, assurez-vous qu'une largeur par défaut width et est définie dans la balise :

Note: les dimensions ne doivent pas être ajoutées aux SVG insérés, comme nous le découvrirons dans la section suivante. Quand cela est fait, ils font partie du DOM et peuvent être manipulés avec CSS et JavaScript:

 SVG est directement intégré dans le HTML: 



 Le SVG fait maintenant partie du DOM. 

Aucun attribut de width ou height n'est défini pour le SVG, il peut donc dimensionner en fonction de l'élément contenant ou être directement dimensionné en utilisant CSS:
  bloc de visualisation;
  largeur: 200px;
}

#invader path {
  stroke-width: 0;
  remplir: # 080;
}

Voir le stylo SVG au format HTML par SitePoint ( @SitePoint ) sur CodePen .

Éléments SVG tels que chemins, cercles, rectangles, etc. peut être ciblé par les sélecteurs CSS et le style modifié en utilisant les attributs SVG standard comme propriétés CSS. Par exemple:

 / * Style CSS pour tous les cercles SVG * /
cercle {
  largeur de trait: 20;
  accident vasculaire cérébral: # f00;
  fill: # ff0;
}

Cela remplace tous les attributs définis dans le fichier SVG car le CSS a une spécificité supérieure. Le style CSS SVG offre plusieurs avantages:

• Le style basé sur des attributs peut être supprimé du fichier SVG pour réduire le poids de la page.
• Le style CSS peut être réutilisé sur n'importe quel nombre de pages
• ou des éléments individuels de l'image peuvent avoir des effets CSS appliqués en utilisant : hover transition animation etc.

SVG Sprites

Un seul fichier SVG peut contenir un nombre quelconque d'images séparées. Par exemple, ce fichier folders.svg contient des icônes de dossiers générées par IcoMoon . Chacun est contenu dans un conteneur distinct avec un identifiant pouvant être ciblé:

Le fichier SVG peut être référencé en tant que ressource externe mise en cache dans une page HTML. Par exemple, pour afficher l'icône du dossier dans # icon-folder :

et le style avec CSS:

 svg.folder {fill: # f7d674; }

La méthode présente quelques inconvénients:

1. Elle échoue dans IE9 +.
2. Le style CSS ne s'applique qu'à l'élément contenant la . Le remplissage fait de chaque élément de l'icône la même couleur.

Pour résoudre ces problèmes, l'image-objet SVG peut être intégrée à la page HTML, puis masquée avec display: none ou techniques similaires. Une icône individuelle peut être placée en faisant référence à l'ID:

Voir le stylo sprites SVG par SitePoint ( @SitePoint ) sur CodePen .

fonctionne dans tous les navigateurs modernes à partir d'IE9 + et il devient possible de styliser des éléments individuels dans chaque icône à l'aide de CSS.

Malheureusement, l'ensemble SVG n'est plus mis en cache et doit être reproduit sur chaque page nécessitant une icône. La solution (à cette solution!) consiste à charger le SVG en utilisant Ajax – qui est ensuite mis en cache – et à l'injecter dans la page. Le téléchargement IcoMoon fournit une bibliothèque JavaScript, ou vous pouvez utiliser SVG pour tout le monde .

Effets SVG sur le contenu HTML

SVG supporte depuis longtemps:

• masques : modification de la visibilité de parties d'un élément
• découpage : suppression de segments d'un élément pour qu'une autre boîte standard devienne toute autre forme
• filters : graphique des effets tels que le flou, la luminosité, les ombres, etc.

Ces effets ont été portés sur les propriétés de filtre CSS mask et filter . Cependant, il est toujours possible de cibler un sélecteur SVG:

 / * CSS * /
.myelement {
  clip-path: url (#clip);
}

Cela fait référence à un effet dans un fichier SVG incorporé dans HTML:

pour produire des effets tels que du texte découpé avec une image ou un arrière-plan dégradé:

Voir le stylo Écriture SVG par SitePoint ( @SitePoint ) sur ].

Portable SVGs

Enfin, les fichiers SVG autonomes peuvent contenir des polices CSS, JavaScript et des polices ou images bitmap encodées en base64! Tout élément en dehors des domaines de XML doit être contenu dans les sections <! [CDATA[ … ]]> .

Envisagez le fichier invader.svg suivant. Il définit le style CSS avec des effets de survol et une animation JavaScript qui modifie l'état de viewBox :

Lorsqu'il est référencé dans un arrière-plan HTML ou CSS, le fichier SVG devient une image statique de l'état initial (la première animation frame ):

Cependant, ouvre l'image dans son propre onglet de navigateur et tous les effets reviendront.

Cela pourrait être utile pour distribuer des images, des démonstrations ou des petits documents nécessitant un niveau d'interactivité embarquée.

SVG sophistiqués

Les SVG offrent un large éventail de possibilités techniques aussi bien à l'intérieur qu'à l'extérieur des pages Web. Lorsque vous combinez CSS avec SVG, il devient possible de styliser et d'animer l'intégralité de l'image ou des éléments individuels de manière intéressante.

Cet article décrit les différentes manières de manipuler les images SVG. forme des faits saillants et la validation

Malgré l'âge de la technologie SVG, les développeurs Web découvrent encore façons de transformer des pages à base de blocs ennuyeuses avec des effets subtils en utilisant CSS avec SVG. S'il vous plaît laissez-nous savoir si vous créez des exemples intéressants.

Craig est un consultant Web britannique indépendant qui a construit sa première page pour IE2.0 en 1995. Depuis, il préconise les normes, l'accessibilité et les meilleures techniques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler