Ankündigung

Einklappen
Keine Ankündigung bisher.

Was ist Sache mit SVG

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 2
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige 1 2 Weiter
  • #1

    Was ist Sache mit SVG

    Hi

    Hatte gestern mal ein bischen Zeit, mir Alternativen, Weiteres etc. anzusehen und bin dabei auf SVG gestossen.

    Eine Abfrage bei Amazon zeigt: Es gibt nur eine Handvoll Bücher zum Thema, die inzwischen auch schon wieder verhältnismäßig betagt sind.

    Ein Test hat gezeigt, dass IE 7 ohne Adobe Plugin nicht SVG-fähig ist,
    Firefox 2 anscheineind auch keinen SVG-Support bietet. Lediglich Opera 9.2.7 scheint hier auf beide Methoden embed und object reagieren zu können.

    Also, ist das jetzt 'ne Totgeburt, oder einfach noch zu früh, lohnt sich das nicht wegen der Fähigkeiten zukünftiger CSS Versionen, oeder was?
    Stichworte: -
  • #2
    Ich glaube es ist einfach noch zu früh für SVG's.
    Aber das kommt bestimmt noch, irgendwann nimmt die Sache Fahrt auf.

    Kommentar

    • #3
      Firefox hat SVG-Unterstützung. Der einzige mir bekannte Browser, der es nicht hat, ist IE (und natürlich Lynx und Konsorten. ).

      Kommentar

      • #4
        Firefox?! Welche Version?

        Hi

        Folgendes funktioniert im Firefox 2 nicht.

        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 
 <title>Untitled 3</title>
</head>
<body>
<embed src="triangle.svg" width="300" height="300" type="image/svg+xml" />
    
<object data="triangle.svg" width="300" height="300" type="image/svg+xml">
</object>

</body>
</html>
        Hier die SVG Datei.

        Code:
        <?xml version="1.0" encoding="iso-8859-1" standalone="no"?>
<!DOCTYPE svg>
<svg width="300px" height="300px">
 <rect id="BGCOLOR" style="fill:#ffffff" width="300" height="300"/>
 <path d="m 148 50l 93 186 -186 0 93 -186 z" id="PATH1" style="fill:#ff0000;fill-rule:evenodd"/>
</svg>
        IE 7 mit Adobe Plugin zeigt das embed Element an. Opera zeigt beide an.
        Firefox zeigt nur die XML Notation mit Verweis auf fehlende Stilanweisungen. Wo hat der Firefox den da jetzt sein Problem? Oder bin ich etwa das Problem?

        Kommentar

        • #5
          Zuletzt geändert von Manko10; 21.09.2008, 18:10.
          Du muss auch eine vernünftige SVG-Datei nehmen (die du übrigens auch so direkt im Firefox / Opera öffnen kannst):
          Code:
          <?xml version="1.0" encoding="utf-8"?>
<!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"
     xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
     version="1.1" baseProfile="full"
     width="800mm" height="600mm">
 
    <rect x="100" y="100" width="100" height="200" />
</svg>
          Die (X)HTML-Datei sieht dann so aus:
          Code:
          <!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">
<head>
    <title>SVG-Test</title>
</head>
<body>
    <div>
        <object data="test.svg" type="image/svg+xml">
            <param name="src" value="test.svg" />
            Ihr Browser kann das Objekt leider nicht anzeigen!
        </object>
    </div>
