0251 / 590 837 15

SVG in HTML5

HTML5 Auto mit SVG

Mit SVG kannst du vektorbasierende Grafiken erstellen. Das bedeuetet, dass Du ohne Qualitätserlust in die Grafik hereinzommen kannst. Diese Funktion ist Teil von HTML5 und wird bereits im IE 9 unterstützt. Als kleines Beispiel möchte ich heute mit dir ein Auto zeichenen – nur mit Html!

Zu nächst einmal brauchst du das Grundgerüst mit HTML5 Doctype. Das sieht so aus:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml/">
  <head>
    <title>Html5 Auto</title>
    <meta charset="UTF-8" />
  </head>
  <body>

  </body>
</html>

Um das Zeichnen zu beginnen, musst du als Erstes ein umschließendes SVG-Tag erstellen. Darin kommen dann die einzelnen Figuren, die Du zeichnen möchtest:

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

</svg>

Als nächstes Zeichnen wir mit dem Rect-Tag drei Rechtecke. Das geht so:

<rect x="30"  y="90" height="40" width="70"  style="fill:#ff0000;" />
<rect x="270" y="90" height="40" width="70"  style="fill:#ff0000;" />
<rect x="100" y="50" height="80" width="170" style="fill:#ff0000;" />

Zunächst setzt Du mit x und y die Position der Rechtecke. Mit Height und Width kannst du die Größe angeben. Zu guter letzt füllen wir mit Hilfe von CSS alle Rechtecke rot. Als Ergebnis kommt folgendes dabei heraus:

Html5 Auto Basis

Html5 Auto Basis

Damit Du auch gleich losfahren kannst, braucht Dein Auto noch 2 Reifen. Was machen wir da? Zwei Kreise!

<circle cx="100" cy="130" r="25" style="fill:#000000;"/>
<circle cx="270" cy="130" r="25" style="fill:#000000;"/>

Diesmal gibst Du mit xc und cy die Position des Mittelpunktes an. Die Breite gibst du mit r an und da r für Radius steht, musst du diese durch zwei rechnen. Dein Auto sollte nun so aussehen:

Auto mit Rädern

Auto mit Rädern

Da du jetzt losfahren kannst, ist hier schonmal der komplette Code des Autos:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml/">
  <head>
    <title>Html5 Auto</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg">
      <rect x="30" y="90" height="40" width="70"
      style="fill:#ff0000;" />
      <rect x="270" y="90" height="40" width="70"
      style="fill:#ff0000;" />
      <rect x="100" y="50" height="80" width="170"
      style="fill:#ff0000;" />
      <circle cx="100" cy="130" r="25"
      style="fill:#000000;"/>
      <circle cx="270" cy="130" r="25"
      style="fill:#000000;"/>
    </svg>
  </body>
</html>

So ein Auto würde leider nicht durch den TÜV kommen, denn dir fehlt Licht! Dies machen wir über 3 Linien. Mit dem Tag g können wir einzelne Formen gruppieren. Das ist bei Linien (zumindest im IE9) Pflicht. Im g selbst kann bereits die Farbe angegeben werden (auf Englisch), so dass wir kein CSS benötigen. Die Linien selbst bekommen je 2 Koordinaten zugewiesen. Zwischen ihnen wird die Linie gezogen. Mit stroke-width kannst Du die Breite bestimmen:

<g stroke="yellow" >
  <line x1="345" y1="100" x2="370" y2="90"
  stroke-width="2"  />
  <line x1="345" y1="110" x2="370" y2="110"
  stroke-width="2"  />
  <line x1="345" y1="120" x2="370" y2="130"
  stroke-width="2"  />
</g>

Und auch im Screenshot kommt licht ins Spiel:

Es werde Licht

Es werde Licht

Findest Du das Auto nicht auch noch etwas zu eckig? Dann ersetzten wir jetzt unsere Rechtrecke durch ein Polygon. Das bedeutet, wir können Punkte angeben, die die Eckpunkte unserer Fläche bestimmen. Die Mitte wird dann wieder rot gefüllt. Denke daran, dass die das Polygon nach oben gehört, da sonst die Reifen in den Hintergrund geraten:

    <svg xmlns="http://www.w3.org/2000/svg">
      <polyline fill="red" points="30,90 30,130 340,130 340,90 270,90 245,50 125,50 100,90" />
      <circle fill="black" cx="100" cy="130" r="25" />
      <circle fill="black" cx="270" cy="130" r="25" />
      <g stroke="yellow" >
        <line x1="345" y1="100" x2="370" y2="90"
        stroke-width="2"  />
        <line x1="345" y1="110" x2="370" y2="110"
        stroke-width="2"  />
        <line x1="345" y1="120" x2="370" y2="130"
        stroke-width="2"  />
      </g>
    </svg>

