SVG&canvas-Test

SVG (Scalable Vector Graphics)
canvas (vom englischen canvas für 'Leinwand' oder 'Gemälde')

SVG

Vom World Wide Web Consortium (W3C) empfohlene Spezifikation zur Beschreibung zweidimensionaler Vektorgrafiken. SVG, ist auf XML basiert
Beispiele aus SELFHTML.ORG
Eigene Grafik...

<svg width="120" height="80" viewBox="0 0 3 2"> ... Breite (120px) x Höhe (80px) des 'Zeichnungsblatts' ohne dies Angaben wird die maximale mögliche Ausdehnung genommen. Die Grafik selbst wird zentriert
viewBox="0 0 3 2" ist Start-X, Start-Y, RasterPunkte-X, RasterPunkte-Y. "Start" ist die Abweichung in Rasterpunkte zur Zentrierung, positiv nach Links bzw. Oben, negativ nach Rechts bzw. Unten. "RasterPunkte" ist immer positiv
<desc>Flagge Frankreichs</desc>
<rect x="0" y="0" width="1" height="2" fill="#0055A4" /> x/y Rasterposition, Höhe und Breite in Rasterpunkte
<rect x="1" y="0" width="1" height="2" fill="white" />
<rect x="2" y="0" width="1" height="2" fill=rgb(255,10,10) />
</svg>

Ohne "Zeichnungsblattangaben" wird das ganze Browserfenster genommen
Flagge Frankreichs
Abwandlung zu oben:
width="600" height="160" statt width="200" height="80"
viewBox="2, -1, 3, 2" statt viewBox="0 0 3 2"
fill="yellow" statt "white"
Flagge Rumänien
Eigene Flagge


Original JPG
Konvertierer von JPG zu SVG
<img src=svg&canvas-Dateien\jpg-svg.svg>
Original SVG
Original SVG (SW)

Andere Einbindungen als img src=


im <SVG>
Ob und wie geht das? Ob und wie geht das?

<object data="svg&canvas-Dateien\jpg-svg.svg" type="image/svg+xml">
Ihr Browser kann leider kein svg darstellen!

als IFRAME


als STYLE

Hallo



Velo






canvas

per JavaScript gezeichnet und von der Firma Apple als Bestandteil des WebKit entwickelt.