Le SVG

Le SVG - XML/XSL - Programmation

Marsh Posté le 09-06-2003 à 20:24:43    

Bon je me lance pour un topic consacré au SVG (=Scalable Vector Graphics) :  
Merveilleux langage basé sur le XML permettant de réaliser du graphisme (images interactive, animations, representations graphiques dynamiques...) pour vos pages Web en vectoriel, on le compare souvent à Flash mais je n?ai pas envie de lancer un troll ici, c?est pas le but?
Alors je vais étoffer ce topic au fur et à mesure de mes connaissances mais comme en ce moment je suis plongé dedans, j?en fais profiter tout le monde.
 
1- Pour commencer le plus simple est d?avoir un Reader permettant « d?interpréter » le SVG, personnellement j?ai le Reader d?Adobe :
http://www.adobe.com/svg/viewer/install/main.html
 
mais il y a également celui de Corel :
http://www.corel.com/svgviewer
 
2- Les spécifications W3C, car l?intérêt de SVG est aussi d?être W3C compliant puisque issu du XML :
http://www.w3.org/TR/SVG/
 
Les News de SVG sur le site du W3C:
http://www.w3.org/Graphics/SVG/Overview.htm8
 
Explorer le SVG (tres tres bon site):
http://www.svgx.org/
 
3- J?ai attendu le point 3 pour aborder un problème sensible, la compatibilité des browsers, Internet Explorer étant largement favorisé pour l?instant (Microsoft ayant aidé à la création du langage), les readers vous permettront donc de lire le SVG avec IE seulement, il y a un projet sur Mozilla :
http://www.mozilla.org/projects/svg/
mais ce n?est pas encore concluant (affaire à suivre étant fidèle à Mozilla)
 
4- Apprendre, les bons sites :
http://www.xml.com/pub/a/2001/03/21/svg.html(anglais)
http://pilat.free.fr/ (en français)
http://www.learnsvg.com/(anglais)
http://www.xml.com/graphics/
http://www.adobe.com/svg/ (anglais)
http://www.allhtml.com/svg/index.php (c?est pas que le site est bien mais c?est en français et pour débuter c?est pas mal)
 
 
5-Les editeurs :
On peut utiliser deux types de logiciels.Personnellement j?utilise un Editeur de texte simple (avec un template XML pour la coloration ça suffit amplement et on comprend ce qu?on fait )
mais on peut aussi utiliser des logiciels comme Illustrator ou certains produits Corel.

Une bonne liste sur le site du w3c:


6-Les outils de transformations
On peut transformer toutes sortes de formats en SVG: reference encore au site du w3c:


