\acs{RGB} hat getrennte Farbwerte für Rot, Grün und Blau, welche jeweils im Wertebereich von 0 bis 255 (8~Bit) liegen. Es bestitzt ein additives Farbmodell, \dash jeweils Farbe, je nach Helligkeit.
Bei einer gängigen Auflösung von \zB 20 Megapixel:
\begin{itemize}[noitemsep]
\item besteht das Bild aus 20\,Mio. Teilflächen.
\item braucht jedes Bild 60\,MByte Speicherplatz!
\item[$\Rightarrow$] die meisten Bildformate komprimieren!
Farbtabelle, \dash maximal 256 verschiedene Farben aus den insgesamt verfügbaren 16\,Mio. sind in einem Bild gleichzeitig verwendbar.\newline
$\Rightarrow$ Für jede Teilfläche sind nur 1\,Byte Information (als Indexwert auf die Farbtabelle) notwendig.
$\Rightarrow$ in dieser Quantisierung auf 256 verschiedene Farbwerte steckt der Verlust bei \acs{GIF}, \textit{nicht} jedoch in der nachfolgenden Kompression. Das Kompressionsverfahren ist eine modifizierte Lauflängenkodierung (verlustfrei).
Sonderfunktion:
\begin{itemize}[noitemsep]
\item Animated \acs{GIF}
\item Transparenz (Markieren einer Farbe als \enquote{volltransparent})
\end{itemize}
\end{description}
\subsection{JPEG}\index{JPEG}
\acf{JPEG} ist ein weiteres, häufig verwendetes Grafikformat.
Hauptziel von \acs{JPEG}:
\begin{itemize}[noitemsep]
\item fotorealistische Darstellungen
\item$\Rightarrow$ viel mehr als 256 Farben
\item Farbformat: \acs{RGB} (ohne Alphakanal)
\end{itemize}
Komprimierung von \acs{JPEG}:
\begin{itemize}
\item\acf{DCT} als Vorstufe. Es handelt sich dabei um eine Mittelwertbildung über $8\times8$-Pixelblöcke mit einer Abweichung der $4\times4$/$2\times2$/$1\times1$-Pixelblöcke von jeweilig enthaltenden größeren Pixelblock (Abweichungen $\hat{=}$ DCT-Koeffizienten).
\enquote{\textit{Im nächsten Schritt wird das Bild in $8\times8$ große Pixelblöcke aufgetrennt. Jeder dieser Blöcke wird der diskreten Cosinus-Transformation unterzogen. Diese ist mit der Fourier-Transformation verwandt und wandelt die räumliche Information der Helligkeitswerte in eine Frequenz-Darstellung um. Die Umwandlung selbst ist verlustlos bis auf Rundungsfehler.}} -- Quelle: \url{https://www.tecchannel.de/a/jpeg,401190,3}
\item Anwendung der Huffman-Kodierung\footnote{siehe auch \url{https://de.wikipedia.org/wiki/Huffman-Kodierung}} auf die Koeffizienten
Prinzip der Huffman-Kodierung/Komprimierung: \newline
Sortierung der Werte nach ihrer Häufigkeit des Vorkommens, \zB
\begin{center}
\begin{tabular}{rl}
1: & häufigster Wert \\
01: & zweithäufigster Wert \\
001: & dritthäufigster Wert \\
\end{tabular}
\end{center}
Bei den häufigen Werten wird Speicherplatz gespart, bei seltenen Werten braucht man jedoch mehr Speicherplatz.
$\Rightarrow$ Einsparpotenzial nur bei stark unterschiedlich häufig vorkommenden Werten! \newline
$\Rightarrow$ verlustfreie Komprimierung
Verlust durch Ausgleich ähnlicher Koeffizienten auf gleiche Werte (Qualitätsfehler bei \acs{JPEG})
\newpage
\item Nachfolgeformat: JPEG2000
\begin{itemize}[noitemsep]
\item Unterstützung von RGB\textbf{A}
\item keine allzugroße Verbreitung wegen Lizenzgebühren
\item Unterstützung meist nur von kostenpflichtiger Software (\zB Photoshop, aber nicht \href{https://www.gimp.org/}{GIMP})
\end{itemize}
\end{itemize}
\subsection{PNG}\index{PNG}
\acf{PNG} ist ein verlustfreies Grafikformat. Es besitzt folgende Eigenschaften:
\begin{itemize}[noitemsep]
\item mehrere Farbmodelle
\begin{itemize}[noitemsep]
\item indiziert (mit Farbtabelle)
\item RGBA
\end{itemize}
\item immer verlustfrei
\item geeignet für jegliche Art der Darstellung (künstliche \& photorealistisch)
\item Problem bei photorealistischen Darstellungen: manchmal sehr großes Dateivolumen
\end{itemize}
\section{SVG}\index{SVG}
\acf{SVG} ist ein Vektorgrafikformat, welches sich auch im Internet durchgesetzt hat. Geschichte:\index{SVG!Geschichte}
\begin{description}
\item[1998] zwei Ansätze für vektorbasiertes Grafikformat im Web:
\begin{enumerate}[noitemsep]
\item Microsoft \& Macromedia: \acf{VML}
\item Adobe, IBM, NS, Sun: \acf{PGML}
\end{enumerate}
\item[10/1998] Anforderungen an vektorbasiertes Grafikformat für das Web
\item[09/2001]\acs{SVG} 1.0 als \acs{W3C}-Standard
\item[01/2003]\acs{SVG} 1.1 mit Fehlerbehebung und Modularisierung
\item[04/2005]\acs{SVG} 1.2, aber außer \enquote{\acs{SVG} 1.2 Tiny} zurückgezogen
\item[12/2016] Candidate Recommendation für \acs{SVG} 2.0
\end{description}
Die Anzeige ist bei allen modernen Browsern \enquote{nativ} möglich. Sie kann auch in eine \acs{HTML}-Seite eingebettet werden.
\begin{lstlisting}[language=XML,caption=Grundstruktur einer SVG Datei,label=lst:svg_format]
<?xml version="1.0" ?>
<!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"
version="1.1"
width ="<Breite (in Pixeln, Millimetern, etc.)>"
height="<Höhe (in Pixeln, Millimetern, etc.)>"
viewBox="<x> <y> <Breite> <Höhe>">
<title>Titel der Grafik</title>
<desc>Beschreibung</desc>
<defs>
<!-- Für weitere Metadaten, z.B. CSS, JS, vordefinierte Objekte, ... -->
</defs>
<!-- eigentlich anzuzeigender Inhalt bestehend aus grafischen Elementen -->
</svg>
\end{lstlisting}
\begin{description}
\item[\code{viewBox}] optionales Attribut, um angezeigten Bereich des Koordinatensystems von 0 $\rightarrow$ Breite und 0 $\rightarrow$ Höhe auf x $\rightarrow$ x+Breite und y $\rightarrow$ y + Höhe zu setzen.
\autoref{fig:svg_viewbox} auf Seite~\pageref{fig:svg_viewbox} verdeutlicht das Verhalten von \code{viewBox}\footnote{Quelle: \url{https://www.sarasoueidan.com/blog/svg-coordinate-systems/}}.
\item Grafische Grundelemente werden jeweils über einen eigenen Tag dargestellt
\item (Fast) Alle Parameter werden als Attribute angegeben (außer Textinhalt bei \svg{<text>})
\item (Fast) Alle Tags bei \acs{SVG} sind leere tags (aber Metadaten \svg{<title>} und \svg{<desc>} können bei jedem Tag als Kindelemente angegeben werden)
Das \code{points} Attribut enthält Paare von x/y-Koordinaten für die zweidimensionalen Punkte. Getrennt durch Komma und/oder Whitespace, \dash folgendes wäre syntaktisch korrekt: \xml{<polyline points="5.5,3,8 7.5 1,1,1,11,111,1.1" />}
\textit{Siehe \autoref{fig:bezierkurven} (rechts) auf Seite~\pageref{fig:bezierkurven} und nachfolgend \code{path C}}
\item[Path]\enquote{Supertag}\xml{<path>}: eignet sich für Bézierkurven und (fast) alle anderen Objekte:
Ein Attribut \code{d} (\enquote{data}) enthält Zeichenkommandos und Koordinaten.\newline
\textbf{Kommandos} sind einzelne Buchstaben.
\begin{itemize}[noitemsep]
\item Großbuchstaben: Koordinaten sind absolut
\item Kleinbuchstaben: relative Koordinaten zum jeweiligen Bezugspunkt (welcher sich nach der Abarbeitung jedes Kommandos ändert).
\end{itemize}
\begin{description}
\item[\code{M x y}] Move: Bewegung zum Punkt (\code{x}, \code{y}), ohne etwas zu zeichnen
\item[\code{L x y}] Line: Zeichne eine Strecke von aktuellen Bezugspunkt zum Punkt (\code{x}, \code{y})
\item[\code{H y}] Horizontal Line: Zeichne eine horizontale Linie zum Punkt ($x$, $y_{Bezugspunkt}$)
\item[\code{V y}] Vertical Line: Zeichne eine vertikale Linie zum Punkt ($x_{Bezugspunkt}$, $y$)
\item[\code{a}] arc Kreisbögen (Parameter selbst nachschauen) und Ellipsenbögen
\item[\code{Q sx sy ex ey}] Quadratische Bézierkurve: Bézierkurve vom aktuellem Bezugspunkt über Stützpunkt (\code{sx}, \code{sy}) zum Endpunkt (\code{ex}, \code{ey})
\item[\code{C s1x s1y s2x s2y ex ey}] Kubische Bézierkurve: Bézierkurve vom aktuellem Bezugspunkt über die beiden Stützpunkte (\code{s1x}, \code{s1y}, \code{s2x}, \code{s2y}) zum Endpunkt (\code{ex}, \code{ey})
\item[\code{T ex ey}] ähnlich dem Kommando \code{Q}, jedoch \enquote{smooth}. Als \acs{AP} wird der vorherige \acs{EP} gewählt und als erster \acs{SP} wird der letzte aus der direkt zuvor festgelegten Bézierkurve am \acs{AP} der neuen Kurve gespiegelt und verwendet.
\item[\code{S s2x s2y ex ey}] ähnlich dem Kommando \code{C}, jedoch \enquote{smooth}. Als \acs{AP} wird der vorherige \acs{EP} gewählt und als erster \acs{SP} wird der letzte aus der direkt zuvor festgelegten Bézierkurve am \acs{AP} der neuen Kurve gespiegelt und verwendet.
\item[\code{Z}] Schließt den Pfad zum letzten Kontrollpunkt, der durch \code{M} gesetzt wurde (es gibt keinen Unterschied zwischen Groß- und Kleinschreibung).
\acs{CSS}-Angaben überschreiben die Werte der Darstellungsattribute!
\end{Achtung}
\begin{Hinweis}[frametitle=Hinweis zu SVG 2]
Bei \acs{SVG} 2 werden auch die Geometrie-Attribute \code{x, y, x1, x2, y1, y2,cx, cy, rx, ry, r,... } zu Darstellungsattributen \enquote{promoted}/\enquote{befördert}.
Damit sind darauf \zB auch \acs{CSS}-Animationen anwendbar. \newline
Jedoch sorgt \css{* \{x:0;\}} dafür, dass alle Rechtecke an die X-Koordinate \code{0} positioniert werden (unabhängig vom Wert des Darstellungsattributs \code{x} im \xml{<rect/>}.
\end{Hinweis}
\item[\code{transform}] für geometrische Abbildungen
\begin{description}
\item[\code{transform="{}translate(dx dy)"}] Verschiebung um (\code{dx}, \code{dy}) (\code{dy} kann weggelassen werden, dann wird nur in X-Richtung verschoben)
\item[\code{transform="{}scale(sx sy)"}] Skalierung um Faktor (\code{sx}, \code{sy}) (wird \code{sy} weggelassen, so ist \code{sy = sx}).
Mithilfe von \code{scale} kann man zudem Elemente spiegeln:
\begin{tabular}{ll}
\code{scale(-1,-1)}& Punktspiegelung \\
\code{scale(1,-1)}& Achsenspiegelung x-Achse \\
\code{scale(-1,1)}& Achsenspiegelung y-Achse \\
\end{tabular}
\item[\code{transform="{}rotate(angle cx cy)"}] Rotation um Winkel \code{angle} (Grad, nicht Radianten) um den optionalen Punkt (\code{cx, cy})
\item[\code{transform="{}skewX(angle)"}] Scherung horizontal um \code{angle} (Grad, nicht Radianten)
\item[\code{transform="{}skewY(angle)"}] Scherung vertikal um \code{angle} (Grad, nicht Radianten)
\caption{Erzeugung einer quadratischen Bézierkurve}
\label{fig:bezierkurve_quadratisch_2}
\end{figure}
Wie in \autoref{fig:bezierkurve_quadratisch_2} gezeigt wird, liegt $O$ auf der Bézierkurve. Die Bézierkurve $A-B-C$ lässt sich als Konkatenation der beiden Bézierkurven $A-P-O$ und $O-R-C$ darstellen. Dadurch ist eine rekursive Anwendung möglich! Dies wird soweit ausgeführt, bis die Auflösung des Ausgabegerätes erreicht ist.
