SVG/Tutorials/Standalone-SVGs

Aus SELFHTML-Wiki
< SVG‎ | Tutorials
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
15min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
Einstieg in SVG


Mit SVG erstellte Grafiken sind in erster Linie grafische Daten in Textform, die dann als eigenständige Datei (standalone) abgespeichert werden. Die empfohlene Dateiendung ist .svg oder, wenn die Datei mit gzip komprimiert ist, .svgz. Der MIME-Type ist image/svg+xml.

Dieses Tutorial zeigt Ihnen, wie Sie solche Standalone-Grafiken auch ohne Grafikprogramm erstellen können.

Vorüberlegungen[Bearbeiten]

Warum ein alleinstehendes SVG-Dokument?[Bearbeiten]

Analog zur Trennung Trennung von Inhalt und Design kann hier von einer Trennung von Text-Inhalt und Grafik gesprochen werden. Inhaltlich für sich abgeschlossene Grafiken können als einzelne SVG-Dokumente erstellt und gespeichert werden.

Für kompliziertere Arbeitsschritte kann die Datei auch in Grafikprogrammen geöffnet und bearbeitet werden.

Diese Textdateien können Sie dann in einem Browser aufrufen oder mit dem img- oder object-Element als externe Grafiken in Webseiten einbinden.

Warum ohne Frickl?[Bearbeiten]

Unser Frickl-Editor arbeitet nur mit HTML-Seiten. Deshalb sollten Sie die hier vorgestellten Code-Beispiele in Ihren Editor kopieren und dort arbeiten.

Grundgerüst[Bearbeiten]

SVG ist ein XML-Dialekt. Deshalb verwenden Grafikprogramme wie Inkscape oder Adobe Illustrator als Grundgerüst häufig sowohl eine XML-Deklaration im Prolog als auch eine Dokumenttyp-Deklaration (DTD) vor dem svg-Wurzelement.

<?xml version="1.0" encoding="utf-8" standalone="yes"? >
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" "http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-styleable.dtd">
<svg version="2" xmlns="http://www.w3.org/2000/svg">
 ... 
</svg>

Da der Standardwert eines SVG-Dokuments utf-8 ist, kann die XML-Deklaration weggelassen werden. Auch auf die Angabe eines Doctypes kann in SVG2 verzichtet werden!

Beachten Sie: Eine fehlende oder fehlerhafte Zeichenkodierung führt dazu, dass das SVG-Dokument bei Umlauten aufgrund eines Fehlers nicht gerendert wird.

Namensraumangabe[Bearbeiten]

Das SVG-Tag wird durch eine Angabe eines Namensraums erweitert. Mit dem Attribut xmlns wird festgelegt, welcher XML-Dialekt vom Browser interpretiert werden soll. So könnte es in einer Webseite, die aus XHTML und SVG besteht, zu Namenskonflikten kommen, da beide ein a-Element als Verweis kennen.

Namensraumdeklaration
<svg version="2"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

 <!-- Inhalt -->

</svg>

Im Beispiel werden im svg-Wurzelelement zwei Namensräume eingebunden:

  • xmlns="http://www.w3.org/2000/svg" ist der Standardnamensraum für SVG
  • xmlns:xlink="http://www.w3.org/1999/xlink": Da XML/XLink ein eigener Dialekt ist, muss auch hierfür ein Namensraum angegeben werden.
    Beachten Sie: Diese Namensraumangabe ist nicht nur für externe Links, sondern auch für das Referenzieren von Verläufen, Mustern und Beschneidungen nötig.
Empfehlung: In HTML5-Dokumenten (siehe: SVG in HTML) können Sie die Angabe eines Namensraums weglassen.

Einbindung externer Stylesheets[Bearbeiten]

Weiterhin können Sie externe Stylesheets genau so wie in HTML-Seiten auch in XML-Dokumente einbinden.

Einbindung eines XML-Stylesheets
<?xml version="1.0" standalone="no"?>

<?xml-stylesheet href="style.css" type="text/css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

</svg>

Laterne, Sonne, Mond und Sterne[Bearbeiten]

Nun wollen wir ein SVG selbst zeichnen


Das Grundgerüst[Bearbeiten]

Dieses SVG-Dokument braucht wie jedes Andere ein Grundgerüst. Dieses sieht so aus:

<svg 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="790" 
  height="230" 
  viewBox="0 0 790 230"
>
</svg>

Das <svg>-Wurzelelement enthält weitere Informationen:

  • Die zwei Namensräume
  • Die Breite und Höhe des SVG-Dokuments.
    (Rastergrafiken haben eine interne Größe, die in den Metadaten festgelegt ist. SVGs können mit dieser Breite etwas Ähnliches erhalten, können dann aber von CSS oder dem width-Attribut des img-Elements weiter skaliert werden.)
    Ohne Breiten- und Höhenangabe würde sich das SVG auf die verfügbaren Platz ausbreiten.
  • viewBox-Attribut mit dem Koordinatensystem des SVGs, in diesem Fall von 0|0 bis 790|230
    Dies ist die Leinwand, auf die gezeichnet wird.