7-Section Java (bah je travaille avec alors j'ai quelques liens specifiques à java)

N?hesitez pas à me fournir vos liens, j?apprend aussi en ce moment alors j?en manque surement pleins?


Message édité par uriel le 27-06-2003 à 05:24:19

---------------
IVG en france
Reply

Marsh Posté le 09-06-2003 à 20:24:43   

Reply

Marsh Posté le 09-06-2003 à 22:38:18    

j'ai trouvé un bug dans le reader d'abode, j'etions tres content [:ddr555]
 
edit sinon faire du SVG a la main c quand meme un peu relou, faut dire ce qui est


Message édité par chrisbk le 09-06-2003 à 22:39:15
Reply

Marsh Posté le 09-06-2003 à 22:58:42    

chrisbk a écrit :

j'ai trouvé un bug dans le reader d'abode, j'etions tres content [:ddr555]
 
edit sinon faire du SVG a la main c quand meme un peu relou, faut dire ce qui est


bah tout depend de ce que tu veux faire  [:spamafote] , perso pour ce que je fais, je trouve ça plus pratique (communiquer avec une BDD et faire le SVG à la volée)
 
et c'est quoi ce bug dont tu parles?
moi c'est le reader de Corel qui à merdé  :sweat:


---------------
IVG en france
Reply

Marsh Posté le 09-06-2003 à 23:00:13    

uriel a écrit :


et c'est quoi ce bug dont tu parles?
moi c'est le reader de Corel qui à merdé  :sweat:  


 
rien de bien grave, juste une ligne parasite qui apparait sous un certain angle /zoom (et que j'ai pas, moi. donc soit c moi qui bug, soit c eux, mais vu que chez moi c plus beau :ange:)


Message édité par chrisbk le 09-06-2003 à 23:00:23
Reply

Marsh Posté le 09-06-2003 à 23:02:54    

bonne idée de tomik ..... ;)  
Le SVG est peu connu. Serait-il possible d'avoir un morceau de code pour que l'on voit a quoi ca ressemble ?
merci  :hello:


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 09-06-2003 à 23:10:11    

Code :
  1. <?xml version="1.0" standalone="no"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  
  3.   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg width="12cm" height="4cm" viewBox="0 0 1200 400"
  5. version="1.1">
  6.   <desc>Example rect01 - rectangle with sharp corners</desc>
  7.   <rect x="1" y="1" width="1198" height="398"
  8.         fill="none" stroke="blue" stroke-width="2"/>
  9.   <rect x="400" y="100" width="400" height="200"
  10.         fill="yellow" stroke="navy" stroke-width="10"  />
  11. </svg>


 
l'interessant c le rect="..." le reste c du blabla


Message édité par chrisbk le 09-06-2003 à 23:10:40
Reply

Marsh Posté le 09-06-2003 à 23:15:00    

ô le beau rectangle jaune  :D  
 
mon premier SVG avec le tuto du livre "SVG Programming: The Graphical Web" de Kurt Cagle (un ancien de chez Macromedia, tiens tiens [:meganne])
 


<svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="300" height="400" viewBox="0 0 300 400"
 preserveAspectRatio="none">
 <desc>Stop Sign 1</desc>
 <rect x="0" y="0" width="300" height="400"
  fill="black" id="background"/>
 <g transform="translate(150,150)">
  <rect x="-10" y="0" width="20" height="250"
   fill="gray" id="pole"/>
  <path id="signShape"
   d="m0,-100 l40,0 l60,60 l0,80 l-60,60 l-80,0 l-60,-60 l0,-80 l60,-60z"/>
  <use xlink:href="#signShape" x="0" y="0"
   fill="white" id="signWhite"/>
  <use xlink:href="#signShape" x="0" y="0" fill="red"
   transform="scale(0.95)" id="signRed"/>
  <text x="0" y="0"
   font-size="72"
   font-family="Arial Narrow"
   fill="white"
   text-anchor="middle"
   dominant-baseline="mathematical">
  STOP
  </text>
 </g>
</svg>

 
chrisbk: à quoi serves tes 2 premieres lignes?
 
edit: tout ça pour dessiner quoi: un panneau STOP  :sweat:


Message édité par uriel le 09-06-2003 à 23:19:44

---------------
IVG en france
Reply

Marsh Posté le 09-06-2003 à 23:16:37    

uriel : aucune idée, c'est du CC du site au w3c [:ddr555]

Reply

Marsh Posté le 09-06-2003 à 23:20:25    

merci pour les exemples   :)  
ca represente quoi ton code uriel ?  
existe t'il des editeurs SVG gratuits et performants ?
pourquoi ne pas poster vos liens pour les futurs utilisateurs  :whistle:


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 09-06-2003 à 23:24:08    

chrisbk a écrit :

uriel : aucune idée, c'est du CC du site au w3c [:ddr555]


au risque de dire une connerie c'est les declaration de document xml et la dtd w3c du format SVG (afin que le navigateur le reconnaisse)


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 09-06-2003 à 23:24:08   

Reply

Marsh Posté le 09-06-2003 à 23:24:22    

simogeo a écrit :

merci pour les exemples   :)  
ca represente quoi ton code uriel ?  
existe t'il des editeurs SVG gratuits et performants ?
pourquoi ne pas poster vos liens pour les futurs utilisateurs  :whistle:  


le code ci dessus c'est un panneau stop, pas d'animation...
un lien vers un autre topic fais sur graphisme il y a peu:
Cliquez ici
pour les editeurs, un bloc note suffit mais perso j'utilise un editeur qui fait le XML (pour la coloration).
en IDE gratuit, je sais pas franchement  [:spamafote]  


