Oliver Radfelder

SVG steht für 'Scalable Vector Graphics'.

SVG ähnelt in der Struktur HTML - hat also öffnende und schließende Tags und mit Attributen werden die konkreten Eigenschaften wie Position, Füllfarbe oder Strichfarbe beschrieben. Mit dem svg-Tag lassen sich Grafiken direkt in HTML einbetten:

<!doctype html>
<html>
  <body>
   <svg width='800' height='150'>
     <circle cx='30' cy='30' r='10' stroke='blue' fill='yellow' />
     <rect x='90' y='30' width='200' height='100' fill='gray' stroke='red' />
     <text x='99' y='50'>Bremerhaven!</text>
     <line x1='1' y1='100' x2='200' y2='120' 
           stroke='red' stroke-width='3' />
   </svg>
  </body>
</html>

In einer anderen Variante lassen sich svg-Dateien ähnlich wie png-Dateien in einem IMG-Tag verlinken. Dann muss allerdings der Namespace (xmlns) als Attribut mit angegeben werden. Schreiben Sie die folgende SVG-Beschreibung in die Datei standalone.svg:

<?xml version="1.0" encoding="utf-8"?>
<svg width='800' height='300' xmlns='http://www.w3.org/2000/svg'>
   <circle cx='30' cy='30' r='10' stroke='blue' fill='yellow' />
   <rect x='90' y='30' width='150' height='100' fill='gray' stroke='red' />
   <text x='99' y='50'>Bremerhaven!</text>
   <line x1='1' y1='100' x2='200' y2='100' 
         stroke='red' stroke-width='3' />
   </svg>

Binden Sie dann die Datei als Referenz in ein HTML-Dokument ein:

<!doctype html>
<html>
  <body>
    <img src='standalone.svg'>
  </body>
</html>

Auch hier gilt wieder: wer eine Skriptsprache wie die Bash als Alltagswerkzeug beherrscht, kann sich leicht eine kleine Visualisierung zusammenstellen. Erstellen Sie doch beispielsweise einmal ein Raster von kleinen Kreisen ...

#!/bin/bash
# Skript mkkreise.sh
echo "
<?xml version='1.0' encoding='utf-8'?>
<svg width='800' height='300'
      xmlns='http://www.w3.org/2000/svg'>"
for x in $(seq 10 10 800); do
  for y in $(seq 10 10 300); do
    echo "<circle cx='$x' cy='$y' r='3' fill='blue' />"
  done
done 
echo "</svg>"

... und lenken Sie das Ergebnis in eine svg-Datei um:


 ./mkkreise.sh > kreise.svg

Sie können dann in einer HTML-Datei wieder auf die nun generierte svg-Datei verweisen. Zudem können Sie regelmäßig - zum Beispiel mit einem cron-Job - Reports erstellen und in das Webverzeichnis kopieren; ganz ohne regelmäßig ein GUI aufmachen zu müssen.

Da wir bei uns das Open-Source Werkzeug Inkscape auf dem Server hopper sowie in den Dockern installiert haben, lässt es sich auch in einer Automatisierungskette einsetzen, um ein png oder ein pdf zu erzeugen:


  inkscape --export-filename=kreise.png -w 800 kreise.svg

Der Schalter --export-filename weist Inkscape an, in das angegebene Format zu exportieren.


  inkscape  --export-pdf=kreise.pdf kreise.svg
  pdfcrop kreise.pdf

Mehr dazu unter inkscape.html.

Das Programm rsvg-convert konvertiert ähnlich wie convert und inkscape in png, pdf und wieder in svg:

$ rsvg-convert --width=2400 --keep-aspect-ratio -f svg image.svg > scaled.svg

Das Programm pdfcrop wird zuweilen benötigt, um ein PDF zu erzeugen, das eingebettet werden kann - z.B. in LaTeX...

Solche kleinen Werkzeuge gibt es viele: pdftocairo (konvertiert pdf-Dateien in png-Dateien), pdfbook (erstellt ein Booklet), pdfseperate (zerlegt eine pdf-Datei in einzelne Seiten), convert (konvertiert Bildformate), ...