Beachten Sie: SVG als HTML-Element ist kein XML und achtet deshalb nicht auf Groß- und Kleinschreibung. In einer Standalone-SVG-Datei ist das anders. Ein häufiger Fehler ist das viewBox-Attribut des SVG-Elements, das man in HTML problemlos als viewbox schreiben kann. Nicht so in einer eigenständigen SVG-Datei.

Der blaue Hintergrund[Bearbeiten]

Als blauen Hintergrund nehmen wir einfach ein Rechteck mit der Breite 100% und der Höhe 100%. Das sieht dann so aus (als SVG-Code):

  <defs>
    <style>
      .background{
        fill: #111133;
      }
    </style>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" class="background"/>

Wir haben ein Rechteck (rect) erstellt, das den Ursprung 0|0 hat und die volle Breite sowie die volle Höhe einnimmt. Außerdem hat dieses Rechteck die Füllfarbe #111133, also dunkelblau. Eine Angabe konnte in CSS notiert werden. Man hätte ein fill-Attribut benutzen können. CSS ist aber empfehlenswerter, weil man in größeren Grafiken immer noch den Überblick behält. Die virtuellen Einheiten (wie Breite, Höhe usw.) sollten aber immer noch in SVG definiert werden, da dies sonst zu Fehlern führen könnte.

Eine Laterne bauen[Bearbeiten]

Im folgenden Abschnitt bauen wir die Laterne, die eigentlich nur aus einem Rechteck (als Körper), einer Linie (als Stange) und einer Ellipse (als Lichtschein) besteht:

  <defs>
    <style>
      .licht{
        fill: #FD0;
      }
      .stecken{
        stroke: #840;
        stroke-width: 10;
      }
      .koerper{
        fill: #F00;
        stroke: #000;
        stroke-width: 1;
      }
    </style>
  </defs>
  <ellipse cx="130" cy="160" rx="30" ry="60" class="licht"/>
  <line x1="100" y1="110" x2="350" y2="50" class="stecken"/>
  <rect x="90" y="100" width="80" height="100" class="koerper"/>

