| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
mubs
Fidèle
Inscrit le: 29 Mai 2006
Messages: 1495
Localisation: Belgique
|
 Posté le: 04 Nov 2006 9:12 Sujet du message: [Inkscape - SVG] similitude, système de calque etc... |
 |
|
Présentation du format SVG
J'aurais du commencer mes tutos par ceci!
Alors comment fonctionne ce standard web malheureusement méconnu?
En fait c'est simple, enfin, pas plus dur que le XHTML, mais beaucoups plus "scalable".
Allez on y va en force avec un petit bout de code tout simple:
| Code: |
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Four separate rectangles
</desc>
<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
<rect x="3cm" y="0.5cm" width="1.5cm" height="2cm"/>
<rect x="3.5cm" y="3cm" width="1cm" height="0.5cm"/>
<!-- Show outline of canvas using 'rect' element -->
<rect x=".01cm" y=".01cm" width="4.98cm" height="3.98cm"
fill="none" stroke="blue" stroke-width=".02cm" />
</svg>
|
Que voit-on dans ce code ? Plein de chose classique d'un langage à balise!
Tout d'abord, une entête:
| Code: |
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> |
Ce bout de code doit commencer tout vos fichiers SVG! C'est l'entête.
Vient ensuite l'élement SVG, que vous dévez fermer bien entendu:
| Code: |
<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg">
</svg> |
C'est ici que l'on défini la taille du fichier que va afficher le navigateur ou le logiciel d'édition. Cette définition de taille peut se faire en cm, mm ou pixels.
Une première remarque en ce qui concerne les logiciels d'édition (tel que inkscape), ceux-ci affichent parfois les élements qui ce trouvent en dehors ce cadre d'affichage qui est symbolisé par par la "feuille".
Cette même feuille correspond donc à ce qui sera affiché dans les navigateurs.
On progresse! Les codes suivant correspondent à une description et un commentaire. Tout les 2 seront non visible dans les navigateurs ou éditeurs. Ils garantissent une accessibilité et une meilleure compréhension du code source, utilisez les à bon escient.
| Code: |
<desc>Descriptif du document SVG (ou d'une partie de celui-ci)</desc>
<!-- Commentaires utiles ou ester eggs ;) --> |
Pour l'instant, nos connaissances ce limite à ceci:
| Code: | <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500px" height="400px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>svg vide
</desc>
<!-- sans commentaire, il faut bien débuter -->
</svg>
|
On va insérer un rectangle orange d'origine (50,50) de largeur 200 px et de hauteur: 100px et couleur orange (code hexadécimale : #FF9900) dans ce fichier à l'aide du code suivant:
| Code: | | <rect x="50px" y="50px" width="200px" height="150px" fill="#FF9900"/> |
| Code: | <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>affiche un rectangle orange
</desc>
<rect x="50px" y="50px" width="200px" height="100px" fill="#FF9900"/>
</svg>
|
Voila ce qui sera affiché dans votre navigateur, tout simple! L'image à droite indique le système de coordonées pour les fichiers SVG
Plus d'info sur ce vaste sujet
Simple, oui mais... Dans Inkscape lorsque l'on dessine, la base du système de coordonée est dans le coin inférieur gauche. Pourquoi? Tout simplement pour faire comme dans la vie réel, l'origine des systèmes d'axes est en générale en bas à gauche (il existe des exceptions notament pour les chimistes comme moi  )
Oui mais inkscape cela crée des documents SVG ==> dans le code SVG de vos illus tout est comme dans le bout code que je vien de vous montrer, avec le même système d'axes. Clair ?
On continue: on va afficher un deuxième élément: un cercle (histoire de varier les plaisirs)
Constat: il s'affiche au dessus ! Dans les fichiers SVG le dernier élément du code s'affiche toujours au dessus de tout les autres. Il faut envisager un fichier SVG comme une superposition de "calque objets" (dans le cas présent : un rectangle et un disque soit 2 "calques éléments").
Intérêt: facile d'agencer vos graphiques. Viens alors le problème suivant, qui concerne surtout les gens qui créent des illus avec des programes tel que Inkscape. Est-ce le même système de calque que dans Gimp ou Photoshop? Pas vraiment...
Tentative d'xplication...
En SVG (comme en vectoriel en générale) chaque objet (élément ou groupe d'éléments) correspond à un calque de programme comme Gimp ou Photoshop. Ce qui signifie en clair que vous ne devez pas loger vos formes (rectangles, cercles, courbes bézier) dans des calques séparés, en fait ils le sont déjà !!
La particularité c'est que le calque dans Inkscape est limité à ce que j'appelle le "calque objet". Ce qui veut dire que le "calque objet" contenant le rectangle ce limite à l'élément rectangle orange.
Le pire c'est cela ce complique encore !! En effet, Dans Inkscape les développeurs ont cru bon de créer un système de calque pour ne pas dépayser les utilisateurs de Gimp, topshop, illustrator...
Cet outils est tout de même bien pratique. Mais personnelement, je ne l'utilise que très rarement.
Son utilité vient du fait que lorsque vous utilisez les calques d'Inkscape vous pouvez en rendre certains invisibles ou insensibles.
C'est très pratique pour les illus avec du texte par exemple, histoire de ne travailler que sur les textes sans devoir faire gaffe à pas bouger les autres élements. Ou encore pour faire passer un groupe d'élement dérière un autre.
Quoique cette dernière opération peut être effectuée en relégant en arrière plan tout les objets que vous souhaitez, un par un ou tous à la fois (sélectionnez vos objets en maintenant la touche SHIFT enfoncée).
Ou bien encore en les groupants (voir tutos smiley (point8) pour voir les boutons à utiliser). Je vois que certain on compris ou je voulais en venir...
Et oui, les calques de Inkscape ne sont que des groupes traité d'une manière particuliere pour faciliter l'utilisation du logiciel et la mise en page!!
Tout devient limpide lorsqu'on fait l'effort de comprendre à quoi tout ceci correspond dans le code des fihiers SVG.
| Code: | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>affiche 2 groupes
- groupe1: un rectangle orange et cercle mauve
- groupe2: 2 cercle rouge
</desc>
<g id="calque_inkscape1">
<rect x="50px" y="50px" width="200px" height="100px" fill="#FF9900"/>
<circle cx="50px" cy="120px" r="40px" fill="#788cf0"/>
</g>
<g id="calque_inkscape2">
<circle cx="140px" cy="100px" r="20px" fill="#CC0000"/>
<circle cx="200px" cy="100px" r="20px" fill="#CC0000"/>
</g>
</svg> |
Dés lors, on comprend ce que fait Inkscape avec "ses" calques: il modifie l'autre des groupes du code SVG ! Ce qui explique poourquoi vous déchanterez si vous souhaitez éditer vos fihier SVG avec Gimp. Dans gimp, les calques Inkscape ne sont pas pris en charge!! Pour gimp les calques d'inkscape comme ils viennent d'être défini (groupe particulier) cela ne veut rien dire. Dans gimp vous aurez tout vos "calques éléments" (un calque pour chaqqe objet, comme défini au par avant  ), qui s'afficheront séparement et conrrespondent à des tarcés à la plume (path)! Et donc des tracé sans couleur de remplissage etc... Vous l'aurez compirs, éditez vous fichier SVG dans inkscape (c'est beaucoup plus simple) ensuite exportez les en bitmap si vous souhaitez les retravailler dans Gimp (voir [url=http://boite-a-pixels.2077.net/s-inkscape-exporter-un-fichier-119824.html]tuto pour exporter en bitmap[tuto])
Les plus téméraires auseront sans doute oser la question suivante: quelle est l'utilité fondamentale de ces groupes?
Réponse simple une fois de plus: les groupes dans le code SVG permettent de définir le style (couleur de remplissage, de contour, épaisseur du contour) de tout les éléments du groupe.
Ils permettent de faire aussi un tas d'autre truc plus fou les uns que les autres (voir source)!
| Code: | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300px" height="200px" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>affiche 1 groupe d'objet ayant tous une couleur rouge, un contour d'une épaisseur 2 px et
de couleur noir.
</desc>
<g id="style identique" fill="#CC0000" stroke-width="3px" stroke="#000000">
<rect x="50px" y="50px" width="200px" height="100px" />
<circle cx="50px" cy="120px" r="40px"/>
<circle cx="140px" cy="100px" r="20px"/>
<circle cx="200px" cy="100px" r="20px"/>
</g>
</svg> |
Voila, je m'arrête ici en vous indiquant ma source: http://www.w3.org/TR/SVG11/ ce site est la Bible du SVG, tout y est ! C'est parfois chiant à lire mais cela aide à comprendre plein de chose !!
_________________
badge insolent des badges de Geeks !! |
|
| Revenir en haut de page |
|
 |
Loira
Administratrice
Team BP
Inscrit le: 13 Nov 2004
Messages: 35568
Localisation: Rhône-Alpes
|
| Posté le: 04 Nov 2006 9:31 Sujet du message: |
|
|
Merci Mubs ! 
A la limite, si on n'a rien de trop compliqué à faire, on pourrait piloter Inkscape en lignes de commande, enfin, un presque équivalent ?
_________________
Merci à Zarumbatus, auteur de mon avatar ! |
|
| Revenir en haut de page |
|
|
mubs
Fidèle
Inscrit le: 29 Mai 2006
Messages: 1495
Localisation: Belgique
|
| Posté le: 04 Nov 2006 9:37 Sujet du message: |
|
|
Tout fait, mais si tu veux faire créer des formes complexes, genre courbe de bézier, vaut mieux les éditer dans Inkscape en ensuite soigner le code en copiant / collant les courbe dans un fichier SVG tout simple édité à partir du bloque note.
En ou en utilsant l'outil dans inkscape qui permet de le faire (bouton a coté du T de l'outil texte (en haut), la mini-feuille avec <> dessus)
_________________
badge insolent des badges de Geeks !! |
|
| Revenir en haut de page |
|
|
Loira
Administratrice
Team BP
Inscrit le: 13 Nov 2004
Messages: 35568
Localisation: Rhône-Alpes
|
| Posté le: 04 Nov 2006 10:55 Sujet du message: |
|
|
Voui, ben je laisse le code aux geeks ! 
_________________
Merci à Zarumbatus, auteur de mon avatar ! |
|
| Revenir en haut de page |
|
|
Sim
Team BP
Inscrit le: 14 Avr 2004
Messages: 7674
Localisation: ->Paris<- Toulouse
|
| Posté le: 04 Nov 2006 12:45 Sujet du message: |
|
|
Wahou, merci pour le tuto !
Pas trop le temps de matter ça maintenant, mais je le garde de côté pour plus tard ! 
_________________
 |
|
| Revenir en haut de page |
|
|
|
|
Vous ne pouvez pas poster de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas voter dans les sondages de ce forum
Vous ne pouvez pas joindre des fichiers
Vous pouvez télécharger des fichiers
|
[ Association 2037.org,
infrastructure & serveur model-fx ] ::
[ phpBB © 2001, 2002 phpBB Group ]
[ Guntar Ze Smiley © ZeCorp. Created by Christophe Soudron ]
|
