HTML5 - CSS 2.x/3
PHP / MySQL
FORTH ...

Les images de type SVG

Le format SVG est un format graphique qui existe depuis 1999. SVG signifie Scalable Vector Graphic. Une image de type SVG n'est pas constituée de points mais sous forme d'un fichier qui décrit la structure de cette image au travers d'un fichier XML.

Sur Wikipedia: quelques explications sur ce format SVG.

Votre première image au format SVG

Les images SVG sont très utiles si vous avez des dessins techniques, schémas, logos, plans, etc... à afficher sans perte de qualité.

Exemple: plan d'une piscine:

Pour voir ce plan à l'échelle 1, faire:

Une fois arrivé sur l'image, vous pouvez faire:

Et là, vous avez le code source du plan de la piscine:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1046.34mm" height="565.15mm"
     viewBox="0 0 2966 1602"
     xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink"  
         version="1.2" baseProfile="tiny">
    <title>Qt SVG Document</title>
    <desc>Generated with Qt</desc>
    <defs>
    </defs>
    <g fill="none" stroke="black" stroke-width="1" fill-rule="evenodd" 
        stroke-linecap="square" stroke-linejoin="bevel" >
 
        <g fill="#ffffff" fill-opacity="1" stroke="none" 
            transform="matrix(1,0,0,1,0,0)"
           font-family="MS Shell Dlg 2" font-size="8.25" font-weight="400" 
               font-style="normal">
            <path vector-effect="none" fill-rule="evenodd" 
                d="M0,0 L2966,0 L2966,1602 L0,1602 L0,0"/>
        </g>
        <!-- partie de code supprimée car trop longue... -->
        <g fill="none" stroke="#0000ff" stroke-opacity="1" stroke-width="1" 
            stroke-linecap="round" stroke-linejoin="round" 
                transform="matrix(1,0,0,1,0,0)"
           font-family="MS Shell Dlg 2" font-size="8.25" 
               font-weight="400" font-style="normal" >
            <polyline fill="none" 
                vector-effect="non-scaling-stroke" points="614,682 614,683 " />
            <polyline fill="none" 
                vector-effect="non-scaling-stroke" points="614,683 613,683 " />
            <polyline fill="none" 
                vector-effect="non-scaling-stroke" points="577,695 589,685 " />
            <polyline fill="none" 
                vector-effect="non-scaling-stroke" points="589,685 614,685 " />
        </g>
 
        <g fill="#0000ff" fill-opacity="1" stroke="#0000ff" stroke-opacity="1" 
            stroke-width="1" stroke-linecap="round" stroke-linejoin="round" 
                transform="matrix(1,0,0,1,0,0)"
           font-family="MS Shell Dlg 2" font-size="8.25" font-weight="400" 
               font-style="normal" >
            <path vector-effect="non-scaling-stroke" fill-rule="evenodd" 
                d="M577,695 L580,691 L581,692 L577,695"/>
        </g>
    </g>
</svg>

Voici le code HTML qui nous a permis d'intégrer le plan de cette piscine dans cette page web:

<img src='articles/images/images/svg/typeSvg/planPiscine.svg'
     style='max-width: 100%;'/>

Les outils pour créer et gérer les images SVG

Le plan de cette piscine a été réalisé à l'aide du logiciel LibreCAD.

Il existe beaucoup d'outils graphiques capables de générer et gérer mes images au format SVG. EN voici une petite sélection:

Les avantages du format d'images SVG

Voici une autre image au format SVG:

Compacité des images SVG

Cette image, en taille de fichier au format SVG, ne pèse que 9Ko, alors que la même image au format PNG pèse plus de 70 Ko!

Quand il s'agit d'illustrations et dessins au trait d'images de grande taille, le format d'images SVG offre une compacité sans égale!

La compacité est donc le premier avantage des images au format SVG.

Conservation de la qualité

L'autre avantage, concernant les images de type SVG est la conservation de la qualité à n'importe quelle échelle. Ici, deux cercles, un au format SVG, l'autre au format JPG:

A priori, vous ne voyez gueère de différence entre ces deux images. Maintenant, agrandissons-les considérablement:

A gauche, notre image au format SVG présente un lissé impeccable, ce qui est loin d'être le cas pour notre image de droite au format JPG.

Des images animées

Enfin, le point fort du format d'images SVG, c'est que les composants d'une image peuvent être manipulés au travers de feuilles de style CSS ou de code Javascript. Ici, une horloge qui affichera l'heure:

Note: le fichier source de cette image au format SVG embarque son propre code Javascript et pèse, en taille fichier, seulement 3 Ko!

Nous avons intégré cette image comme suit dans cette page:

<img src='articles/images/images/svg/typeSvg/horlogeSvg.svg'
     style='width: 50%;'/>

L'inconvénient est que, avec l'intégration de l'image au format SVG au travers de l'élément img, nous ne bénéficions pas de l'interactivité complète du code Javascript embarqué.

Intégration directe au travers de include

Comme les images au format SVG sont en réalité du code XML, il est possible d'inclure ces images directement avec une instruction PHP include:

Là, nous avons une horloge à l'heure. Et voici comment nous l'avons intégrée à cette page web:

<?php include APP_ROOT . '/articles/images/images/svg/typeSvg/horlogeSvg.svg'; ?>

Utiliser le format SVG maintenant

Seuls les navigateurs web complètement obsolètes ne gèrent pas correctement la restitution des images au format SVG.