zurück Home

SVG, Scalable Vector Graphics

Allgemeines
  • Bild besteht aus definierten Linien und Flächen
  • beliebig scalierbar
  • gezeichnete Graphiken können Pixel - oder Vektorgraphiken sein
  • Vektorgraphiken haben häufig Ebenen, die veränderbar sind
zweidimensionale Vektorgrafik basiert auf XML Dateiendung: .svg oder .svgz (mit gzip komprimiert)

Erstellung

 Inkscape: arbeitet primär im SVG-Format Mit Libre Office Draw können Vektorgrafiken erstellt und als SVG exportiert werden.

Editieren

 SVGs sind Textdateien, die mit jedem einfachen Editor formatfrei bearbeitet werden können.

HTML

 Microsoft Expression Web 4 akzeptiert SVG nicht. Man kann sie aber in Code View eintragen. Firefox erlaubt Microsoft und die Bearbeitung von SVG.

Aufbau
  • <?xml ...
  • <!DOCTYPE ...
  • <svg xmlns= ...
  • <!--Inhalt der Datei -->
  • </svg>
 Beispiel:

<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg">
<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<g opacity="0.8">
<rect x="25" y="25" width="200" height="200" fill="green" stroke-width="4" stroke="pink" />
<circle cx="125" cy="125" r="75" fill="orange" />
<polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
<line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>
</svg>		 Beispiel SVG

<?xml

 XML-Deklaration <?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE

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

<svg

 Attribute
version="1.2"
width="210mm"
height="297mm"
viewBox="0 0 21000 29700"
preserveAspectRatio="xMidYMid"
fill-rule="evenodd"
stroke-width="28.222"
stroke-linejoin="round"
xmlns="http://www.w3.org/2000/svg"
xmlns:ooo="http://xml.openoffice.org/svg/export"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:presentation="http://sun.com/xmlns/staroffice/presentation"
xmlns:smil="http://www.w3.org/2001/SMIL20/"
xmlns:anim="urn:oasis:names:tc:opendocument:xmlns:animation:1.0"
xml:space="preserve"

stroke

 Strich, Linie

rect

 Rechteck <rect
x="25"
y="25"
width="200"
height="200"
fill="green" Farbe der Füllung
stroke-width="4" Breite der Umrandung
stroke="pink" /> Farbe der Umrandung

circle

Kreis <circle
cx="125"
cy="125"
r="75"
fill="orange" />
line Linie <line
x1="50"
y1="50"
x2="200"
y2="200"
stroke="blue"
stroke-width="4" />

SMIL

 Animation von SVG
text Text <g transform="translate(0, 200)" text-anchor="start">
<text transform="translate(220, 0) rotate(-45)">Merkur</text>
<text transform="translate(280, 0) rotate(-45)">Venus</text>
<text transform="translate(340, 0) rotate(-45)">Erde</text>
<text transform="translate(400, 0) rotate(-45)">Mars</text>
</g>		 Text schräg
text-anchor <g transform="translate(0, 200)" text-anchor="start"> Es wird ein Bezugspunkt definiert, der am linken Rand (= 0) und 200 Pixel nach unten liegt.
translate <text transform="translate(340, 0) rotate(-45)">Erde</text> Der Text "Erde" wird 340 Pixel nach rechts verschoben und um -45° gedreht.

desc

 <desc>This image is based on http://en.wikipedia.org/wiki/File:Planets2008.jpg.</desc> Description, Beschreibung, Kommentar ohne Auswirkung

Teil von

 Vektorgrafik Software: Medien Software: Graphik

Impressum                                 Zuletzt geändert am 24.09.2021 21:43