Visualisation d'une image SVG par Opera

Bonjour,

Je me demande comment inclure une image SVG dans une page HTML et changer l'échelle de l'image

Si je fais:

<object data="circle1.svg" type="image/svg+xml"></object>

Ok, ça marche, mais maintenant si je veux dilater/contracter cette image j'essaie:

<object data="circle1.svg" width="200" height="200"  type="image/svg+xml"></object>

Simplement ça ne change pas l'échelle de l'image, mais ça tronque ou étend l'image.

Tout début de réponse est le bien venu...

ton " width="200" height="200"" me fait penser à PAINT fonction 'attribut' qui réduit le cadre de vision mais non la proportion.
Bon je n'y connais pas grand chose mais je me demande si tu ne dois pas réaliser plusieurs echelles par SVG
32x32 + 64x64 + 128x128 + 256x256 etc..etc... Ou juste l'echelle que tu veux vraiment affiché mais en cas de zoom de ta page je pense que ta SVG ne zoomera pas ?
ensuite mettre le code HTML adéquat ??? mais la je suis largué désolé!

En fait le code que tu utilises n'insert pas une image mais un plugin, c'est comme si tu insérais du flash. Donc dans ce cas là, la taille que tu passes en paramètre c'est comme une taille de contenant et pas une taille de contenu.

Pour insérer une image, il faut utiliser la balise img. Normalement ça devrait fonctionner avec du SVG aussi et là, là taille que tu spécifiras, sera la taille du contenu de la balise à savoir une image.

Merci de la réponse je vais essayer...

Sur W3School ils n'indiquent pas <img ...> comme une balise pour SVG... la raison de cela est sans doute que le support de SVG ne fait pas partie de base d'autres navigateurs. Du coup, si on veut faire du HTML portable...

Le terme d'HTML portable n'a pas vraiment de sens enfin, j'ai qd même compris ce que tu voulais dire.

Si tu veux faire une page web qui passe bien partout c'est pas en utilisant des plugins qui tu vas y arriver car il faut que ceux-ci soient installé en plus du navigateur, si pour Flash, tu ne prends pas trop de risque, pour un truc aussi exotique que le SVG, c'est pas gagné.

Non, si tu veux que ta page soit universelle, tu transformes ton SVG en PNG par exemple.

