SVG Classes

06/03/2024 - 15:52:52

ATTENTION: cette page est en construction!

Pour mes besoins professionnels, j'ai développé plusieurs classes consacrée's aux SVGs en PHP : des classes de primitives (dessiner une ligne, dessiner un rectangle, un cercle, un polygone, etc.), des classes d'icônes (info, clipboard, téléchargement, croissant de lune, une boîte d'emballage, une fleur, etc.), des formes complexes (des blades de serveur, un serveur, un cône, une flèche, une croix, un signe "attention", jalon (milestone), un sign "Not OK", un losange, …) et, plus ambitieux, un ensemble de graphiques business (camembert, radar, burndown, bulles, …)

Quel est le lien entre TRQL Radio et des classes SVG ?

Tout d'abord, TRQL Radio est une radio web qui n'est QUE du code informatique.

Par exemple, pour développer le Media Player, j'avais besoin d'icônes. Ces icônes ont été, au moins partiellement, construites grâce aux classes SVG.

Par exemple, toujours pour le Media Player, j'avais besoin de créer une onde d'amplitude de volume. C'est grâce aux classes SVG que cela a été réalisé.

Par exemple, j'ai besoin d'illustrer le catalogue de TRQL Radio par genre de musique. De nouveau, c'est grâce à un graphique de type camembert, classe SVG, que le graphique est en train d'être réalisé.

Par exemple, j'avais besoin de construire une montre analogique thématique pour TRQL Radio et d'autres radios. C'est grâce à toutes les primitives SVG que cela a été réalisé.

En conclusion : tout ce travail est rendu libre de droits pour la communauté des développeurs qui voudraient s'en emparer car TRQL Radio est dans le partage.

SVG Primitives

Les primitives permettent de créer des objets SVG de base : des lignes, des rectangles, des cercles, des ellipses, des polygones, etc.

Point (SVGPoint)

SVGPoint n'a pas de représentation visuelle ! Il s'agit d'une primitive utilisée par les autres primitives pour conceptualiser un point comme, par exemple, la série de points constituant un polygone que verrons comme exemple de l'utilisation de SVGPoint.

Line (SVGLine)

$SVG            = new SVG();

$line           = new SVGLine();
$line->x1       = 0;
$line->y1       = 0;
$line->x2       = 250;
$line->y2       = 100;
$line->stroke   = 'red';

$SVG->add( $line );

echo "<svg id=\"theSVG\" 
    width=\"250\" height=\"100\" 
    xmlns=\"http://www.w3.org/2000/svg\">\n";
    echo $SVG;
echo "</svg>\n";

Rectangle (SVGRect)

$SVG                = new SVG();

$rect               = new SVGRect();
$rect->x            = 0;
$rect->y            = 0;
$rect->w            = 250;
$rect->h            = 100;
$rect->stroke       = 'white';
$rect->strokeWidth  = 3;
$rect->fill         = 'red';

$SVG->add( $rect );

echo "<svg id=\"theSVG\" 
     width=\"250\" height=\"100\" 
     xmlns=\"http://www.w3.org/2000/svg\">\n";
    echo $SVG;
echo "</svg>\n";

Cercle (SVGCircle)

$SVG                    = new SVG();

$circle                 = new SVGCircle();
$circle->x              = 125;
$circle->y              = 50;
$circle->r              = 40;
$circle->stroke         = 'white';
$circle->strokeWidth    = 3;
$circle->fill           = 'red';

$SVG->add( $circle );

echo "<svg id=\"theSVG\" 
     width=\"250\" height=\"100\" 
     xmlns=\"http://www.w3.org/2000/svg\">\n";
    echo $SVG;
echo "</svg>\n";

Polygone (SVGPolygon)

$SVG                  = new SVG();

$poly                 = new SVGPolygon();
$poly->stroke         = 'white';
$poly->strokeWidth    = 4;
$poly->fill           = 'red';

$point                = new SVGPoint();
$point->x             = 2;
$point->y             = 2;
$poly->points[]       = (array) $point;

$point                = clone $point;
$point->x             = 248;
$poly->points[]       = (array) $point;

$point                = clone $point;
$point->y             = 98;
$poly->points[]       = (array) $point;

$SVG->add( $poly);

echo "<svg id=\"theSVG\" 
     width=\"250\" height=\"100\" 
     xmlns=\"http://www.w3.org/2000/svg\">\n";
    echo $SVG;
echo "</svg>\n";

Plus de primitives vont être documentées petit à petit

SVG Icons

Il est parfois difficile de faire la différence entre une icône et une forme (shape). J'avoue, en outre, ne pas avoir apporté un soin pointilleux sur la dichotomie entre les deux (icônes et formes). Une séparation nette est en cours.

Nous n'avons pas encore d'exemple à vous fournir ici. Sachez néanmoins que toutes les classes SVG Icons sont construites sur base des primitives.

SVG Shapes

Les formes (shapes) sont des constructions qui peuvent s'avérer complexes. Elles peuvent être utilisées de manière indépendante comme être appelées dans la construction de formes encore plus complexes, comme les graphiques business par exemple.

Pie Slice (SVGSliceShape)

$SVG                = new SVG();

$slice              = new SVGSliceShape();
$slice->x           = 210;
$slice->y           = 210;
$slice->r           = 200;
$slice->fill        = '#005C53';
$slice->stroke      = 'none';
$slice->startAngle  = -90;
$slice->angle       = 45;


$SVG->add( $slice );

$slice              = clone $slice;
$slice->fill        = '#9fc131';
$slice->startAngle  = $slice->startAngle + $slice->angle;

$SVG->add( $slice );

$slice              = clone $slice;
$slice->fill        = '#dbf227';
$slice->startAngle  = $slice->startAngle + $slice->angle;
$slice->angle       = 10;

$SVG->add( $slice );

$slice              = clone $slice;
$slice->fill        = '#d6d58e';
$slice->startAngle  = $slice->startAngle + $slice->angle;
$slice->angle       = 30;

$SVG->add( $slice );

echo "<svg id=\"theSVG\" width=\"800\" height=\"800\" xmlns=\"http://www.w3.org/2000/svg\">\n";
    echo $SVG;
echo "</svg>\n";
Telegram icon