Mit dem Punkt polyline beginnen wir unser Polygon. Mit fill kannst du die Farbe deines Autos bestimmen. Ich habe auch an allen anderen Stellen das CSS durch das Fill-Attribut ersetzt, so dass unser Auto jetzt wirklich nur aus Html besteht. In den points gibst du die einzelnen Positionen an.
Das Auto sieht jetzt so aus:

Das Auto in neuer Form

Das Auto in neuer Form

Ich würde sagen, an dieser Stelle kannst Du dein Auto weiterentwickeln, das nötige Wissen hast du ja jetzt. Wenn Du fertig bist, kannst Du dein Auto gerne in den Kommentaren vorstellen. Wenn das mehrere Leute machen, bau ich für euch einen Parkplatz 😉

Was du jetzt mal machen kannst, ist in deinem Browser mit dem Zoom spielen: Die Form des Autos bleibt immer gleich! Weitere Infos zu SVG bekommst du hier: http://www.w3.org/TR/SVGTiny12/

Kommentare

Besucher schrieb am 20.09.2010:

Was hat SVG mit HTML5 zu tun? SVG gibt es seit Ewigkeiten - genau wie XHTML ist es eine Untermenge von XML. Wenn du dir anschaust, wie bei den unterschiedlichen Browsern SVG unterstützt wird, wird dir schnell klar, dass jeder Browser ein anderes Subset SVG unterstützt - und man damit leider kaum sinnvoll arbeiten kann. Wenn alle Browser vollen SVG Support haben und dann auch noch 10 Jahre vergangen sind bis alle einen Browser mit SVG Support haben, dann kann man SVG endlich sinnvoll benutzen. Also vielleicht in 15 Jahren. HTML5 hat damit nichts zu tun.

affe schrieb am 20.09.2010:

schließe mich meinem vorredner an alter hut

osc schrieb am 22.09.2010:

Zwar ein alter Hut, aber ich versuch einfach mal, den Autor zu verstehen. SVG mit XML war nie ein Problem, aber mit reinem HTML schon. Vielleicht will er darauf hinaus.

Stefan Wienströer schrieb am 22.09.2010:

Recht habt ihr alle.

Paul schrieb am 19.01.2011:

Wieder jemand, der auf jeden Buss aufspringt, der gerade vorbeifährt. Fehlt nur noch ein Artikel zu Canvas oder noch besser . Ja, marquee wird html5-Standard

Mike schrieb am 12.03.2011:

Lest doch bitte mal die Spec bei W3C richtig durch.

Lala schrieb am 10.06.2011:

SVG gibt es in der Tat schon länger, aber inline-SVGs erst ab HTML5. Das heißt: für 5 Kreisvarianten muss man keine 5 externen SVGs erstellen, sondern erledigt das durch schnödes Javascript. FF4, IE9 und Chrome machen da schon mit, Opera11 versagt noch kläglich.

Jazmin schrieb am 23.01.2013:

Hi, blöde Frage, der Blogeintrag sit ja auch schon älter aber wie kann ich das obige Grundgerüst bearbeiten sodass ich gleich die Veränderung sehe? Ich weiß, Inkscape bspw. ist ja für die Erstellung von SVG Sachen geeignet, aber wie kann ich denn Text dort einfügen und dann wieder als svg abspeichern. Sorry dass ich ich so anstelle ;)

Stefan Wienströer schrieb am 24.01.2013:

Hallo Jazmin, dort basiert das auf Dateien (.svg). Bastel dir dort einfach mal etwas kleineres und speichere es als solche Datei. Dann kannst du diese über Notepad++ oder zur Not auch im Editor von Windows öffnen. Darin enthalten ist dann der Inhalt. Andersherum kannst du diesen dann mit dem Inhalt von uns darein schreiben und im Inkskape öffnen. Gruß Stefan