Backgrounds SVG : hexagones et écailles

Dudley Storey poursuit sa passionnante série sur les backgrounds SVG, ici avec des motifs en tuiles hexagonales et en écailles. On y apprend quelques petites astuces relatives à l'encodage base64.

Par

Un récent dossier de travail réalisé par un de mes étudiants utilisait une image de background “en écailles”, très intéressante, encodée en base64. J’ai décodé la texture puis j’ai apporté quelques améliorations au SVG. Pour compléter, j’ai créé un background hexagonal simple que je partage ici.

Motif en écailles

Pour les écailles, le markup est assez simple :

<svg xmlns="http://www.w3.org/2000/svg"  
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">  
<defs>  
    <pattern id="scales" width="30" height="30" 
    patternUnits="userSpaceOnUse"  patternTransform="scale(2)">
            <g id="curves">
                <path id="inner" d="M0 0c0,30, 30,30 30,0" />
                <path id="outer" d="M0 0c0,30, 30,30 30,0" />
            </g>
            <use x="15" y="15" xlink:href="#curves" />
            <use x="-15" y="15" xlink:href="#curves" />
            <use x="0" y="0" xlink:href="#curves" />  
            <use x="15" y="-15" xlink:href="#curves" />
            <use x="-15" y="-15" xlink:href="#curves" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#scales)" />
</svg>  

Le SVG utilise la technique standard du <pattern> que j’ai déjà illustrée dans de précédents articles (par exemple : motifs japonais, diagonales et motifs SVG en background) . Moins habituel, le motif utilisé dans le pattern est un élément “groupe”.

L’arrière-plan SVG est associé aux styles suivants :

svg {  
  background: #0F7173;
}
#scales { 
  fill: #0F7173;
}
#inner { 
    stroke: #0c4c4d;
    stroke-width: 3.1;
}
#outer { 
  stroke: #098f92;
  stroke-width: 0.9;
}

See the Pen SVG Scales by Dudley Storey (@dudleystorey) on CodePen.

Remarquez que l’élément SVG et les écailles utilisent la même couleur pour leur background et fill. Cette technique est répétée dans l’exemple de motifs hexagonaux qui va suivre.

Le pattern pourait être amélioré en définissant le stroke des chemins (path) en rgba plutôt qu’en valeurs hexadécimales. On pourrait ainsi les corriger automatiquement si les couleurs de background et de fill des écailles étaient modifiées.

Motifs hexagonaux

Le code comprend un balisage minimal pour créer un background hexagonal lié :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="100%" height="100%">  
     <defs>
        <pattern id="hexagons" width="50" height="43.4" 
        patternUnits="userSpaceOnUse" 
        patternTransform="scale(5) translate(2) rotate(45)">
            <polygon 
            points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2" 
            id="hex" />
            <use xlink:href="#hex" x="25" />
            <use xlink:href="#hex" x="-25" />
            <use xlink:href="#hex" x="12.5" y="-21.7" />
            <use xlink:href="#hex" x="-12.5" y="-21.7" />
        </pattern>
     </defs>
<rect width="100%" height="100%" fill="url(#hexagons)" />  
</svg>  

Le pattern utilise le CSS suivant :

svg {  
  background: rgb(125,155,132); 
}
polygon {  
  fill: rgb(125,155,132); 
  stroke-width: 2;
  stroke: #000;
}

See the Pen SVG Hexagons Background by Dudley Storey (@dudleystorey) on CodePen.

Là encore, le SVG utilise la même technique consistant à s’appuyer sur les mêmes background et fill pour l’élément SVG et ses polygones pour “remplir” l’espace vide. Dans cet exemple, j’ai utilisé une série de transformations du pattern pour le placé légèrement “en dehors” de la page.

Le translate est particulièrement important car un hexagone ayant un bord placé contre une bordure du viewport semblera avoir un côté plus long que l’autre.

Les traits (stroke) SVG s’étendent de manière égale de chaque côté d’une ligne interne représentant le chemin, par conséquent une augmentation de la valeur stroke-width (“épaisseur du trait”) aura pour conséquence de réduire la taille des hexagones.

Exemples CodePen

Les exemples CodePen qui précèdent utilisent le code SVG directement dans le HTML pour plus de clarté. En production, le CSS serait intégré au SVG et l’ensemble serait transformé en code base64 qui serait utilisé comme valeur de la propriété background-image.


Intéressé par SVG ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur SVG parus dans la Cascade.

Tous les articles sur les backgrounds SVG parus dans la Cascade.


Du même auteur dans La Cascade :

Backgrounds SVG : hexagones et écailles
Motifs SVG maoris
Les bases de SVG : Groupes
Bien utiliser l’attribut alt
Image révélée au grattage avec SVG et CSS Blend Modes
Créer de superbes diagrammes avec SVG et CSS Blend Modes
Backgrounds Pop-Art avec SVG et CSS Blend Modes
Motifs SVG japonais
Contraste de texte automatique avec CSS Blend Modes
Backgrounds SVG, les rayures
Diagonales et motifs SVG en background
Les bases de SVG : Lignes simples et multiples
Les bases de SVG : Polygones
Les bases de SVG : Cercles et Ellipses
Les bases de SVG : Rectangles et Carrés
Brood X : Le principe des cigales en CSS
5 règles pour rendre SVG accessible
3 raisons d’utiliser HSL pour vos couleurs
Utiliser HSL pour vos couleurs
Effets vidéo HTML5 avec CSS Blend-Modes
Un carrousel responsif en pur CSS
Combiner CSS clip-path et Shapes
Appropriation culturelle : utiliser les collections des musées
Créer un player audio en HTML5 (3 articles)
Qu’est-ce qu’un élément remplacé ?
Utiliser CSS object-fit
Stores vénitiens 3D en CSS
CSS : Aider la veuve et l’orphelin
Toi seul : utiliser only-child de CSS
Créer un background vidéo fullscreen avec HTML5
Rendre un SVG responsif
La première variable CSS : currentColor
Empty, une pseudo-classe pas si vide
Les raccourcis HTML5


Article original paru le 11 février 2016 dans the new code.

Sur l’auteur : est enseignant, auteur, artisan et cycliste, il vit à Calgary, dans l’État de l’Alberta au Canada. Passionné par le web et le développement (mobile) qu’il enseigne depuis 15 ans, il est l’auteur de Pro CSS3 Animation, et publie régulièrement dans son blog the new code des articles sur HTML, CSS et SVG. On peut le suivre sur Twitter ou Google+.

Traduit avec l’aimable autorisation de the new code et de l’auteur.
Copyright the new code © 2016.