Générateur de Séparateurs SVG
Générez des séparateurs SVG de sections instantanément. Choisissez triangle, diagonal, zigzag, courbe ou flèche — copiez le snippet HTML et utilisez-le entre les sections de page.
① Choisissez une forme ② Définissez hauteur et couleur ③ Copiez le HTML SVG
Couleur de remplissage
#C9B89A
Comment ça marche
Chaque séparateur est un SVG pleine largeur avec preserveAspectRatio="none". Les coordonnées du polygone ou du chemin sont définies dans un viewBox correspondant à la hauteur, de sorte que la forme remplit toute largeur de conteneur.
Options de retournement
Retourner verticalement reflète la forme à l'envers avec transform: scaleY(-1). Retourner horizontalement la reflète gauche-droite avec scaleX(-1). Les deux peuvent être combinés pour 4 orientations par forme.
Utilisation
Placez le SVG entre deux sections. Définissez sa couleur de remplissage pour correspondre à la section en dessous. Pour une couverture complète, ajoutez display:block pour supprimer l'espace inférieur SVG par défaut.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 80" preserveAspectRatio="none" width="100%" height="80" style="display:block">
<g fill="#c9b89a">
<polygon points="-500,80 720,0 1940,80" />
</g>
</svg>
Qu'est-ce qu'un séparateur SVG de sections ?
Un séparateur SVG de sections est une forme vectorielle évolutive placée entre deux sections de page pour créer une transition visuelle fluide. Les formes courantes incluent les triangles, les coupes diagonales, les zigzags, les courbes et les flèches. Comme le séparateur est défini en SVG avec preserveAspectRatio="none", il s'étire à toute largeur de conteneur. Cette technique ne nécessite aucune image.
Questions fréquentes
Un séparateur SVG de sections est un graphique vectoriel évolutif placé entre deux sections de page pour créer une transition visuelle fluide. Les séparateurs utilisent des formes comme des triangles, courbes ou zigzags pour séparer les sections avec un bord décoratif.
L'attribut SVG preserveAspectRatio="none" indique au navigateur d'étirer le contenu SVG pour remplir exactement les dimensions de son conteneur, ignorant le ratio d'aspect original.
Un séparateur courbe utilise un chemin de Bézier cubique fluide ancré au centre supérieur du viewBox, créant un arc doux unique. Un séparateur vague utilise un chemin sinusoïdal avec plusieurs pics et creux répétés.
Définissez la couleur de remplissage dans cet outil pour correspondre exactement au background-color de la section en dessous du séparateur.
Oui. Chaque forme a 4 orientations possibles grâce à la combinaison de retournements vertical et horizontal, soit 5 formes × 4 orientations = 20 séparateurs visuels uniques.
Collez le HTML SVG directement entre les deux balises section. Assurez-vous que le SVG a display:block pour éliminer le petit espace que les navigateurs ajoutent sous les SVG inline.
Oui. Le SVG inline fait partie du DOM HTML et ne nécessite pas de requêtes HTTP. Les moteurs de recherche le lisent comme HTML, et comme les séparateurs ne contiennent généralement pas de texte, ils n'ont aucun impact SEO négatif.