---------------
IVG en france
Reply

Marsh Posté le 09-06-2003 à 23:26:04    

uriel a écrit :


un lien vers un autre topic fais sur graphisme il y a peu:
Cliquez ici


IWH  [:volta]
d'ailleurs il y'avait toute la section prog : zion, chrisbk, kadreg ....[:wam]


Message édité par simogeo le 09-06-2003 à 23:48:49

---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 10-06-2003 à 00:12:50    

comment j'ai pu oublier ça, je l'utilise en ce moment:
 
http://xml.apache.org/batik/
 
c'est un toolkit en java [:tonton_benou] pour les appli ou servlet utilisant les images SVG, pratique pour les generer, les manipuler ou juste les regarder


Message édité par uriel le 10-06-2003 à 00:16:30

---------------
IVG en france
Reply

Marsh Posté le 10-06-2003 à 01:31:36    

tres bon topic

Reply

Marsh Posté le 10-06-2003 à 01:32:27    

euh (pas taper), concretement c'est quoi l'avantage par rapport à du bitmap?
je veux dire: donnez moi des exemples concrets d'utilisation ou ça present un avantage net :)


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 10-06-2003 à 01:34:49    

the real moins moins a écrit :

euh (pas taper), concretement c'est quoi l'avantage par rapport à du bitmap?
je veux dire: donnez moi des exemples concrets d'utilisation ou ça present un avantage net :)


pt'et parce que c'est dynamique déjà  :sarcastic:


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 10-06-2003 à 01:38:19    

  • c'est W3C compliant [:ddr555]
  • c'est dynamique (plusseoiment de simogeo) au sens mouvement (avec le javascript ou le SMIL) ou au sens relation avec une base de données (toujours avec les mêmes techniques)
  • c'est du vectoriel (pas le bitmap? :heink: )
  • etc...  :sweat:


edit: à la rigueur compare le au Flash mais au bitmap [:spamafote]


Message édité par uriel le 10-06-2003 à 01:39:03

---------------
IVG en france
Reply

Marsh Posté le 10-06-2003 à 01:54:00    

je trolle pas hein, c'est juste pour avoir une image claire du machin :)
 
* je peux generer du flash (avec ming) ou des bitmaps (avec plein de trucs) assez facilement, y'a plein de bonnes api qui trainent pour ça ...
 
* est-ce qu'une image un tant soit peu complexe sera reellement plus legere en svg (avec toutes les "fioritures" dues à l'xml) plutot qu'en bitmap ?
 
* le vectoriel peut m'apporter la possibilité de zoomer... ok mais si on parle de cartes routières par exemple (le seul exemple qui me vient là ou zoomer pourrait etre utile), le fichier svg serait plus qu'enormissime à loader non? a moins qu'un mecanisme soit prévu pour qu'il y ait plusieurs fichiers selon le niveau de zoom?


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 10-06-2003 à 02:01:39    

the real moins moins a écrit :

je trolle pas hein, c'est juste pour avoir une image claire du machin :)
 
* je peux generer du flash (avec ming) ou des bitmaps (avec plein de trucs) assez facilement, y'a plein de bonnes api qui trainent pour ça ...


 
c'est justement a ça qu'on doit l'arrivée du SVG je pense  :D  
il fallait bien qu'adobe se place avec un format graphique dynamique pour le web
 

the real moins moins a écrit :


* le vectoriel peut m'apporter la possibilité de zoomer... ok mais si on parle de cartes routières par exemple (le seul exemple qui me vient là ou zoomer pourrait etre utile), le fichier svg serait plus qu'enormissime à loader non? a moins qu'un mecanisme soit prévu pour qu'il y ait plusieurs fichiers selon le niveau de zoom?


 
c'est notamment le cas des cartes mappy (avec flash) et la lourdeur est supportable.
zoomé ou pas le fichier n'est pas plus lourd [:spamafote]


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 10-06-2003 à 02:11:37    

c'est justement un des premiers trucs de SVG la géographie, carte routière, geologique, etc... tu as pas besoin de loader toute la carte, tu load seulement la partie ou l'utilisateur zoom, donc ça reste leger...
 
