JueDan: Wie W3C-konformes XHTML/SVG-Dokument erstellen?

Hallo Forum,

im Moment bin ich dabei, meine Seite W3C-konform zu machen. Es sind einige Seiten dabei, die SVG-Grafiken als Inline enthalten und durch ein Perl-Skript generiert werden. Meine Frage, wie muss der Header aussehen, damit es W3C-konform wird?

Ein Auszug aus der Datei:

  
<!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"  
xmlns:svg="http://www.w3.org/2000/svg"  
xmlns:xlink="http://www.w3.org/1999/xlink"  
xml:lang="DE" lang="DE" dir="ltr">  
  
<body id="top">  
<p>SVG-Grafik</p>  
<dl>  
<dt>  
<svg>  
...  
</svg>  
</dt>  
<dd>...</dd>  
<dl>  
  
</body>  
</html>  

Der Validator von W3C meckert an dem Tag <svg> herum, weil es nicht bekannt ist. Wenn ich die Beispiele, die einem per Google entgegengeschleudert werden validiere, wird die gleiche Meldung ausgegeben.
Wie muss man es denn richtig machen?

  1. @@JueDan:

    nuqneH

    Der Validator von W3C meckert an dem Tag <svg> herum, weil es nicht bekannt ist.

    Nicht im HTML-Namensraum. Aber im SVG-Namensraum. Es müsste also heißen:

    <svg:svg>  
    ...  
    </svg:svg>
    

    (und innendrin auch alles mit <svg:>)

    Da meckern dann aber wohl die Browser, wenn das nicht als XML verarbeitet wird.

    Also doch eher

    <svg xmlns="http://www.w3.org/2000/svg">  
    ...  
    </svg>
    

    Dann gilt der SVG-Namensraum auch innendrin. Die Namensraumdeklaration im html-Tag brauchst du dann nicht.

    Warum kein HTML5-DOCTYPE?

    Qapla'

    --
    „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
    1. Hallo Gunnar,

      danke für Deine Antwort.

      Egal, was ich in das Dokument reinschreibe oder welche Dateiendung es bekommt, es ist nicht valide.
      Hier der Link:
      http://www.dankoweit.de/OpenLayers-Test/svgtest2.xhtml

      Und hier der Link zum Validator und dessen Ergebnis:
      http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dankoweit.de%2FOpenLayers-Test%2Fsvgtest2.xhtml&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3

      Viele Grüße

      Jürgen

      1. Hallo Gunnar,

        danke für Deine Antwort.

        Egal, was ich in das Dokument reinschreibe oder welche Dateiendung es bekommt, es ist nicht valide.
        Hier der Link:
        http://www.dankoweit.de/OpenLayers-Test/svgtest2.xhtml

        Und hier der Link zum Validator und dessen Ergebnis:
        http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dankoweit.de%2FOpenLayers-Test%2Fsvgtest2.xhtml&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3

        Mit HTML5 sieht es doch recht gut aus!

        1. Moin Gagamehl,

          Egal, was ich in das Dokument reinschreibe oder welche Dateiendung es bekommt, es ist nicht valide.
          Hier der Link:
          http://www.dankoweit.de/OpenLayers-Test/svgtest2.xhtml

          Und hier der Link zum Validator und dessen Ergebnis:
          http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dankoweit.de%2FOpenLayers-Test%2Fsvgtest2.xhtml&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3

          Mit HTML5 sieht es doch recht gut aus!

          HTML5 hat aber noch nicht jeder Browser ;-)

          1. Moin,

            das Problem ist irgendwie nicht lösbar. Ich habe jetzt so viele Beispiele gefunden, die SVG inline darstellen, aber keines war W3C konform. Anscheinend geht das nicht.
            Ich werde das jetzt so lassen. Es ist eh die einzige Seite meiner Webpräsenz, die nicht W3C-valide ist.

            Viele Grüße und danke für die Hilfe

            JueDan

  2. Hallo JueDan,

    Der Validator von W3C meckert an dem Tag <svg> herum, weil es nicht bekannt ist. Wenn ich die Beispiele, die einem per Google entgegengeschleudert werden validiere, wird die gleiche Meldung ausgegeben.
    Wie muss man es denn richtig machen?

    Validierender Ansatz:

    <!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" xmlns:svg="http://www.w3.org/2000/svg"  
      xmlns:xlink="http://www.w3.org/1999/xlink" xml:lang="de" dir="ltr">  
      <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>Test</title>  
      </head>  
      <body id="top">  
        <p>SVG-Grafik</p>  
          <svg:svg width="400" height="300">  
          <svg:circle cx="100" cy="100" r="30" fill="#F00" />  
        </svg:svg>  
      </body>  
    </html>
    

    Stellt aber kein Browser dar. Also eher via object einbinden oder die HTML5-Option nehmen, funktioniert dann wenigstens halbwegs.

    Grüße,
    Thomas

    1. [Nachtrag:]

      Stellt aber kein Browser dar.

      Gilt für HTML, als XML ist der Kreis in Opera, FF, Safari und IE 9 sichtbar.

      Grüße,
      Thomas

      1. Hallo Thomas,

        danke für Deinen Tipp. Jetzt funktioniert es - endlich.

        Danke nochmals und schönen Abend

        Jürgen

        1. @@JueDan:

          nuqneH

          danke für Deinen Tipp. Jetzt funktioniert es - endlich.

          ?? Genau den Tip hatte ich doch auch gegeben.

          Qapla'

          --
          „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)