</body>
</html>
          Übrigens kannst du das X, das für Extensible steht, auch nutzen und deine SV-Grafik direkt in den XHTML-Code einbetten:
          PHP-Code:
          <?php
          header          ('Content-type: application/xhtml+xml');
          ?>
          <!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">
          <head>
              <title>SVG-Test</title>
          </head>
          <body>
              <div>
                  <svg xmlns="http://www.w3.org/2000/svg"
                       xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
                       version="1.1" baseProfile="full"
                       width="800mm" height="600mm">
                   
                      <rect x="100" y="100" width="100" height="200" />
                   </svg>
              </div>
          </body>
          </html>

          Kommentar

          • #6
            Super Antwort

            Hi Manko10

            Sieht so aus, als wüßtest Du, was ich sonst noch für Fragen habe.

            Das mit der direkten Einbettung hatte ich mich tatsächlich schon gefragt, wollte aber erst mal der Reihe nach das SVG Thema abklopfen.

            Deinen Code habe ich zwar jetzt nicht gestetet, gehe aber davon aus, dass der in Firefox funktioniert.

            Mein SVG ist ein Export von Ulead PhotoImpact. Produziert das Programm jetzt Schrott oder allzu Fortgeschrittenes?

            Ich nehme an, ein Dreieck - wie in meinem Beispiel - schafft der Firefox auch noch, oder

            Wo wir schon mal dabei sind: Wie stehen denn die Chancen, die SVG-Anzeige dynamisch per JavaScript zu verändern. Also, z. B. ein Dreieck, das bei Bewegung eines Sliders rotiert? Oder gar 3D-Objekte...

            Kommentar

            • #7
              Ich habe es jetzt nicht ausprobiert, aber wenn du den SVG-Code direkt in den Code schreibst, dann solltest du ihn eigentlich über das DOM manipulieren können. Weiß allerdings nicht, wie weit die Browser da sind.
              Auch solltest du beachten, dass für das Funktionieren der Grafik der korrekte Content-Type application/xhtml-xml erforderlich ist, der vom Server gesetzt werden muss. Somit ist der IE von vornherein ausgeschlossen (dass er von sich aus kein SVG kann ist somit auch egal). Sonst bekommst du nur deine HTML-Seite und an der SVG-Stelle Whitespace.

              Der Code von dir war etwas zu minimalistisch gestaltet (vergl. mit meinem Code). Für SVG-Grafiken würde ich auch immer Inkscape nehmen. Das ist nicht nur OpenSource, es produziert auch vernünftigen SVG-Code, den jeder SVG-fähige Browser (inkl. Firefox verstehen kann).

              Kommentar

              • #8
                Danke an Manko10

                Das mit dem DOM hatte ich mir auch schon gedacht, deswegen auch die Frage nach dem direkten Einbetten. Ich werde das dann wohl mal antesten, ob die heutigen Browser das draufhaben.

                Deinen header Tip hebe ich mir gut auf. Inkscape wird gleich runtergesaugt.

                Tja, und falls ich dann noch Fragen habe, weiß ich ja, wo ich Dich finden kann....

                Kommentar

                • #9
                  Google benutzt schon lange SVG und hat für den IE eine Kompatibilitätsbibliothek geschrieben.

                  Kommentar

                  • #10
                    Firefox hat ne ca. 80% Umsetzung des vollen SVG-Funktions-Umfangs.
                    IE nur mit Adobe Plugin aber auch nicht 100% ka wie viel genau.
                    Der einzigste Browser der volle 100% SVG Unterstützung hat ist der Opera was mich selbst ein wening verwundert aber naja

                    Kommentar

                    • #11
                      Die größeren Javascript Frameworks können übrigens alle SVG ...

                      Kommentar

                      • #12
                        Wem kann man denn dann svg content anbieten

                        Hi nochmal und vielen Dank für alle Antworten,

                        aktuell ist ja noch der IE weit vorne in Bezug auf Verbreitung.

                        Wer also IE hat, muss halt erst mal den Adobe Viewer installieren, zulassen etc.

                        Wenn man jetzt vorwiegend User hat die wenig computermäßig versiert sind, muss man doch zwangsläufig auf SVG verzichten, oder sehe ich das
                        zu negativ?

                        Gruss

                        Kommentar

                        • #13
                          Oder du benutzt eine der bereits erwähnten Kompatibilitäts-Bibliotheken. Nicht das Gelbe vom Ei, aber vielleicht besser als nichts.

                          Kommentar

                          • #14
                            Das google Teil funktioniert super!

                            Kommentar

                            • #15
                              @Manko10: Schön und gut mit der direkten Implementierung, aber leider ist es dann vorbei mit der XHTML-Validität

                              Kommentar

                              Vorherige 1 2 Weiter
                              Lädt...
                              X