[SVG] Où en est-on du SVG?

**Richard Trigaux** · 13/08/2008, 16h15

Quelqu'un pourrait il nous dire où on en est du SVG?

On nous a annoncé récemment que, après plusieurs années de tergiversations, Opera a enfin installé SVG 1.2 tiny, la première version utilisable du SVG (c'est à dire comprennant les indispensables fonctions audio et prefetch, sans lesquelles le SVG ne peut pas remplacer le flash).

Or mes essais de SVG sont totalement ignorés par les navigateurs IE, Opera, Firefox, Safari. Les balises sont simplement ignorées, et je n'ai que les textes, pour ces deux exemples, y compris le second qui est pourtant copié-collé de la norme:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="UTF-8"?>
<svg width="5cm" height="4cm" xmlns="http://www.w3.org/2000/svg" 
    version="1.2" baseProfile="tiny" viewBox="0 0 100 100">

  <desc>SVG audio example</desc>

  <audio xlink:href="ouch.ogg" volume="0.7" type="audio/vorbis"
        begin="mybutton.click" repeatCount="3"/>

  <g id="mybutton">
    <rect width="150" height="50" x="20" y="20" rx="10" 
      fill="#ffd" stroke="#933" stroke-width="5"/>
    <text x="95" y="55" text-anchor="middle" font-size="30" 
      fill="#933">Press Me</text>
  </g>

  <rect x="0" y="0" width="190" height="90" fill="none" stroke="#777"/>

</svg>

...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<svg width="5cm" height="4cm" xmlns="http://www.w3.org/2000/svg" 
    version="1.2" baseProfile="tiny" viewBox="0 0 100 100">
  <desc>Four separate rectangles
  </desc>
    <rect x="20" y="20" width="20" height="20"/>
    <rect x="50" y="20" width="30" height="15"/>
    <rect x="20" y="50" width="20" height="20"/>
    <rect x="50" y="50" width="20" height="40"/>
  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="98" height="98"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

Que s'est-il passé? Il faut ajouter un nouveau brimborion de déclaration de type de document? Le SVG a été interdit? Ou quoi? Je n'ai même pas trouvé de validateur pour le SVG 1.2...

J'aimerais pouvoir commencer à travailler

**Richard Trigaux** · 20/08/2008, 10h01

Après quelques recherches, j'ai trouvé la cause du "problème". Il semble que les différents navigateurs (Safari, Firefox et Opera) se soient concertés pour mettre un peu d'ordre dans le SVG et éviter qu'on retombe dans les cafouillages du HTML. Et tout SVG non conforme est ignoré. Une bonne chose donc.

Ainsi le SVG sera dans des documents XHTML, où le W3C pourra réaliser son rêve de mélanger à l'envi différents langages comme le HTML, le SVG, etc, sans plus aucune interférence microsofteuse. (Internet Explorer s'est de facto exclu d'internet, en n'affichant pas le XHTML ni le SVG). Et quand vous aurez goûté au XHTML, vous ne pourrez plus vous en passer...

Voici donc le "template" d'un document type "document.xhtml" contenant du SVG:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php	@header("Content-Type: application/xhtml+xml; charset=iso-8859-1"); ?>


<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <title>AUDIO TEST IN SVG</title>
    </head>

    <body>
        <p>texte HTML</p>

        <svg id="display" width="400" height="300"
			xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
			version="1.2"  baseProfile="tiny">

            <desc>SVG audio example</desc>

            <audio href="ouch.ogg" volume="0.7" type="audio/vorbis"
            begin="mybutton.click" repeatCount="3"/>

            <g id="mybutton">
                  <rect width="150" height="50" x="20" y="20" rx="10" 
                  fill="#ffd" stroke="#933" stroke-width="5"/>
                  <text x="95" y="55" text-anchor="middle" font-size="30" 
                  fill="#933">Cliquer</text>
            </g>

            <rect x="0" y="0" width="190" height="90" fill="none" stroke="#777"/>
        </svg>

        <p>texte HTML</p>

    </body>
</html>

On remarque toutes les déclarations de "namespace" (espace de nomage) xmlns en bonne et due place (on peut aussi les rassembler toutes dans la balise <html>, mais il faut alors ajouter le préfixe svg: à tous les tags SVG)

On remarque aussi la déclaration du type mine en PHP, qui doit être à la toute première ligne du document "document.php", si on est en PHP

Cet exemple marche avec Opera, Firefox, Safari, sauf que le son n'est pas rendu. Seul Opera se prépare à implémenter le son dans une prochaine version (probablement 6). Alors on pourra commencer à travailler. Et le premier à rendre le son piquera surement des parts d'audience aus autres.

Je suggère aux modérateurs de créer un forum SVG et de mettre le template ci-dessus en bonne place. En effet le SVG est assez déroutant à démarrer, et si on ne connaît pas le xhtml, on risque d'y passer plusieurs jours avant d'y comprende quelque chose.

Cette discussion est donc résolue, toutefois je la laisse ouverte pour commentaires (pas nombreux en ces temps de vacances

**apidou** · 09/03/2009, 19h32

Tout à fait d'accord avec toi !
Je ne comprends pas pourquoi le svg n'a pas son forum.
J'ai l'impression d'être le seul à ne pas utiliser flash ...

Franchement c'est assez énorme ce que l'on peut faire en SVG en le mélangeant avec php et javascript ! cartes, graphiques...moi ça suffit à mon bonheur (surtout depuis que les navigateurs le prennent de plus en plus en compte...)

Bref ce serait sympa de voir un forum dédié !

**SPKlls** · 02/04/2009, 21h17

Envoyé par apidou

Bref ce serait sympa de voir un forum dédié !

+1

C'est justement ce que je cherchais quand je suis tombé sur post !

**Mynsk** · 03/07/2009, 17h13

Bonjour,

j'ai tester la page xhtml de Richard Trigaux, totu s'afficher bien, mais je n'ai aucun son qui est lu. J'ai bien sur remplacer href="ouch.ogg" par un fichier son que j'ai mis dans le même répertoire que la page.

Est ce que j'aurais oublié de faire quelque chose ?

je suis sous WinXp avec FireFox 3.5.

Merci

[SVG] Où en est-on du SVG?

Autres langages pour le Web

Discussions similaires

Partager

Partager