# Was ist eine Vektorgrafik?

Digitale [Bildformate](https://www.ionos.de/digitalguide/websites/webdesign/bildformate-im-ueberblick/ "Bildformate im Überblick") gibt es viele. Je nach Medium kommen unterschiedliche davon zum Einsatz. Vektorgrafiken werden oft bei Schaubildern oder Logos eingesetzt, die in verschiedenen Größen vorliegen sollen. Denn anders als Rastergrafiken lassen sie sich beliebig skalieren, ohne dass dadurch Qualität verloren ginge. Wir erklären, was Vektorgrafiken genau sind, wann sie verwendet werden und welche Formate es gibt.

## Vektorgrafiken: Beliebig skalierbar

Um ein Bild zu drucken oder am Bildschirm darzustellen, muss es in einzelne Bildpunkte zerlegt werden; man spricht vom Rastern eines Bildes. Beim Fotografieren mit Digitalkameras entstehen Rastergrafiken mit Millionen einzelner Bildpunkte. Wenn Sie sich ein Bild in einer Zeitschrift stark vergrößert ansehen, werden Sie die gedruckten Bildpunkte erkennen können, genauso wie die [Pixel](https://www.ionos.de/digitalguide/websites/webdesign/was-ist-ein-pixel/ "Was ist ein Pixel?"), wenn Sie Ihr Digitalfoto stark vergrößern.

[![Bild: Was sind Vektorgrafiken – Pixel-„Treppe“ gegen glatte Vektorkante](https://www.ionos.de/digitalguide/fileadmin/_processed_/f/1/csm_DE-vektorgrafiken-1_fc36439f9b.webp "Was sind Vektorgrafiken – Pixel-„Treppe“ gegen glatte Vektorkante")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-vektorgrafiken-1.png) Was sind Vektorgrafiken – Pixel-„Treppe“ gegen glatte Vektorkante Diese Form der Darstellung durch Pixel führt bei sehr **starken Vergrößerungen** zu sichtbaren Bildpunkten, und das vor allem an Bildrändern, an denen das besonders unschön ins Auge fällt. Zudem benötigen Pixelgrafiken allerhand Speicherplatz. Mehr zu der Frage [„Was ist ein Pixel?“](https://www.ionos.de/digitalguide/websites/webdesign/was-ist-ein-pixel/ "Was ist ein Pixel?") haben wir in einem separaten Ratgeber zusammengestellt.

Um diese Nachteile zu vermeiden, nutzt man für bestimmte Grafiktypen ein Format, das auf Vektoren basiert. Oft sind Logos oder schematisch gestaltete Anfahrtsskizzen als Vektorgrafiken erstellt. Ihr großer Vorteil ist, dass sie sich **ohne Probleme vergrößern und verkleinern** (skalieren) lassen, ohne dass dadurch ein Qualitätsverlust in der Darstellung entstünde.

Tipp Was sollte man über den Unterschied zwischen Pixel- und Vektorgrafiken wissen? Unser Ratgeber [Pixelgrafik vs. Vektorgrafik](https://www.ionos.de/digitalguide/websites/webdesign/pixelgrafik-vs-vektorgrafik-ein-vergleich/ "Pixelgrafik vs. Vektorgrafik – ein Vergleich") versorgt Sie mit allen wichtigen und praxisrelevanten Informationen.

## Was ist eine Vektordatei? Die Vektorgrafik im Detail

Vektorgrafiken gehören zu den am längsten bestehenden Grafikformaten in der elektronischen Datenverarbeitung. Sie entstanden als Grundlage für das Computer Aided Design (CAD-Programme). Eine Vektorgrafik benutzt zur Darstellung einer Form **Vektoren**, die dann in einer Vektordatei gespeichert werden.

Ein Vektor ist ein vergleichbar mit einem **Pfeil**, der einen Ursprung, eine Richtung und eine Länge besitzt. Das Pfeilende befindet sich am Ursprung eines Koordinatensystems, die Pfeilspitze zeigt auf einen Punkt, der durch Länge und Winkel des Vektors definiert ist. Um von der Pfeilspitze aus beispielsweise einen Kreis als Vektorgrafik zu zeichnen, müssen nun nicht tausende einzelne Punkte (Pixel) definiert werden, sondern von der Pfeilspitze aus – im Beispiel der Mittelpunkt des Kreises – müssen der **Abstand des Kreisumfangs** und eine **Drehung** dieser Information um 360 Grad festgelegt werden. Dazu kommt eine **Farbinformation**. Zusammengefasst werden alle diese Informationen in der sogenannten Bildbeschreibung, die mit der Vektordatei zusammen gespeichert wird.

[![Bild: Was sind Vektorgrafiken – die Daten zur Erzeugung einer Vektorgrafik](https://www.ionos.de/digitalguide/fileadmin/_processed_/f/8/csm_DE-vektorgrafiken-2_c1f52d0872.webp "Was sind Vektorgrafiken – die Daten zur Erzeugung einer Vektorgrafik")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-vektorgrafiken-2.png) Was sind Vektorgrafiken – die Daten zur Erzeugung einer Vektorgrafik Die Konstruktion komplexer Vektorgrafiken nutzt dann **mehrere Vektoren**, die auf Punkte in der Grafik zeigen und falls erforderlich auch noch Informationen zur Krümmung oder von Winkeln umgebender Linien enthalten.

[![Bild: Was sind Vektorgrafiken – komplexere Grafikstrukturen](https://www.ionos.de/digitalguide/fileadmin/_processed_/7/1/csm_DE-vektorgrafiken-3_861cd9417b.webp "Was sind Vektorgrafiken – komplexere Grafikstrukturen")](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/Screenshots_2020/DE-vektorgrafiken-3.png) Was sind Vektorgrafiken – komplexere Grafikstrukturen Der umgebende Pfad sorgt dafür, dass immer eine glatte Kante am Rand der Grafik erhalten bleibt, egal wie groß man sie „aufzieht“.

## Überblick der gängigen Vektorformate

In der Praxis haben sich bei verschiedenen Herstellern einige Formate für Vektordateien etabliert.

<table>
  <thead>
    <tr>
      <th>Vektorformat</th>
      <th>Abkürzung</th>
      <th>Einsatzbereiche</th>
      <th>Erklärung</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adobe Illustrator</td>
      <td>AI</td>
      <td>Grafikerstellung für Print und Web</td>
      <td>Vektororientiertes Austauschformat; speichert wieder bearbeitbare Vektorgrafiken</td>
    </tr>
    <tr>
      <td>Scalabe Vector Graphics</td>
      <td>SVG</td>
      <td>Web</td>
      <td>Skalierbares Bildformat; kann animiert und mit CSS manipuliert werden</td>
    </tr>
    <tr>
      <td>Encapsulated PostScript</td>
      <td>EPS</td>
      <td>Print</td>
      <td>Basiert auf der Seitenbeschreibungssprache PostScript</td>
    </tr>
    <tr>
      <td>Portable Document Format</td>
      <td>PDF</td>
      <td>Print, Web, Archivierung</td>
      <td>Weltweiter Standard für die Verteilung elektronischer Dokumente</td>
    </tr>
    <tr>
      <td>Freehand Format</td>
      <td>FH</td>
      <td>Farbige und nicht farbige Illustrationen</td>
      <td>Speichert erstellte Zeichenwege mit zugewiesenen Farben und Füllungen</td>
    </tr>
    <tr>
      <td>Corel Draw Format</td>
      <td>CDR</td>
      <td>Grafikerstellung für Print und Web</td>
      <td>Unkomprimiertes Grafikformat mit Funktionalität wie AI</td>
    </tr>
  </tbody>
</table>

## Wann verwendet man eine Vektorgrafik?

Als Vektordatei gespeicherte Grafiken werden überall dort benötigt, wo man sich die **Option auf beliebige Vergrößerung** (Skalierung) einer Grafik erhalten möchte. Wenn Sie beispielsweise [ein Logo erstellen](https://www.ionos.de/digitalguide/websites/webdesign/ein-logo-erstellen-tipps-und-geeignete-software/ "Ein Logo erstellen: Tipps und geeignete Software"), sollte dieses sowohl für die Website als auch für das Firmenschild an der Bürotür oder auf einem Messeplakat verwendbar – also skalierbar – sein. Dafür ist eine Vektorgrafik, die mit Adobe Illustrator erstellt wird, die erste Wahl. Die Vektordatei mit der Endung *.ai* kann daraus in beliebige andere, später nötige Formate exportiert werden.

Wichtig zu wissen: Zur **Ausgabe** der Datei in einem Medium wird das Bild immer **gerastert**, da die Darstellung sowohl im Druck als auch auf dem Bildschirm mit Rasterpunkten bzw. Pixeln erfolgt. Auch das neuere [SVG-Format](https://www.ionos.de/digitalguide/websites/webseiten-erstellen/svg-format-einbindung-von-svg-vektorgrafiken/ "SVG-Format: Einbindung von SVG-Vektorgrafiken") für Webgrafiken wird letztlich gerastert auf dem Bildschirm ausgegeben. Allerdings kann es auf dem Bildschirm beliebig verkleinert oder vergrößert werden, ohne dass „Pixeltreppen“ wie in der eingangs gezeigten Pixelgrafik entstehen. Zudem kann eine SVG-Vektorgrafik direkt per HTML-Syntax erstellt und mittels CSS manipuliert und sogar animiert werden.

## Vorteile einer Vektorgrafik

Mit einer Vektordatei hat man ein **jederzeit skalierbares** Vektorformat zur Hand. Bei Größenänderungen werden Abstandsinformationen verändert und keine Pixel – ebenso beim Verschieben einer Vektorgrafik. Handelt es sich um Vektordateien, die etwa mit Adobe Illustrator (*.ai*) oder CorelDraw (*.cdr*) erzeugt wurden, bleiben diese Ausgangsdateien auch **bearbeitbar**. Vektorgrafiken benötigen **weniger Speicherplatz**, da die zu speichernde Informationsmenge für eine Grafik im Vergleich zu Pixelgrafiken geringer ist. Dem gegenüber steht der technisch bedingte Nachteil, dass zur Darstellung auch der größten Vektorgrafik immer eine Rasterung erfolgen muss.

Um Vektorgrafiken zu erstellen, existiert diverse Software am Markt, vom Abomodell bis zu kostenlosen Open-Source-Lösung. Im professionellen Bereich kommt **Adobe Illustrator** zur Anwendung. Auch mit Adobe Photoshop lassen sich Vektorgrafiken erstellen. Als kostenloses Vektorgrafik-Programm bietet **Inkscape** einen ansprechenden Funktionsumfang inklusive SVG-Kompatibilität.

Hinweis Möchten Sie ein Favicon erstellen? Dies funktioniert entweder mit gängigen Grafikprogrammen oder einem praktischen [Favicon Generator](https://www.ionos.de/tools/favicon-generator "IONOS Favicon Generator").


This is a markdown version of: [https://www.ionos.de/digitalguide/websites/webdesign/was-ist-eine-vektorgrafik/](https://www.ionos.de/digitalguide/websites/webdesign/was-ist-eine-vektorgrafik/) for AI/LLM consumption.