Le Blog

Le blog laboratoire de F.L.D. Studio
0

SVG en Background

Tout est dit dans le titre. Cette fois on utilise une image au format SVG à partir du CSS. On emploi la propriété background pour afficher et positionner l'image .svg. Celle-ci peut être externe (donc cacheable) ou embarquée (non cacheable). A noter que IE (11 inclu) ne reconnait pas le svg in-line dans une propriété CSS background-image.

See the Pen SVG Background by Du Marais (@DjF) on CodePen.

Si on à la 'main' sur le svg il est possible de le styliser avec cette méthode en utilisant les attributs de présentations spécifiques aux SVG à l'intérieur même de la définition du svg.

On peux même le rendre respondif. Dans le cas d'une image utilisée avec la propriété background du CSS  utiliser la technique du Padding Hack comme expliqué dans cette article :  http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

Exemple en ligne :  http://tympanus.net/Tutorials/ResponsiveSVGs/index5.html

    .responsif{   width: 25%;   height:0;
    
          /* padding-top: (svg-height / svg-width) * width-value; */
    
    
          /* ( ( 1024 / 1024 ) x (25/100) ) x 100 */
    
      padding-top:25%;   background: url(http://www.alsacreations.com/xmedia/tuto/svg/kiwi.svg);   background-size: cover;  
    background-repeat: no-repeat;   background-color:red; }

Pour du svg in-line responsif voir : https://la-cascade.io/rendre-svg-responsif/

Les images SVG affichées en background à l'aide du CSS  permettent un balisage HTML plus léger. Néanmoins elles ne peuvent pas être animées, redimenssionnées  ou stylisées sur des statuts (ex:hover). Déclarées in-ligne elles ne peuvent pas être mise en cache, ce qui est le cas si on utilise des images externes. Cette technique convient bien à l'affichage de logos ou d'élements décoratifs que l'on retrouve sur plusieurs pages d'un site (voit toutes !) .

Les attributs de la méthode background sont très complets et permettent de  dimenssionner l'image et de la positionner. Il est aussi tout à fait possible aussi d'utiliser la même technique de découpage / affichage des images à partir d'un sprite au format .SVG comme on le ferait dans un sprite avec un format bitmap (.PNG ou .JPG ) Dans ce cas, personnellement je préfére la technique de la map-sprite qui permet de s'affranchir du repère des positions de l'image dans le sprite et qui est aussi une méthode qui favorise l'accéssibilité.

Commentaires: Pas de commentaires

Envoyer un commentaire