Wolfgang Keller: HTML in SVG einbinden (kein Schreibfehler!)

Hallo,
wie man SVG in HTML einbindet: das kann man googlen. Allerdings mich würde die Umkehrung interessieren: ist es möglich, HTML-Dateien in SVG einzubinden.

Ich stelle mir das so im Stil vor (Pseudocode!)

<svgembed src="foobar.html" width="200" height="100" transform="rotate(-45, 50, 200)" />

und schon hätte ich eine schöne HTML-Seite, die um 45 Grad gedreht ist. Sähe sicher nett aus ;-)

Noch schicker wäre es natürlich, wenn man das Problem mit Namespaces lösen könnte, statt extern mit src= zu referenzieren.

  1. und schon hätte ich eine schöne HTML-Seite, die um 45 Grad gedreht ist. Sähe sicher nett aus ;-)

    Ne sorry, glaube ich nicht. Im Endeffekt definierst du mit SVF ja Bildinformationen. Da SVG damit erstmal interpretierbares HTML lesen müsste und anschließend als Grafik wiedergeben würde, scheitert es schon an dieser Schnittstelle.

  2. wie man SVG in HTML einbindet: das kann man googlen. Allerdings mich würde die Umkehrung interessieren: ist es möglich, HTML-Dateien in SVG einzubinden.

    Ja, mit foreignObject, derzeit allerdings nur in Firefox’ nightly builds.

    Beispiel:

    <?xml version="1.0" standalone="yes"?>  
    <svg version="1.1" xmlns = "http://www.w3.org/2000/svg">  
        <desc>foreignObject-Test</desc>  
        <switch>  
            <foreignObject x="100" y="200" width="100%" height="100%" transform="rotate(-45, 50, 200)">  
                <body xmlns="http://www.w3.org/1999/xhtml">  
                    <h1>foreignObject</h1>  
                    <p>funktioniert</p>  
                </body>  
            </foreignObject>  
            <text font-size="10" font-family="Verdana">  
                <tspan x="10" y="10">fallback</tspan>  
            </text>  
        </switch>  
    </svg>
    

    ergibt in Firefox 3.0a9pre folgendes Bild:

    foreignObject in Firefox 3

    Simples Einbetten eines externen Dokuments scheint in SVG nicht möglich zu sein, jedenfalls finde ich keine Information darüber. Da müsstest du serverseitig nachhelfen und das SVG-Dokument gleich samt dessen XHTML-Inhalt generieren.

    Die Drehung eines Bildes beherrschen auch ältere Browserversionen und Opera 9.5 endlich ohne verwaschenes Ergebnis.

    Roland

    --
    Aquahu akbar!
    1. foreignObject

      Ja, leck mich doch am Astralhintern, ist das vielleicht geil … man müsste halt nur intensiver nachdenken. Mit einem iframe geht’s dann natürlich.

      <?xml version="1.0" standalone="yes"?>  
      <svg xmlns = "http://www.w3.org/2000/svg">  
        <g transform="translate(300, 0) rotate(20)">  
          <foreignObject x="10" y="10" width="800" height="800">  
            <body xmlns="http://www.w3.org/1999/xhtml">  
              <iframe src="http://starkravingfinkle.org/blog" style="width:700px;height:700px"></iframe>  
            </body>  
          </foreignObject>  
        </g>  
      </svg>
      

      http://starkravingfinkle.org/blog/wp-content/uploads/2007/07/foreignobject-transform.svg ergibt

      foreignObject - Screenshot

      Siehe Firefox 3 - SVG foreignObject.

      Roland

      --
      Aquahu akbar!
      1. hallo Roland,

        Ja, leck mich doch am Astralhintern

        Mach ich nicht, nicht mal astral.

        http://starkravingfinkle.org/blog/wp-content/uploads/2007/07/foreignobject-transform.svg ergibt

        ... wenn ich es unter Windows mit Opera 9.23 aufrufe gar nix. Im Firefox 2.0.x immerhin die gewünschte "Seite". Auch Konqueror 3.5.7 zeigt mir (immer noch unter Windows, aber natürlich in einer virtuellen Gentoo-Maschine) immerhin das:

        Ich habe jetzt noch nicht ganz begriffen, ob du uns mit deinen Hinweisen auf alpha-, beta- und ähnliche Entwicklerversionen nur den Mund wässrig machen willst. Und dein Screenshot sieht ja auch verdächtig nach Safari aus - den hab ich in aller Eile jetzt nicht konsultieren können.

        Übrigens: mein Screen kommt mit 83 KB aus - was hast du denn nur angestellt, daß deiner so "groß" wurde?

        Grüße aus Berlin

        Christoph S.

        --
        Visitenkarte
        ss:| zu:) ls:& fo:) va:) sh:| rl:|
        1. Ja, leck mich doch am Astralhintern […]

          Mach ich nicht, nicht mal astral.

          Für ein wahrhaft reinigendes Gewitter böte sich noch rektal an. ;-)

          http://starkravingfinkle.org/blog/wp-content/uploads/2007/07/foreignobject-transform.svg ergibt

          ... wenn ich es unter Windows mit Opera 9.23 aufrufe gar nix. Im Firefox 2.0.x immerhin die gewünschte "Seite".

          Ich hatte erwähnt, dass bis dato lediglich Firefox 3a mit foreignObject umgehen kann. Opera 9.50a zeigt zwar den gedrehten iframe als schwarzen Rahmen, nicht aber dessen Inhalt.

          Auch Konqueror 3.5.7 zeigt mir (…) immerhin das

          Mit deinem KDW-Browser ist da natürlich kein Land zu gewinnen.

          Ich habe jetzt noch nicht ganz begriffen, ob du uns mit deinen Hinweisen auf alpha-, beta- und ähnliche Entwicklerversionen nur den Mund wässrig machen willst.

          Natürlich! SVG ist genial und wird viel zu wenig genutzt, dabei sollte die immer bessere Browserunterstützung Anlass geben, genau das zu tun.

          Und dein Screenshot sieht ja auch verdächtig nach Safari aus

          Ist ein Firefox, siehe oben. Auf dem Mac sieht halt alles gut aus, gell.

          Übrigens: mein Screen kommt mit 83 KB aus - was hast du denn nur angestellt, daß deiner so "groß" wurde?

          Daran war Thumbscrew schuld, das so schöne Rahmen zaubert. Ich gelobe Besserung. Noch ein Versuch mit optimiertem PNG und reinem OS X-Eyecandy:

          http://skop.net/self/foreignObject-weblog.svg ergibt

          foreign-Object

          Für’s Mitstaunen benötigst du einen tagesaktuellen Firefox.

          Roland

          --
          Aquahu akbar!
          1. hallo Rolnd,

            Ich hatte erwähnt, dass bis dato lediglich Firefox 3a mit foreignObject umgehen kann. Opera 9.50a zeigt zwar den gedrehten iframe als schwarzen Rahmen, nicht aber dessen Inhalt.

            Ja, das hattest du erwähnt. Aber was nutzt das denn _jetzt_?

            Auch Konqueror 3.5.7 zeigt mir (…) immerhin das
            Mit deinem KDW-Browser ist da natürlich kein Land zu gewinnen.

            Was, wie, wie meinst du das jetzt? "KDW" ist "Kaufhaus des Westens", jedenfalls für einen Berliner wie mich. Im KDW gibts nun zwar eine geradezu exotisch ausgestattete "Freßmeile" in der vierten Etage (die haben so ziemlich alles, außer Holunderwein), aber irgendwelche Browser hängen da nicht zum Mitnehmen herum.

            Ich habe jetzt noch nicht ganz begriffen, ob du uns mit deinen Hinweisen auf alpha-, beta- und ähnliche Entwicklerversionen nur den Mund wässrig machen willst.
            Natürlich!

            Achso. Du betätigst dich also neuerdings als Mundwässrigmacher. Äks. Bitte liefere künftig auch die nötigen Taschentücher dazu ;-)

            SVG ist genial und wird viel zu wenig genutzt, dabei sollte die immer bessere Browserunterstützung Anlass geben, genau das zu tun.

            Naja, _da_ sind wir ja nun ganz zufälligerweise absolut ein und derselben Ansicht und Meinung.

            Für’s Mitstaunen benötigst du einen tagesaktuellen Firefox.

            Habbich aber nicht - ist wohl noch nicht in den Portage-Tree gelangt.

            Außerdem muß ich jetzt grade noch "Gladiator" in RTL kucken und bin geringfügig abgelenkt.

            Grüße aus Berlin

            Christoph S.

            --
            Visitenkarte
            ss:| zu:) ls:& fo:) va:) sh:| rl:|
            1. lediglich Firefox 3a

              Aber was nutzt das denn _jetzt_?

              Was interessiert mich der Mainstream, wir sind doch hier Avantgarde.

              Konqueror
              KDW-Browser
              "KDW" ist "Kaufhaus des Westens"

              Meine Güte, das war ein Sickerwitz …

              Für’s Mitstaunen benötigst du einen tagesaktuellen Firefox.

              Habbich aber nicht - ist wohl noch nicht in den Portage-Tree gelangt.

              Du züchtest Bonsais? Wie auch immer, mit dem richtigen™ Betriebssystem geht das automatisch.

              Roland

              P. S.: Den riesigen Screenshot habe ich mittlerweile überarbeitet.

              --
              Aquahu akbar!
            2. Hi Christoph.

              Achso. Du betätigst dich also neuerdings als Mundwässrigmacher.

              Genau wie du! Holunderwein hier ... Blüten da ... ach, ist die Ernte wieder gut geworden ... und wie der dreht ... welch ein Geschmack auf der Zunge ... das Beste weit und breit ... guckt mal, wieviele dicke fette Flaschen ich hab ...

              Aber rausrücken tust du nix ;-(

              vg Bud

              1. hallo,

                Achso. Du betätigst dich also neuerdings als Mundwässrigmacher.
                Genau wie du! Holunderwein hier ... Blüten da

                Ok. ich sehe ein, daß ich dringend das Sortiment erweitern muß. Künftig wird es eben mehr Sanddorn geben:

                Aber rausrücken tust du nix ;-(

                Mir ist noch kein Programm bekannt, bei dem du durch Mausklick ein Glas Holunderwein aus deinem Monitor füllen könntest.

                Grüße aus Berlin

                Christoph S.

                --
                Visitenkarte
                ss:| zu:) ls:& fo:) va:) sh:| rl:|
                1. Die Beeren abzuzupfen sieht ja nach richtiger Arbeit aus. Ich werde im Sommer auch gerne zu einem Arbeitseinsatz im Garten bzw. am Küchentisch angefordert, um Johannes- Erd- oder Himbeeren für Marmelade vorzubereiten.

                  Mir ist noch kein Programm bekannt, bei dem du durch Mausklick ein Glas Holunderwein aus deinem Monitor füllen könntest.

                  Och, vielleicht genügt schon etwas Einbildungkraft und heftiges nuckeln an der Maus? ;-)

                  vg Bud

                  1. hallo Bud,

                    Ich werde im Sommer auch gerne zu einem Arbeitseinsatz im Garten bzw. am Küchentisch angefordert, um Johannes- Erd- oder Himbeeren für Marmelade vorzubereiten.

                    Naja, was ich verarbeite, stammt aber nicht aus dem Garten, sondern von solchen Gegenden:

                    Mir ist noch kein Programm bekannt, bei dem du durch Mausklick ein Glas Holunderwein aus deinem Monitor füllen könntest.
                    Och, vielleicht genügt schon etwas Einbildungkraft und heftiges nuckeln an der Maus? ;-)

                    Probiers doch einfach aus!

                    Grüße aus Berlin

                    Christoph S.

                    --
                    Visitenkarte
                    ss:| zu:) ls:& fo:) va:) sh:| rl:|
  3. Herzlichen Dank, Orlando.