Kleines How-To: SVG verstehen
3. Oktober 2010 um 03:22 | Veröffentlicht in HTML, Programmieren, Ubuntuusers, Webentwicklung | 3 KommentareSeit das W3C vor neun Jahren die erste Spezifikation herausgab hat sich die Skalierbare VektorGrafik gut entwickelt und ist heute sehr populär. Viele Browser können SVG nativ darstellen, auf der Wikipedia ist es neben PNG das populärste Format für Grafiken und die Icons der grafischen Linux-Oberflächen liefern neben PNGs in diversen Auflösungen auch SVG-Versionen mit. Was ist aber nun der Vorteil von SVG? Warum verwendet man es überhaupt? Auf den Punkt bringen es zwei Argumente: SVG ist 1.) skalierbar, das heißt man kann es beliebig vergrößern und verkleinern ohne Qualitätseinbußen akzeptieren zu müssen (sprich: es verpixelt nicht) und man kann es 2.) in jedem Texteditor bearbeiten.
Hä? Eine Grafik in einem Texteditor bearbeiten? Wirken die Magic Mushrooms von Weihnachten noch nach? Nein. Wo ein handelsübliches PNG etwa diese Form annimmt wenn es in einem Texteditor geöffnet wird:
Anfang eines PNG in Kate geöffnet.
erwartet den interessierten Betrachter bei z.B. diesem Bild:
Quelle: http://commons.wikimedia.org/wiki/File:Mahuri.svg Lizenz:cc-by
dieser Text:
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svgxmlns:svg="http://www.w3.org/2000/svg"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"version="1.0"width="920"height="1060"id="svg2">
<defsid="defs4">
<linearGradientid="linearGradient15295">
<stopid="stop15297"style="stop-color:#ffffff;stop-opacity:0"offset="0" />
...
</svg>
Dieses Bild ist gleichsam ein Beispiel was mit SVG möglich ist. Es wurde mit Inkscape erstellt und ist wie man sich denken kann ungleich komplexer als ein einfaches Logo. Wie man in der ersten Zeile lesen kann, ist SVG eine Anwendung von XML. In XML-Schreibweise kann man Linien, Kreise, Rechtecke und freie Linien, Farbverläufe, Transparenzen und vieles mehr beschreiben und Text und Rastergrafiken einbinden. Der Text wird dann von einem Interpreter (z.B. einen Webbrowser) Zeile für Zeile gelesen und dargestellt. Die jeweils letzte Zeile wird also zu oberst gezeichnet. Da dies alles sehr viel auf einmal ist soll hier der Aufbau eines SVGs von Grund auf beschrieben werden.
Grundlagen
Ein einfaches SVG, ohne jeglichen Inhalt erzeugt man mit den folgenden Zeilen:
<?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">
</svg>
Diesen Teil kann man 1:1 übernehmen. Dabei wird festgelegt, dass sich das Dokument am die Version 1.0 des XML-Standards hält. Die Zeichenkodierung ist UTF-8 und der SVG-Code hält sich an SVG 1.1. In den Beispielen lasse ich die XML-Deklaration weg, du kannst davon ausgehen, dass sie dort ident mit mit dieser ist.
Bildfläche
Zuerst wollen wir einmal die Fläche erzeugen auf der das Bild später gezeichnet wird. Dazu geben wir die Größe dieser Fläche an:
<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="300px" height="300px">
...
</svg>
Dies erzeugt eine Fläche der Größe 300x300px.
Die Fläche ist noch durch nichts ausgefüllt. Um eine einheitliche hintergrundfarbe zu erzeugen kann man ein Rechteck mit derselben Größe wie die Bildfläche erzeugen:
<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="300px" height="300px">
<rect x="0px" y="0px" width="300px" height="300px" fill="white" />
</svg>
Der Tag <rect> erzeugt ein Rechteck welches 0 Pixel Breite (x="0px") und 0 Pixel Höhe (y="0px") startet und eine sowohl eine Breite als auch eine Höhe von 300 Pixel hat. Die Füllfarbe ist weiß (fill="white"). Der Nullpunkt (0px Breite, 0px Höhe) liegt in der linken oberen Ecke. Von hier aus starten alle Berechnungen. Relative Entfernungen sind in Arbeit, aber noch nicht verfügbar. Da dies aber noch nicht alles war was das Tag <rect> zu bieten hat widmen wir ihm einen eigenen Punkt.
Rechtecke
Wie schon gezeigt wird ein Rechteck gezeichnet indem das Tag <rect> eingesetzt wird. Innerhalb dieses Rechtecks werden dann die Eigenschaften des Rechtecks festgelegt. Zuerst sollte man bestimmen wo das Rechteck beginnt. Setzen wir deshalb ein neues Rechteck auf unsere bestehende Bildfläche:
<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="300px" height="300px">
<rect x="0px" y="0px" width="300px" height="300px" fill="white" />
<rect x="25px" y="25px" width="250px" height="250px" fill="grey" />
</svg>
Dieses zweite Rechteck beginnt nun 25px weiter rechts und 25px weiter unten als die Bildfläche und erstreckt sich über eine Fläche von 250px in Breite und Höhe. Dem aufmerksamen Rechner wird auffallen, das dies das Rechteck genau zentriert, mit jeweils 25px Abstand zum Rand. Um es vom ersten Rechteck zu unterscheiden habe ich es grau eingefärbt. Und so sieht es zur Zeit aus:
Wir wollen nun dem Rechteck eine Randlinie verpassen. Dazu ändern wir die Zeile zu:
<rect x="25px" y="25px" width="250px" height="250px" fill="grey" stroke="grey" stroke-width="1px" />
Dies erzeugt eine Linie um das graue Rechteck mit einer Stärke von einem Pixel. Da jedoch Rechteck und Linie die gleiche Farbe haben, kann man sie nicht von einander unterscheiden. Deshalb wollen wir uns einmal kurz Farben näher ansehen.
Farben
Wie bereits gezeigt kann man Farben ganz einfach über ihren (englischen) Namen ansprechen. Eine Liste der benannten Farben findest du hier. Ein einfaches Beispiel:
fill="blue"
füllt eine Fläche mit der Farbe Blau:
Wer lieber die Art und Weise verwendet mit der HTML Farben definiert kann auch diese verwenden:
fill="#FF0000"
oder
fill="#F00"
füllt dieselbe Fläche mit der Farbe Rot:
Zum Schluss kann man noch mit RGB-Farbangaben arbeiten. So ergibt
fill="rgb(0, 255, 0)"
oder
fill="rgb(0%, 100%, 0%)"
folgendes Bild:
Wollen wir nun unser Beispiel so anpassen, dass sich Fläche und Rand von einander abheben so kann der Code so lauten:
<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="300px" height="300px">
<rect x="0px" y="0px" width="300px" height="300px" fill="white" />
<rect x="25px" y="25px" width="250px" height="250px" fill="rgb(200, 200, 200)" stroke="rgb(75, 75, 75)" stroke-width="1px" />
</svg>
Dies erzeugt ein hellgraues Rechteck mit dunkelgrauem Rand:
Linien
Linien in SVG sind etwas sehr leichtes. Sie bestehen aus einem Anfangspunkt, beschrieben durch Breite und Höhe, genauso wie einem Endpunkt. Außerdem können Sie Farbe, Stärke und Transparenz haben. Wenn wir folgendes zu unserem Beispiel hinzufügen:
<line x1="150px" y1="25px" x2="150px" y2="275px" stroke="rgb(75, 75, 75)" stroke-width="0.5px" />
<line x1="25px" y1="150px" x2="275px" y2="150px" stroke="rgb(75, 75, 75)" stroke-width="0.5px" />
erzeugt dies zwei sich kreuzende Linien innerhalb des grauen Rechtecks:
Kreise
Ein Kreis kann all die bisherigen Gestaltungselemente beinhalten. Definiert wird der Kreis über einen Mittelpunkt und einen Radius:
<circle cx="87.5px" cy="87.5px" r="10px" fill="rgb(200, 175, 0)" stroke="rgb(120, 40, 0)" stroke-width="2px" /><circle cx="212.5px" cy="87.5px" r="20px" fill="rgb(100, 255, 150)" stroke="rgb(40, 180, 100)" stroke-width="2px" /><circle cx="87.5px" cy="212.5px" r="30px" fill="rgb(150, 100, 255)" stroke="rgb(100, 40, 180)" stroke-width="2px" />
Fügst du diese Zeilen zum Beispiel hinzu erhältst du dieses Bild:
Text
Auch Text kann ganz einfach hinzugefügt werden:
<text x="212.5px" y="222.5px" font-size="20px" font-style="italic" font-weight="bold" fill="white" text-anchor="middle" stroke="rgb(40, 40, 255)">SVG</text>
Man beachte, dass wie bei HTML das <text>-Tag aus zwei Elementen besteht zwischen denen der eigentliche Text steht. x und y geben die Textposition an. font-size beschreibt die Höhe des Textes in Pixel (das sind dieselben Werte wie sie aus Textverarbeitungsprogrammen wie OOo Writer oder MS Word bekannt sind), font-style den Stil der Schriftart, font-weight die Schwere der Schrift und text-anchor die Ausrichtung. fill und stroke sind ja bereits bekannt. Fügt man die obige Zeile zum Beispiel hinzu erhält man folgendes Bild:
Hier noch einmal der vollständige Code des letzten Beispiels:
<?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">
<rect x="0px" y="0px" width="300px" height="300px" fill="white" />
<rect x="25px" y="25px" width="250px" height="250px" fill="rgb(200, 200, 200)" stroke="rgb(75, 75, 75)" stroke-width="1px" />
<line x1="150px" y1="25px" x2="150px" y2="275px" stroke="rgb(75, 75, 75)" stroke-width="0.5px" />
<line x1="25px" y1="150px" x2="275px" y2="150px" stroke="rgb(75, 75, 75)" stroke-width="0.5px" />
<circle cx="87.5px" cy="87.5px" r="10px" fill="rgb(200, 175, 0)" stroke="rgb(120, 40, 0)" stroke-width="2px" />
<circle cx="212.5px" cy="87.5px" r="20px" fill="rgb(100, 255, 150)" stroke="rgb(40, 180, 100)" stroke-width="2px" />
<circle cx="87.5px" cy="212.5px" r="30px" fill="rgb(150, 100, 255)" stroke="rgb(100, 40, 180)" stroke-width="2px" />
<text x="212.5px" y="222.5px" font-size="20px" font-style="italic" font-weight="bold" fill="white" text-anchor="middle" stroke="rgb(40, 40, 255)">SVG</text>
</svg>
Natürlich ist es schwierig, wenn nicht gar unmöglich ein Bild wie das anfänglich vorgestellte mit diesen einfachen Werkzeugen herzustellen. Für größere Projekte verwendet man deshalb passende Programme wie Inkscape, die einem die Detailarbeit abnehmen. Manchmal will man jedoch hier und da an kleinen Ecken noch etwas schrauben, und dann ist es von Vorteil wenn man das mit dem man arbeitet zumindest im Ansatz versteht. Viele weitere Werkzeuge stehen einem noch zur Verfügung. Wer sich einen größeren Überblick über die Möglichkeiten von SVG, die Verbindung mit CSS und die Einbettung eines SVGs in HTML-Code verschaffen möchte ist bei http://www.w3schools.com/svg/ gut aufgehoben. Hier werden die einzelnen Elemente von SVG mit Beispielen beschrieben und man kann sich alle möglichen Attribute eines Elements ansehen.
Viel Spaß beim Lernen und Basteln!
edit: An sich war geplant die Bilder direkt als SVG einzubinden, per < embed >-tag. Leider hat mir WordPress hier einen Strich durch die Rechnung gemacht indem es diese Tags einfach zu Links umgewandelt hat. Deshalb liegen die Beispiele als indizierte PNGs vor und verlinken auf die entsprechenden SVGs (für Anschauungszwecke).
This work by Stefan Ohri is licensed under a Creative Commons Attribution-ShareAlike 3.0 Austria License
=-=-=-=-=
Powered by Blogilo
Freiheit im Web und die Codecfrage
21. Mai 2010 um 10:30 | Veröffentlicht in Computer, DRM, Google, HTML, Multimedia, Ubuntuusers | 2 KommentareNach der aufsehenerregenden Ankündigung Googles den Anfang des Jahres gekauften Codec VP8 unter eine OpenSource-Lizenz zu stellen gehen die Emotionen über diesen Schritt hoch. Vor allem die Gegner sehen dadurch einen Angriff auf den schon fast als sicheren Standard für Videos unter HTML5 gesehenen Codec H.264. Selbstverständlich. Google befreit den Codec weil sie wollen, dass er sich verbreitet und zum Standard wird. Manche Stimmen haben sogar von potentiellen U-Boot-Patenten um VP8 gemunkelt und es heißt MPEG LA soll sich, genauso wie gegen OGG, in seinem Patentpool nach Munition für eine Klage umsehen.
Nun will ich nicht alles wieder erzählen. Ich empfehle dir: Lies dir diesen Artikel auf Groklaw(en) durch und bilde dir deine eigene Meinung zu den Geschehnissen um Google, VP8 und der Content-Industrie.
This work by Stefan Ohri is licensed under a Creative Commons Attribution-ShareAlike 3.0 Austria License
=-=-=-=-=
Powered by Blogilo
HTML5 <video> und der Codecstreit [UPDATE 2]
19. Mai 2010 um 20:41 | Veröffentlicht in Computer, GNU/Linux, Google, HTML, Multimedia, Ubuntuusers, Vermischtes | 13 KommentareNach einer kleinen Pause meldet sich der Morgenblog wieder zurück. Zwar nicht wie eigentlich geplant mit praktischen Hinweisen zu einem bestimmten Thema, aber mit einer philosophischen Frage zu aktuellen Ereignissen.
Vorgeschichte
Seit der Ankündigung, dass HTML5 native Möglichkeiten mitbringen wird Video- und Audio-Dateien abzuspielen war das Gerate und Gerangel um einen einheitlichen Codec absehbar. Viele Stimmen erhoben sich um mindestens ebensoviele würdige Vertreter des Codec-Clans lobend zu erwähnen, nur um dann in der Versenkung der Nichtbeachtung zu versinken. Übrig blieben am Ende – so schien es – nur zwei Videoformate: OGG und H.264. Wo die einen H.264 (MPEG-4 Part 10) dafür kritisierten, dass in absehbarer Zeit Lizenzkosten für den Codec anfallen würden warnten die anderen vor sogenannten U-Boot-Patenten bei OGG. U-Boot-Patente sind Patente die bei der Implementierung eines Standards eine Rolle spielen, aber niemand weiß, dass es sich dabei um eine patentierte Technik handelt. Und wie ein Schiff, dass in die Torpedoreichweite eines feindlichen U-Boots kommt werden sich die (vermeintlichen) Patentinhaber erst zu Wort melden wenn der Codec Verbreitung gefunden hat und Geld zu holen ist. Im Gegensatz zu einem Verfahren bei dem man den Patentinhaber kennt (H.264) ist es ungleich schwerer zu sagen ob überhaupt ein Patentanspruch besteht wenn ein Produkt von einer Unzahl von Firmen kreiert und mitentwickelt wurde (OGG).
OGG wird sich übrigens in Firefox und Opera finden, welche beide für alle bekannten Systeme verfügbar sind. Fast schon bezeichnender Weise sind der Großteil der H.264-Befürworter selbst Vertreter von proprietärer Software: Internet Explorer und Safari werden H.264 implementieren. Und zur Zeit schaut es so aus als ob sie zusammen mit Chrome (der übrigens beides kann) auf der richtigen Seite stünden: wichtige Videoportale wie YouTube verbreiten ihre Videos neben dem FLV-Format vor allem bei höher auflösenden Clips im H.264-Format mit der Endung *.mp4.
So ist also das Problem, dass beide Kandidaten für einen Einheitlichen Standard für das <video>-Tag in HTML5 bereits vor dessen Verabschiedung ins Kreuzfeuer der Kritik geraten und sich zwei Lager gespalten haben die, einerseits aus berechtigten Gründen, andererseits in auch nicht ganz unberechtigter was-wäre-wenn Manier den jeweils anderen Codec ablehnen. Als Befürworter freier Software stehe ich natürlich zu OGG, auch wenn technische Gründe, Verbreitung und potentielle Patentprobleme für H.264 sprächen. Allerdings kann ich der Logik, dass bloß weil die Alternative möglicherweise mit Patenten belastet sein könnte ich einen Codec wählen soll, der ganz sicher mit Patenten belastet ist nicht wirklich folgen.
Durch die Entscheidungen der Browserhersteller ist es unter Linux bisher nur mit Add-Ons möglich H.264 mit HTML5 im Browser zu nutzen. OGG ist hier wesentlich stärker verbreitet.
Google VP8
Mit der Ankündigung Googles den im Frühjahr erworbenen Codec VP8, der selbst große Ähnlichkeiten mit H.264 hat, unter eine Lizenz zu stellen die das Produkt quasi zu Open-Source macht ist nun ein dritter und sehr aussichtsreicher Kandidat auf der Bühne des mit-mach-Web erschienen. Bei YouTube soll bereits hinter verschlossenen Türen an der Umkodierung von Videos begonnen worden sein und die aktuellen Entwicklerversionen von Firefox, Opera und Chromium sollen bereits mit dem neuen Format umgehen können. Neben dem Open-Source-Argument spricht auch die künftige Verbreitung via YouTube und sicherlich anderen großen Portalen für VP8. Auch wenn dieser wie Kritiker sagen etwas weniger Performance verspricht als H.264, was vor allem bei HD-Videos natürlich ein gewichtiges Argument ist, und ebenfalls U-Boot-Patente auf Grund der Ähnlichkeiten mit eben diesem bestehen könnten, so ist er doch eine interessante Alternative.
Es ist aber auch interessant zu beobachten wie Google die modernen Technologien beobachtet und dann versucht es mit einem eigenen Produkt besser zu machen und wegen der eigenen Muskelkraft auch mehr Erfolg hat (Android, Chrome, GMail). Android ist im Grunde ein Linux-Distribution welche sich trotz seiner jungen Jahre bereits in die Welt der Smartphones und kleinen Computer geschlichen hat. Chrome hat zwar nach offiziellen Statistiken einen recht kleinen Anteil am Browser-Kuchen, versucht aber doch mal einen Computer zu finden auf der er nicht installiert ist. Und GMail ist seit Jahren der Kult-eMail-Provider schlechthin und es werden wohl mehr Leute sagen, sie hätten kein Facebook-Konto, als, dass sie keinen GMail-Account besäßen.
Ich begrüße also Googles Entscheidung im Streit um den am besten geeigneten einheitlichen Codec für HTML5<video> etwas beizutragen. Sollte der Druck auf MS und Apple durch YouTube & Co. groß genug sein, dass VP8 auch in Internet Explorer und Safari integriert wird, so wird VP8 wohl aller Voraussicht nach das Rennen machen und der defacto-Standard des neuen Web werden.
[UPDATE]
In its HTML5 support, IE9 will support playback of H.264 video as well as VP8 video when the user has installed a VP8 codec on Windows.
Auf diesen Satz vom WindowsTeamBlog hat mich Kellner aufmerksam gemacht. Danach soll der VP8 auch vom IE9 neben H.264 unterstützt werden. Allerdings scheinbar nicht nativ. Der IE9 soll auf einen im System installierten Codec zurückgreifen können. Die Frage ist nun warum die Unterstützung nicht nativ daherkommt? Das Verwenden eines am System installierten Codecs entspricht meiner Ansicht nach dem Installieren eines Add-Ons um H.264 mit Firefox nutzen zu können.
Ich wurde im Übrigen von Lord_Pinhead darauf hingewiesen, dass im Gegensatz zu H.264 es sich bei OGG nicht um einen Codec handelt sondern nur um das Container-Format. Das ist richtig. Die Codecs bei OGG sind Theora für Video und Vorbis für Audio. Das Containerformat für H.264 ist übrigens MP4.
[/UPDATE]
[UPDATE 2]
Laut dem Blog The Register hat sich Steve Jobs per eMail zum Thema VP8 geäußert. Durch einen einfachen Link zu einer Studie, welche die technischen Nachteile von VP8 gegenüber H.264 ausdrückt, stellt sich Apple wohl nach wie vor hinter H.264 und es wird auf absehbare Zeit keine VP8-Unterstützung in Safari geben.
[/UPDATE 2]
Aber das ist selbstverständlich nur meine Einschätzung. Was denkst du? Wie wahrscheinlich ist es, dass sich VP8 durchsetzt? Ist H.264 durch die 60% Marktanteil des IE bereits Sieger? Wird Japan die WM gewinnen? Oder ist es wahrscheinlich, dass sich ein weiterer Kandidat in den Ring wirft und die Karten neu verteilt?
This work by Stefan Ohri is licensed under a Creative Commons Attribution-ShareAlike 3.0 Austria License
=-=-=-=-=
Powered by Blogilo
Lizenz
Alle Inhalte dieses Blogs stehen (wenn nicht anders angegeben) unter der Creative-Commons Share-Alike-License 3.0 mit Namensnennung:
Erstelle kostenlos eine Website oder ein Blog auf WordPress.com.
Entries und Kommentare feeds.
Taach! - Der Morgenblog 
