Liste de "path" utile pour les svg de votre site

2017-05-14

web Hadock 2017-05-14

Un svg? C'est quoi?

Le Scalable Vector Graphics (en français « graphique vectoriel adaptable »), ou SVG, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML. Ce format inspiré directement du VML et du PGML est spécifié par le World Wide Web Consortium

Concrètement : les images vectorielles peuvent être agrandies ou rétrécies à l'infinie sans subir de perte; a contrario des images classiques dites "matriciel".

 

 

 

Comment se compose le code?

Ici je vais vous rediriger vers l'excellent article de "alsacréations" juste ici.

 

La liste :

IMPORTANT : Les images présentes sont des screenshoot le dessin vectoriel différe (par exemple celui avec le demi-cercle ne présente pas de "barre" en bas du demi-cercle). Les images sont là pour vous donner un ordre d'idées je me suis donc permis de prendre des marges sur le haut et le bas de chaque image.

Pour la liste qui va suivre je ne modifirais que le "path d" du code suivant :

<svg class="decor-red" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
      <path d="JUSTE ICI" stroke-width="0"></path>
</svg>

Pour la couleur une class css suffit :

.decor-red {
    fill: white;
    stroke: #e64c3c;
}

 

M0 0 L100 100 L0 100

 

M0 100 L100 0 L100 100

 

M0 100 L50 0 L100 100

 

Ici cas particulier :

<svg class="decor-red" height="120px" preserveAspectRatio="none" style="height: 120px !important;" version="1.1" viewBox="0 0 100 100" width="120px" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" stroke-width="0"></circle>
</svg>

M0 100 C50 0 50 0 100 100 Z

 

M0 0 C50 100 50 100 100 0  L100 100 0 100

 

M0 100 L50 0 L100 100

 

M0 0 L50 100 L100 0 L100 100 L0 100

 

M0 100 L2 60 L4 100 L6 60 L8 100 L10 60 L12 100 L14 60 L16 100 L18 60 L20 100 L22 60 L24 100 L26 60 L28 100 L30 60 L32 100 L34 60 L36 100 L38 60 L40 100 L42 60 L44 100 L46 60 L48 100 L50 60 L52 100 L54 60 L56 100 L58 60 L60 100 L62 60 L64 100 L66 60 L68 100 L70 60 L72 100 L74 60 L76 100 L78 60 L80 100 L82 60 L84 100 L86 60 L88 100 L90 60 L92 100 L94 60 L96 100 L98 60 L100 100 Z

 

M-5 100 Q 0 20 5 100 Z M0 100 Q 5 0 10 100 M5 100 Q 10 30 15 100 M10 100 Q 15 10 20 100 M15 100 Q 20 30 25 100 M20 100 Q 25 -10 30 100 M25 100 Q 30 10 35 100 M30 100 Q 35 30 40 100 M35 100 Q 40 10 45 100 M40 100 Q 45 50 50 100 M45 100 Q 50 20 55 100 M50 100 Q 55 40 60 100 M55 100 Q 60 60 65 100 M60 100 Q 65 50 70 100 M65 100 Q 70 20 75 100 M70 100 Q 75 45 80 100 M75 100 Q 80 30 85 100 M80 100 Q 85 20 90 100 M85 100 Q 90 50 95 100 M90 100 Q 95 25 100 100 M95 100 Q 100 15 105 100 Z

 

M0 100 Q 2.5 40 5 100 Q 7.5 40 10 100 Q 12.5 40 15 100 Q 17.5 40 20 100 Q 22.5 40 25 100 Q 27.5 40 30 100 Q 32.5 40 35 100 Q 37.5 40 40 100 Q 42.5 40 45 100 Q 47.5 40 50 100 Q 52.5 40 55 100 Q 57.5 40 60 100 Q 62.5 40 65 100 Q 67.5 40 70 100 Q 72.5 40 75 100 Q 77.5 40 80 100 Q 82.5 40 85 100 Q 87.5 40 90 100 Q 92.5 40 95 100 Q 97.5 40 100 100