04: Warum SVG? Klein. - CSS-Tricks

Anonim

Die Größe einer SVG-Datei hängt davon ab, wie komplex sie ist und nicht davon, wie groß sie ist. Denken Sie daran, dass es SVGs egal ist, in welcher Größe sie gerendert werden. Sie sind flexibel und scharf, egal was passiert.

Stellen Sie sich ein 100 × 100-Pixel-Rasterbild vor. Das sind 10.000 Pixel an Informationen. SVG ist nur eine Anleitung zum Zeichnen von Objekten. Wenn diese Anweisungen also einfach genug sind, können sie viel kleiner sein, als Daten auf jedem Pixel speichern zu müssen. Es ist etwas komplexer, da die Komprimierung auf beiden Seiten ins Spiel kommt, aber die Gesamtidee da ist.

Es ist jedoch nicht ganz so einfach wie „SVG ist kleiner“ - und es gibt keine festgelegte Formel für die Entscheidung, welches Format verwendet werden soll, das immer korrekt ist. Manchmal ist es sehr offensichtlich. Eine solide Form des Apple-Logos? Der Vektor wird für so ziemlich jede Größe kleiner sein. Eine Illustration einer Eiche mit vielen Blättern? Der Vektor ist möglicherweise zu kompliziert und ein Rasterbildformat ist kleiner.

Bild aus einer Präsentation von Todd Parker.

Möglicherweise müssen Sie nur eine Kopie in beide Richtungen speichern, beide optimieren und die Dateigröße testen.

SVG eignet sich normalerweise hervorragend für Dinge wie:

  • Logos
  • Symbole
  • Einfache Illustrationen
  • Diagramme
  • Karten

Ich wette, Sie haben bereits eine ziemlich gute Vorstellung davon, welche Art von Grafik als Vektor sinnvoll ist.

Dateien

  • 04-icon_62532.png.webp
  • 04-icon_62532.svg