en plus, perso j'utilise java et Batik me permet de génerer le SVG assez facilement (en plus y a un plugin Batik sur eclipse :) )


---------------
IVG en france
Reply

Marsh Posté le 10-06-2003 à 02:21:38    

uriel a écrit :


(en plus y a un plugin Batik sur eclipse :) )


c'est quoi eclipe ?  :whistle:


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 10-06-2003 à 02:27:37    

simogeo a écrit :


c'est quoi eclipe ?  :whistle:  


 
un IDE pour java surtout et d'autre trucs maintenant  :)  
lien dans la FAQ java


---------------
IVG en france
Reply

Marsh Posté le 10-06-2003 à 02:48:39    

uriel a écrit :

c'est justement un des premiers trucs de SVG la géographie, carte routière, geologique, etc... tu as pas besoin de loader toute la carte, tu load seulement la partie ou l'utilisateur zoom, donc ça reste leger...
 
en plus, perso j'utilise java et Batik me permet de génerer le SVG assez facilement (en plus y a un plugin Batik sur eclipse :) )

hmm et comment ça fonctionne le zoom comme tu le décrit? c'est donc pas un zoom "animé" !?
 
et sinon, prout je vais finir par utiliser eclipse ou quoi :/ pourtant intellij-idea c'est mieux :sweat:
(en plus y'a une api open pour les plugins...)


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 10-06-2003 à 02:50:51    

ha, excellent, batik propose une implementation de graphics2D pour faire du svg!? :)


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 10-06-2003 à 02:56:06    

:) eclipse c'est bien  
 :) Batik c'est bien  
 
image SVG
 
tu fais le zoom soit avec CTRL+clic soit en clique droit zoom, tu peux deplacer l'objet en faisant ALT+souris aussi mais pas en dehors du cadre
 
edit: pour le zoom, tu peux aussi créer des boutons de zoom


Message édité par uriel le 10-06-2003 à 03:25:22

---------------
IVG en france
Reply

Marsh Posté le 10-06-2003 à 03:10:27    

:)


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 10-06-2003 à 10:52:10    

Les meilleurs tutoriaux d'SVG :
 
sur le site d'IBM (qui a pas l'air de marcher en ce moment):  
http://www-105.ibm.com/developerwo [...] &Count=500
 
Et la partie SVG d'XML.com :
http://www.xml.com/graphics/
 
Un très bon outil d'édition SVG (y a plus qu'à récupérer le code pour faire des transformations XSLT) :
 
Jasc WebDraw
 
en trial download ici : http://www.jasc.com/products/webdraw/


Message édité par chocoboy le 10-06-2003 à 11:07:56
Reply

Marsh Posté le 10-06-2003 à 11:25:25    

the real moins moins a écrit :

je trolle pas hein, c'est juste pour avoir une image claire du machin :)
 
* je peux generer du flash (avec ming) ou des bitmaps (avec plein de trucs) assez facilement, y'a plein de bonnes api qui trainent pour ça ...
 
* est-ce qu'une image un tant soit peu complexe sera reellement plus legere en svg (avec toutes les "fioritures" dues à l'xml) plutot qu'en bitmap ?
 
* le vectoriel peut m'apporter la possibilité de zoomer... ok mais si on parle de cartes routières par exemple (le seul exemple qui me vient là ou zoomer pourrait etre utile), le fichier svg serait plus qu'enormissime à loader non? a moins qu'un mecanisme soit prévu pour qu'il y ait plusieurs fichiers selon le niveau de zoom?
 


Le svg, comme tout autre format graphique XML d' ailleurs, peut t'apporter d'avoir des liens vivants entre des elements graphiques, et des elements textuels, tout en respectant les mecanismes XML et en n' ajoutant pas de couche proprietaire.
 