Edit (j'ai cherché un peu plus) :
Ensuite, W3school, c'est W3school, ils disent quoi sur Alsacréation par exemple ?
Après une petite recherche il semblerait que la meilleure méthode soit d'inclure le code SVG (XML) directement dans la page XHTML (XML aussi), biensur, il faut que ta page soit en XHTML et pas en HTML mais la conversion n'est pas compliquée.

Apparemment le code SVG directement inclu dans du XHTML, Opera ne sait pas visualiser, mais avec Firefox ça passe.

En ce qui concerne l'utilisation de <img... /> à la place de <object> ça passe avec Firefox, mais pas avec Opera, mais Firefox traite un attribut width sur <img> comme un rogne et non comme un changement d'échelle.

Enfin bref pour reprendre le terme impropre de "portable" --- je voulais dire que ça donne sensiblement le même résultat quel que soit le navigateur --- j'en conclus que

- <object ...> est la meilleure méthode
- impossible de faire un changement d'échelle.

Je reponds aussi à la suggestion de convertir en PNG: ben en fait c'est que je voudrais rester avec du vectoriel, ça permet de zoomer... Et puis même si SVG est plus exotique que Flash, je pense que c'est un format qui restera, tout simplement parce que c'est un format ouvert, et en ce qui me concerne j'apprécie que c'est un des formats d'export de Scilab ce qui permet d'insérer des graphes visualisant des résultats de simulation dans des pages Web.

J'ai déjà vu Opera afficher du code SVG, d'ailleurs si tu regarde sur dev.opera, tu devrais y trouver un article qui explique comment débugger du SVG avec Opera et Dragonfly, à mon avis c'est ta méthode qui n'est pas au point, on pourrait voir ta page ?

Ensuite, ce n'est pas tant SVG qui est exotique, c'est le plugin qui permet de l'afficher. Tandis qu'aujourd'hui, tous les navigateurs récents le prennent plus ou moins en charge, même IE. D'où l'intéret de ne pas passer par le plugin pour l'afficher.

Autre idée pour rester ds le vectoriel, convrtir ton SVG en Flash, ça doit être possible, le plugin flash est plus rependu que le plugin SVG et lorsqu'on le redimensionne, son contenu suit.

Salut,

Voici la page en question, suivie du fichier circle1.svg:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
<head>
<title>temp</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<meta name="generator" content="Org-mode"/>
<meta name="generated" content="2011-11-24 21:21:49 "/>
<meta name="author" content="Vincent Belaïche"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<style type="text/css">
 <![CDATA[/*>
</style>
<script type="text/javascript">
<![CDATA[/*>
</script>

</head>
<body>
<div id="content">

<h1 class="title">temp</h1>

<ul>
<li>
<object data="circle1.svg" type="image/svg+xml"></object>
</li>
</ul>

<div id="postamble">
<p class="date">Date: 2011-11-24 21:21:49 </p>
<p class="author">Author: Vincent Belaïche</p>
<p class="creator">Org version 7.5 with Emacs version 23</p>
<a href="http://validator.w3.org/check?uri=referer">Validate XHTML 1.0</a>
</div>
</div>
</body>
</html>

Le fichier SVG (qui n'est rien d'autre qu'un couper/coller sans vergogne d'un exemple de chez W3School):

<?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 xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black"
   stroke-width="2" fill="red" />
 </svg>

Forcement que ça ne peut pas fonctionné, tu as mis ton SVG dans un fichier à part et tu passes par un plugin alors que l'on parle de mettre le code SVG dans la page XHTML.

Essaie ça :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>temp</title>
  </head>
  <body>
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
		</svg>
  </body>
</html>

Chez moi ça marche

Plus d'info sur Alsacréations : http://forum.alsacreations.com/topic-3-3650-1-Inclure-du-SVG-dans-une-page-XHTML.html

Je viens d'essayer, et le SVG incorporé à la page ne marche pas. Par contre ce qui s'est mis à marcher c'est d'inclure du SVG avec img au lieu de object.

Toutefois le comportement d'Opera avec img est le même que celui de Firefox, c'est à dire qu'un width ou un height va rogner/étendre l'image au lieu de la contracter/dilater

Informations sur la version
Version
11.52

Révision
1100

Plate-forme
Win32

Système
Windows XP

XHTML+Plug-in Vocal
Plug-in non chargé

Identification du navigateur

Opera/9.80 (Windows NT 5.1; U; fr) Presto/2.9.168 Version/11.52

Pour mémoire --- car on dirait qu'on s'éloigne du sujet --- mon problème initial ce n'était pas de faire du SVG incorporé, mais de dilater/contracter une image SVG.

Je m'étais dit qu'on pourrait peut-être faire ça en insérant l'image comme un élément use d'une image SVG « mère » qui elle serait incorporée pour faire simple, et que la dilatation/contraction serait gérée au niveau de l'attribut transform de la balise use en question de l'image mère.

Bon, donc je pense qu'il faut creer un fichier séparé pour contenir l'image mère qui ne sert qu'à dilater/contracter l'image qu'on veut présenter.

Au temps pour moi, c'est plutôt une balise « image » qu'une balise « use » qu'il faut, car « use » ne peut pas gérer un fichier entier. Donc voici un fichier circle1-scaled.svg que j'inclus via un object ou img à la place de circle1.svg. C'est censé contracter l'image d'un rapport 0.9, mais ça ne le fait pas.

<?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 
	xmlns:xlink="http://www.w3.org/1999/xlink"
	xmlns="http://www.w3.org/2000/svg" version="1.1">
   <image tranform="scale(0.9,0.9)"
		  xlink:href="circle1.svg" />
 </svg>

C'est à dire qu'à la place du cercle rouge contracté, j'ai un blanc.

>> on dirait qu'on s'éloigne du sujet
Au contraire on est en plein dedans, rassure toi.

Et ça donne quoi ton dernière essaie ?
Tu l'ajoute comment dans ta page ? Toujours pas avec une balise Object ?
Si tu utilises une balise object, c'est mort d'avance.

<svg>
...
</svg>
n'aurais tu pas oublié ceci ">" dans ton code ?

Voici un lien sur un cours en français sur le svg 1.1 tu trouveras surement la réponse a ton problème
http://www.siteduzero.com/tutoriel-3-14808-introduction-au-svg.html

Non, il ne l'a pas oublié, la balise <svg se ferme ici version="1.1"> dans son exemple.

Voici le code de la page

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>temp</title>
  </head>
  <body>
	<table border="1">
	  <tr>
		<td>
		  ça 
		  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
		  </svg>
		  marche avec Firefox, mais pas avec Opéra (&rarr; rien).
		</td>
	  </tr><tr><td>
		  Ça marche avec
		  <img width="150" src="circle1.svg" />
		  Firefox et Opéra
	  </td></tr>
	  <tr><td>
		  Ça ne marche ni avec
		  <img src="circle1-scaled.svg" />
		  Firefox, ni avec Opéra (&rarr; carré blanc).
	  </td></tr>
	</table>
  </body>
</html>

Voici ce que je vois avec Opéra (à gauche) et avec Firefox (à droite):

Originally posted by dmonx66:

<svg>
...

n'aurais tu pas oublié ceci ">" dans ton code ?

Voici un lien sur un cours en français sur le svg 1.1 tu trouveras surement la réponse a ton problème
http://www.siteduzero.com/tutoriel-3-14808-introduction-au-svg.html

Mais non, je n'ai rien oublié le souflet fermant était deux lignes après:

<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<image tranform="scale(0.9,0.9)"
xlink:href="circle1.svg" />
</svg>

Chez moi ça donne ça



Et c'est normal puisque le code du haut comme je te l'ai dis, fonctionne, je l'ai pris sur une page de my.opera.

Bien sûr, les images liés par des fichiers sont vide parce que je n'ai pas pris la peine de créer le fichier SVG.
Edit :
Petite différence entre nos 2 essaies, tu as mis la mauvaise extension à ton fichier, l'extension d'un fichier XHTML et .xhtml

Dans Opera 12 ça ne fait aucune différence, dans Opera 11, seul le fichier avec l'extension .xhtml permet de mélanger xhtml et svg.

Ok, on a fait un grand bon en avant: j'arrive moi aussi à mettre du code SVG incorporé dans Opéra à condition de nommer le fichier en .XHTML, mais il reste que

* l'attribut `transform="scale(0.5,0.5)" ' est sans effet
* une balise `image' dans un SVG est sans effet (carré blanc)

Essaie donc moi ça (en nommant le fichier qqchose.xhtml):

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>temp.XHTML</title>
  </head>
  <body>
	<table border="1">
	  <tr>
		Voici les codes des fichiers SVG que j'utilise, dans aucun des cas je n'arrive à contracter
		l'image&hellip;
		<table border="1">
		  <tr>
			<th>circle1-scaled.svg</th>
			<th>circle1.svg</th>
		  </tr>
		  <tr>
			<td>
<pre>&lt;?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?&gt;
&lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; 
  &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;
 &lt;svg 
	xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
	xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;&gt;
   &lt;image tranform=&quot;scale(0.5,0.5)&quot;
		  xlink:href=&quot;circle1.svg&quot; /&gt;
 &lt;/svg&gt;</pre>
			</td>
			<td><pre>
&lt;?xml version=&quot;1.0&quot; standalone=&quot;no&quot;?&gt;
 &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; 
 &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;

 &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;&gt;
   &lt;circle cx=&quot;100&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;black&quot;
   stroke-width=&quot;2&quot; fill=&quot;red&quot; /&gt;
 &lt;/svg&gt;</pre>
			</td>
		  </tr>
		  <tr><th>circle1-scaledinside.svg</th><td></td></tr>
		  <tr><td><pre>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot;&gt;
  &lt;g tranform=&quot;scale(0.5,0.5)&quot; &gt;
	&lt;circle cx=&quot;100&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;red&quot; /&gt;
  &lt;/g&gt;
&lt;/svg&gt;
</pre></td><td></td></tr>
		</table>
	  </tr>
	  <tr>
		<td>
		  Code incorporé: (avec Opéra on voit qq chose à condition d'avoir un fichier nommé en *.XHTML).
		  <table border="1">
			<colgroup>
			  <col width="200" style="background-color:yellow"  />
			  <col width="200" style="background-color:green"  />
			</colgroup>			
			<tr><th>
				
				Même contenu que <file>circle1-scaledinside.svg</file>
			  </th>
			  <th>
				Même contenu que <file>circle1.svg</file>
			</th></tr>
			<tr><td>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <g tranform="scale(0.5,0.5)" >
					<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
				  </g>
				</svg>
			  </td><td>
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
				  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
				</svg>
		  </td></tr></table>
		</td>
	  </tr><tr><td> Code inclus avec un balise img: on voit qqchose avec Firefox et Opéra, l'attribut width
	  entraîne un rognage.
		  <table border="1">
			<colgroup>
			  <col width="200" style="background-color:yellow"  />
			  <col width="200" style="background-color:green"  />
			</colgroup>			
			<tr><th>&lt;img width=&quot;75&quot; src=&quot;circle1.svg&quot; /&gt;</th>
			  <th>&lt;img src=&quot;circle1.svg&quot; /&gt;</th></tr>
			<tr><td>
				<img width="75" src="circle1.svg" />
			  </td><td>
				<img src="circle1.svg" />
		  </td></tr></table>
	  </td></tr>
	  <tr><td> Code &quot;circle1-scaled.svg&quot; inclus avec un balise img: On ne voit rien pour
	  &quot;circle1-scaled.svg&quot; ni avec Firefox ni avec Opéra
		  <table border="1">
			<colgroup>
			  <col width="200" style="background-color:yellow"  />
			  <col width="200" style="background-color:green"  />
			</colgroup>			
			<tr><th>&lt;img src=&quot;circle1-scaled.svg&quot; /&gt;</th>
			  <th>&lt;img src=&quot;circle1.svg&quot; /&gt;</th></tr>
			<tr><td>
				<img src="circle1-scaled.svg" />
			  </td><td>
				<img src="circle1.svg" />
		  </td></tr></table>
	  </td></tr>
	</table>
  </body>
</html>

Et chez moi je vois ça:

Je n'ai pas le contenu de tes fichiers SVG, si pour circle1, j'ai une petite idée pour les autres c'est plus flou.


Sinon, petit conseil, lorsque tu as de grand code source, il vaut mieux passer par un service de pastbin, il en existe même un pour Opera. Ainsi; la discussion peut garder sa fluidité.

Autre petite chose sans rapport avec ton problème, Opera ne prend pas d'accent, en fait même si en français on dit souvent Opéra la bonne prononciation serait plutôt op'ra.

Originally posted by Nickko:

Je n'ai pas le contenu de tes fichiers SVG, si pour circle1, j'ai une petite idée pour les autres c'est plus flou.

Ben si tu les as , ils sont affichés en haut de la page dont j'ai mis le code en ligne dans le message horodaté du 4. December 2011, 06:47:04.

Vincent.

PS: Sinon, pour revenir au sujet de la discussion --- il paraît qu'on est en plein dedans --- depuis le début du fil je n'ai pas vu une seule fois le cercle contracté, c'est un comble pour un format dont le sigle signifie «Scalable Vector Graphic ». Il semble que la contraction/dilatation soit sans effet et que la taille du graphique est ajustée automatiquement. Tu confirmes ?

Oui on est en plein dans le sujet selon moi car avant de parler de redimensionnement, il faut bien qu'on arrive à afficher ton image et j'avais l'impression que ça n'y était pas encore vu tes essais / comparaison entre Opera et Firefox. J'ai pu me tromper.

Maintenant que ça s'affiche, il faut trouver comment maitriser la taille de la bestiole.

Originally posted by vincentb1:

Il semble que la contraction/dilatation soit sans effet et que la taille du graphique est ajustée automatiquement. Tu confirmes ?

Je confirme qu'on a pas encore vu ça. Maintenant ça doit bien être possible, on va désormais se pencher sur ce problème.

1° idée : transform="scale(2)" ça devrait diminuer de moitié ton image.
2° idée j'ai vaguement vu passer l'attribut viewbox, je pense que ça peut avoir un rapport avec ton problème.

Je viens d'essayer

transform="scale(2)"

et ça fait exactement la même chose, je vais creuser du côté de viewbox, et je te tiens au courant...

Bon,

Le code suivant s'il est incorporé dans du XHTML va bien grossir l'image 3 fois:

<svg width="420px" height="270px" viewbox="0 0 420 270"
	 xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g transform="scale(3)">
	<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </g>
</svg>

Toutefois:
- viewbox n'a pas l'air de servir à grand chose, ça fait la même chose sans.
- comment calculer la largeur et la hauteur de façon simple, analyser tout le code SVG ?
- le code suivant où on passe un fichier, ne le fait pas

<svg xmlns:xlink="http://www.w3.org/1999/xlink"
	 xmlns="http://www.w3.org/2000/svg" version="1.1"
	 width="420px" height="270px" viewbox="0 0 420 270"
	 >
  <image width="420" height="270"
		 transform="scale(3)" xlink:href="circle1.svg"/>
</svg>

Ce n'est pas mieux si j'ajoute

xlink:type="image/svg+xml"

dans les attributs de <image>.

Vincent.

Au temps pour moi "viewBox" marche bien, mais il faut un B majuscule (viewBox et non viewbox).

Voilà un code qui marche chez moi quand il est incorporé à une page XHTML:

<svg width="240px" height="270px" viewBox="180 0 240 270"
	 xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g transform="scale(3)">
	<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  </g>
</svg>

Ton problème est-il résolu ?

Ben pas vraiment, le fait de devoir déterminer la taille de l'image SVG originale pour pouvoir la dilater ou la contracter est assez contraignant.

En fait ce que je cherche à faire c'est à dilater/contracter l'image en connaissant soit la hauteur finale --- et en gardant les proportions --- soit la largeur finale --- et en gardant les proportions ---, soit les deux, et dans ce cas les proportions pourraient être modifiées.

C'est possible avec les attributs width, height, et viewBox, ainsi qu'un petit <g transform="scale(...)"> ... </g>, mais, le problème c'est qu'il faut au préalable déterminer les xmin, xmax, ymin et ymax de l'image...

Je me demande s'il y a des scripts qui font ça simplement. J'ai regardé du côté de Perl, http://search.cpan.org/~peterw/SVG-Parser-1.03/lib/SVG/Parser.pm#METHODS, il y a un truc pour analyser un fichier SVG, et après on a un objet SVG en Perl, mais je n'ai pas trouvé de méthode pour extraire les xmin, xmax, ymin, ymax...

Il y a un deuxième problème, pour l'instant je n'ai réussi à faire la dilatation/contraction qu'en incorporant toute l'image au fichier XHTML, je pense qu'il est plus judicieux d'avoir un fichier SVG séparé auquel on ne touche pas, mais là je ne suis pas arrivé à le faire...

Vincent.

PS: Tu te demandes peut-être pourquoi je cherche à faire tout ça, j'écris des doc en Texinfo, Texinfo possède un compilateur en Perl qui permet de convertir le code Texinfo en HTML et un compilateur en TeX qui permet de convertir le même document en Postscript. Ce compilateur pourrait être modifié facilement pour produire du XHTML et inclure du SVG --- Texinfo ne permet pas actuellement d'inclure d'image vectorielle pour la sortie (X)HTML, mais seulement pour une sortie postscript. Le petit problème qui reste c'est pour ces dilatations/contractions.

Je crois que j'ai atteins ma limite, je n'ai plus d'idée pour t'aider.
SI tu avance un peu, je t'invite à me faire part de l'évolution peut-être pourrais-je encore être utile.

Merci beaucoup pour ton aide, je ne pense pas qu'il soit possible actuellement d'aller plus loin.

Il y a quand même un progrès car il n' y a pas si longtemps de ça, même sans changer l'échelle de l'image il fallait connaître ses dimensions pour l'inclure dans une page HTML.

Vincent.