SVG : Scalable Vector Graphics

Le SVG (graphique vectoriel adaptable) est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML.

Les images vectorielles peuvent être agrandies à l’infini sans pixellisation contrairement aux images matricielles

Pour tout savoir sur le SVG, consulter le site http://svground.fr/

Carré

<svg height="200" width="400" style="border:1px dashed #000"> 
  <rect x="25px" y="25px" width="150" height="100"/>
  <rect x="200px" y="75px" width="150" height="100"/>
</svg>

Ligne

<svg height="200" width="400" style="border:1px dashed #000">
  <path d="M 100,180 L 140,0 L 180,180 L 220,0 L 260,180 L 300,0 L 330,180" style="fill:none; stroke:black"/>
</svg>

Contruction de plusieurs lignes 

<svg height="800" width="800" style="border:1px dashed #000">
<?php
  for ($i=0;$i<800;$i+=10) {
    echo '<line x1="'.$i.'" y1="0" x2="0" y2="'.(800-$i).'" stroke="black" stroke-width="1" />' ;
    echo '<line x1="'.$i.'" y1="800" x2="800" y2="'.(800-$i).'" stroke="black" stroke-width="1" />' ;
  }
?>
</svg>

Cercles

<svg height="200" width="400" style="border:1px dashed #000">
  <circle cx="100" cy="100" r="80" stroke="#4b6c0b" fill="#9dcc41" />
  <circle cx="150" cy="100" r="80" stroke="#ff6000" fill="orange" fill-opacity="0.5" />
  <circle cx="300" cy="100" r="40" stroke="#4b6c0b" stroke-width="20" fill="transparent" stroke-opacity="0.5" />
  <circle cx="340" cy="100" r="40" stroke="#4b6c0b" stroke-width="20" fill="transparent" stroke-opacity="0.5" />
</svg>

Animations

<svg height="200" width="400" style="border:1px dashed #000">
  <rect width="100" height="50">
    <animate attributeName="width" attributeType="XML"
             fill="freeze" from="0" to="300"
             begin="0s" dur="3s" />
  </rect>
</svg>

Dessins

<svg height="200" width="400" style="border:1px dashed #000">
                              
  <defs>
  <g id="tete">
  <circle cx="40" cy="30" r="40" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;" />
  <rect width="100" height="75" x="-10" y="-20" style="fill:#F4F4F4"/>
  <circle cx="40" cy="30" r="50" style="stroke:black; stroke-width: 1px;fill: none;" />
  <circle cx="20" cy="20" r="20" />
  <circle cx="60" cy="20" r="15" />
  <circle cx="35" cy="20" r="5" style="fill:white"/>
  <circle cx="50" cy="20" r="4" style="fill:white" />
  </g>
  </defs>
 
  <use xlink:href="#tete" x="0" y="30" />
  <use xlink:href="#tete" x="0" y="140" />
  <use xlink:href="#tete" x="-100" y="80" />
  <use xlink:href="#tete" x="100" y="80" />

  </svg>

                            
  <svg height="200" width="400" style="border:1px dashed #000">
 
  <rect x="15" y="0" width="80" height="200" rx="20" ry="40" style="fill:black;"/>
  
  <circle id="rouge_circle" cx="55" cy="40" r="25" style="stroke:black; stroke-width: 1px;fill:#F4F4F4;">
  <animateColor attributeName="fill" attributeType="CSS" id="rect1" repeatDur="3" from="green" to="yellow" begin="3s" dur="3s"/>
  </circle>
  
  <circle cx="55" cy="100" r="25" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;" >
  <animateColor attributeName="fill" id="rect2" repeatDur="3" from="yellow" to="orange" begin="rect1.end" dur="3s"/>
  </circle>
  
  <circle cx="55" cy="160" r="25" style="stroke:black; stroke-width: 1px;fill: #F4F4F4;" >
  <animateColor attributeName="fill" id="rect3" repeatDur="3" from="orange" to="red" begin="rect2.end" dur="3s"/>
  </circle>
  
  </svg>