Le côté texte du format svg

SVG, c’est un format d’images vectorielles léger et utilisé un peu partout sur le net. En plus de ses qualités pour le web, c’est un format accepté par beaucoup de découpeuses laser.

C’est justement en travaillant avec un collègue sur la préparation des fichiers pour la découpe que j’ai compris qu’il s’agissait d’un format textuel. A vrai dire je n’avais jamais creusé le sujet auparavant. Je prenais pour évident que si tout le monde travaillait le svg avec des interfaces graphiques, c’est que c’était la bonne façon de faire.

Travailler en  interface graphique  sur des fichiers qui sont nativement dans un format de texte pose problème car on ne garde pas la main sur tout ce que le fichier contient. A force de faire du WYSIWYG (what you see is what you get), on peut se leurrer et penser WYSIWAG (what you see is all you get).

SVG n’est pas un format WYSIWAG. Par exemple le texte des trois fichiers SVG suivants qui seront affichés exactement de la même façon laisse voir que l’un de ces trois exemples est très différent des autres.

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="-10 -10 280 250"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red" d="M   0,  0 
C   0,0     0,100   0,100 C   0,100  30,100  30,100 
C  30,100  30,200  30,200 C  30,200  30,230  30,230 
C  30,230 130,230 130,230 C 130,230 130,200 130,200 
C 130,200 230,200 230,200 C 230,200 260,200 260,200 
C 260,200 260,100 260,100 C 260,100 230,100 230,100 
C 230,100 230, 0 230, 0 z"/></svg>

Chemin absolu en SVG

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "h
ttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="-10 -10 280 250"
xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="red" d=  "M   0,  0 
c 0,0   0, 100   0, 100 c 0,0  30,  0  30,  0 
c 0,0   0, 100   0, 100 c 0,0   0, 30   0, 30 
c 0,0 100,   0 100,   0 c 0,0   0,-30   0,-30 
c 0,0 100,   0 100,   0 c 0,0  30,  0  30,  0 
c 0,0   0,-100   0,-100 c 0,0 -30,  0 -30,  0 
c 0,0   0,-100   0,-100 z" />
</svg>

Chemin relatif en SVG

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "h
ttp://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" viewBox="-10 -10 280 250"
xmlns="http://www.w3.org/2000/svg">
  <polyline fill="none" stroke="red"
            points="  0,  0 
                      0,100  30,100 
                     30,200  30,230 
                    130,230 130,200 
                    230,200 260,200 
                    260,100 230,100 
                    230,  0   0,  0" />
</svg>

Polyligne au format SVG

En effet la figure dans polyline.svg est faite de « vrais » segments de droite, alors que dans les deux autres exemples les pièces dont la figure est construite sont des splines. On a tout fait pour que ces splines aillent tout droit, du coup l’image obtenu a la même tête dans les trois exemples. Mais moralement ce n’EST pas la même image.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s