Daraufhin haben wir eine Ellipse mit dem Mittelpunkt 130|160, dem X-Radius 30, dem Y-Radius 60 und der Füllfarbe #FFDD00 (gelb) erstellt.
Nachdem diese Ellipse fertig ist, erstellen wir eine Linie, die die Startkoordinaten 100|110 und die Endkoordinaten 350|50 hat. Außerdem hat diese Linie auch noch eine braune (#884400) Randlinie, die die Strichstärke 10 hat.
Nun erstellen wir das schon bekannte Element <rect/> und setzen den Start auf 90|100, die Breite auf 80, die Höhe auf 100, füllen es mit Rot (#FF0000) und geben ihm eine schwarze Randlinie mit der Stärke 1. Puh, war das viel!

Der Text und die wiederholte Laterne[Bearbeiten]

Zum Schluss erstellen wir noch den Text, der das SVG-Dokument beschreibt sowie die wiederholte Laterne.

  <defs>
    <style>
      .beschreibung{
        fill: #FD0;
        font-size: 40;
        font-family: Arial;
      }
    </style>
  </defs>
  <g id="Laterne">
    <!-- … (wie beim letzten Beispiel) -->
  </g>
  <use xlink:href="#Laterne" transform="translate(200, 50) scale(0.7)"/>
  <text x="10" y="40">Laterne, Laterne, Sonne, Mond und Sterne!</text>

Wir haben zuerst mit <g> eine Gruppe erstellt und diese mit einer ID versehen. In dieser Gruppe ist unsere Laterne 1. Diese Laterne haben wir dann mit <use/> wiederholt und um 200 in die X-Richtung und 50 in die Y-Richtung verschoben, außerdem haben wir die Größe der Gruppe um den Faktor 0.7 geändert.
Außerdem haben wir einen Text definiert, der die Position 10|40 hat. Die Y-Position wird aber von unten, nicht von oben gemessen. Außerdem besitzt der Text die Farbe #FFDD00 (gelb), die Schriftgröße 40 und die Schriftart Arial.

Was man nicht vergessen sollte, ist, dass wir (immer noch) mit virtuellen Einheiten herumhantieren.

Das fertige Dokument[Bearbeiten]

Als SVG-Datei
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="790" height="230" viewBox="0 0 790 230">
  <defs>
    <style>
      .background{
        fill: #00F;
      }
      .licht{
        fill: #FD0;
      }
      .stecken{
        stroke: #840; 
        stroke-width: 10;
      }
      .koerper{
        fill: #F00; 
        stroke: #000; 
        stroke-width: 1;
      }
      .beschreibung{
        fill: #FD0;
        font-size: 40;
        font-family: Arial;
      }
    </style>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" class="background"/>
  <g id="laterne">
    <ellipse cx="130" cy="160" rx="30" ry="60" class="licht"/>
    <line x1="100" y1="110" x2="350" y2="50" class="stecken"/>
    <rect x="90" y="100" width="80" height="100" class="koerper"/>
  </g>
  <use xlink:href="#laterne" transform="translate(200, 50) scale(0.7)"/>
  <text x="10" y="40" class="beschreibung">Laterne, Laterne, Sonne, Mond und Sterne!</text>
</svg>
Als HTML-Datei ansehen …
<!DOCTYPE html>
<html lang="de"> 
	<head> 
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
		<title>Inline-SVG im HTML-Dokument</title>
		<style>
      
		</style> 
	</head>
<body>
	<h1>Inline-SVG im HTML-Dokument</h1>
		
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 790 230">
  <defs>
    <style>

      .background{
        fill: #00F;
      }
      .licht{
        fill: #FD0;
      }
      .stecken{
        stroke: #840; 
        stroke-width: 10;
      }
      .koerper{
        fill: #F00; 
        stroke: #000; 
        stroke-width: 1;
      }
      .beschreibung{
        fill: gold;
        font-size: 40px;
        font-family: Arial;
      }

    </style>
  </defs>
  <rect x="0" y="0" width="100%" height="100%" class="background"/>
  <g id="laterne">
    <ellipse cx="130" cy="160" rx="30" ry="60" class="licht"/>
    <line x1="100" y1="110" x2="350" y2="50" class="stecken"/>
    <rect x="90" y="100" width="80" height="100" class="koerper"/>
  </g>
  <use href="#laterne" transform="translate(200, 50) scale(0.7)"/>
  <text x="10" y="40" class="beschreibung">Laterne, Laterne, Sonne, Mond und Sterne!</text>
</svg>

</body>
</html>

Programme[Bearbeiten]

Adobe Illustrator oder Inkscape?[Bearbeiten]

Der kostenlose Open-Source-Editor Inkscape hat die beste Unterstützung für SVG, eine Alternative ist Adobe Illustrator. Adobe erzeugt aber beim Exportieren eine Datei mit dem svg-Code und .AI source code, der ein schnelleres Editieren und Rendering durch Adobe-Produkte erlaubt.

Ein Editieren solcher Dateien würde den SVG-Code verändern, den .AI-Code jedoch nicht. Ein Workaround wäre es, in Inkscape gleich nach dem Öffnen alle nicht-SVG-Elemente zu entfernen. Alternativ könnten Sie schon beim Speichern im Illustrator die Häkchen bei den Optionen

"Illustrator-Bearbeitungsinformationen behalten"
"für Adobe SVG Viewer optimieren"

entfernen.

TMs PocketSVGEditor[Bearbeiten]

Im TMs PocketSVGEditor können Sie Code einfügen. Einige direkt nutzbare Snippets stehen ebenfalls zur Verfügung.

So können Sie mit SVG experimentieren, ohne dauernd zwischen Editor und Browser umschalten zu müssen.

weitere SVG-Editoren[Bearbeiten]

Nachdem google mit svg-edit schon früher einen browser-basierten Editor anbot, wurde im April 2016 der Nachfolger boxySVG vorgestellt.[1]

Boxy SVG konzentriert sich auf wenige, aber für das Webdesign nötige Grundfunktionen wie Grundformen, Pfade, Symbole und Gruppierungen sowie Farben, Verläufe und Transformationen. Dabei legt es Wert auf einen übersichtlichen und sparsamen Ausgangscode.

Es ist unter allen verfügbaren Anwendungen der erste WYSIWYG-Editor, bei dem Formen bearbeitet werden können, ohne sich in einzelnen Vektoren verlieren zu müssen.

Boxy-SVG ist im google-play-Store erhältlich und läuft nach Registrierung 15 Tage kostenlos auf allen Systemen mit dem Chrome-Browser.

  • svg-edit (Ein vollständiger Vektorgrafik Editor im Browser (in JavaScript))
  • Method Draw (ein komfortablerer SVG-Editor – Github Fork von SVG-Edit von Mark MacKay)
  • blobmaker.app – geniale, sehr einfach zu bedienende App, die unregelmäßige Blobs erzeugt
  • DRAW SVG – einfach zu bedienender Editor mit vielen Beispielformen wie Pfeile, Emojis und Icons
  • polylineTest (ein einfacher SVG-Editor von David Dailey; manche Funktionen funktionieren nicht mehr)

Quellen[Bearbeiten]

  1. sitepoint: Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG Editor vom 21.04.2016