Exemple d'utilisation:
Un catalogue de pieces pour un moteur. tu peux faire un lien direct entre un descriptif de piece et la piece dans une image SVG du moteur par exemple. Et si tu retravailles l'image (ajout d'autre pieces, deplacement de la piece...) avec un editeur SVG, ton lien restera valable (sauf suppression de la piece dans l' image).
Un petit filtre pourra aisement t'indiquer les incoherences entre ton catalogue et les pieces figurant dans le dessin du moteur (but de lien sans source correspondant et reciproquement...)
etc etc.
Je ne m'etendrai pas plus longuement sur la question, mais il y a plein d'avantages a faire du vectoriel structuré.
A+,


---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 10-06-2003 à 12:12:38    

Reply

Marsh Posté le 10-06-2003 à 14:12:15    

zion a écrit :

A propos, on a déjà un peu discuté de quelques trucs sur le SVG sur graphisme (ou ils sont pas très réceptifs :o)
 
http://forum.hardware.fr/forum2.ph [...] 854&cat=12


 
deja posté par uriel dans ce topic meme, faut suivre, ban et tout ca :O

Reply

Marsh Posté le 10-06-2003 à 17:38:15    

merci chocoboy  :jap: et les autres, j'ajoutes les liens en 1er post  :jap:


---------------
IVG en france
Reply

Marsh Posté le 27-06-2003 à 01:03:36    

Je débute en SVG et franchement, ça m'enthousiasme vraiment!
 
Pour l'instant je fais surtout de la bidouille histoire de découvrir les bases... Genre: génération de fractals avec de petits scripts Perl tout cons...
 
Combiné à des choses comme XSL ou XSL-FO, il y a moyen d'obtenir des applis terribles (génération de documents pdf illustrés à partir d'une base de données, animations web interactives...).
 
En tout cas, moi ça m'éclate de faire mes petits dessins avec un simple éditeur de texte!
 
 
Sinon, j'ai déjà fait quelques essais intéressants avec "The Gimp": je trace un contour avec la "plume", j'exporte le tracé, je mouline avec un petit script Perl et j'obtiens mon contour en SVG... (Vous vous en foutez peut-être de ma vie, non? :sweat: )
 
Un seul regret: pour l'instant, je suis obligé d'utiliser Windows pour faire du SVG... Quelqu'un connaîterait-il un viewer potable sous Linux?

Reply

Marsh Posté le 27-06-2003 à 01:11:26    

Toucouch a écrit :

Sinon, j'ai déjà fait quelques essais intéressants avec "The Gimp": je trace un contour avec la "plume", j'exporte le tracé, je mouline avec un petit script Perl et j'obtiens mon contour en SVG...  

tu m'interesses là!
y'a moyen de voir? (genre l'original sauvé en png par exemple et le meme en svg?)


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 27-06-2003 à 01:41:08    

arf, j'avais perdu mon drapo ici  :(  
resultat je voyais pas qu'il y avait de nouvelles reponses  :fou:  
 
bon j'ai plein de nouveaux liens moa  :) vais ajouter ça demain ou plus tard  
 
re[:drapo]


---------------
IVG en france
Reply

Marsh Posté le 27-06-2003 à 01:44:18    

uriel a écrit :

arf, j'avais perdu mon drapo ici  :(  

moi aussi :/
joce :fou:


---------------
Hey toi, tu veux acheter des minifigurines Lego, non ?
Reply

Marsh Posté le 27-06-2003 à 02:05:38    


 
bourdaille :fou: , c'est encore un de ces trucs horribles sans fond à la gimp... à chaque fois, je suis tout perdu moa avec ça  :sweat:  
 
mais il est pas mal sinon  :D


---------------
IVG en france
Reply

Marsh Posté le 23-08-2003 à 14:39:53    

[:blueflag] :jap:


Message édité par darklord le 23-08-2003 à 14:39:59

---------------
Just because you feel good does not make you right
Reply

Marsh Posté le 23-08-2003 à 15:18:27    

uriel a écrit :


 
bourdaille :fou: , c'est encore un de ces trucs horribles sans fond à la gimp... à chaque fois, je suis tout perdu moa avec ça  :sweat:  
 
mais il est pas mal sinon  :D  


 
Sinon, personne n'a essayé Jasc Webdraw ? Ca aide franchement beaucoup pour générer du SVG, y a plus qu'à retoucher les parties qu'on souhaite voir dynamique...

Reply

Marsh Posté le 19-09-2003 à 09:08:49    

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed