SVG/Farben/Finetuning

Aus SELFHTML-Wiki
< SVG‎ | Farben
Wechseln zu: Navigation, Suche

SVGS sind die bessere Alternative zu Rastergrafiken. Und trotzdem haben die Browser Probleme komplexe SVGs zu rendern. Obwohl SVG seit 1999 existiert, litt es anfangs lange unter der mangelnden Browserunterstützung. Microsoft zog erst 2011 mit dem IE9 nach und es dauerte, bis die Altversionen IE6-8 ausgestorben waren. Deshalb gab es für die anderen Browserhersteller lange keinen Anreiz, das Rendern von SVG zu optimieren.[1]

In diesem Kapitel lernen Sie, wie Ihre SVGs schneller laden, aber auch bei Benutzerinteraktionen schneller rendern, bzw. neu gemalt werden.

Download

Je weniger KB oder gar MB Sie bei einem Request senden, desto schneller kommen Ihre Daten beim Benutzer an.

Komprimieren Sie Ihre SVGs z.B. mit SVGO.

Guter SVG-Stil

Um Ihre SVGs schneller zu rendern, helfen einige Tipps:

1. Opimieren Sie Ihre SVGs

  • Entfernen Sie überflüssige XML-Metadaten.
  • Löschen Sie unnütze XML-Attribute, die nur den Standardwert enthalten.
  • Runden Sie Werte auf Ganzzahlen!
  • Ersetzen Sie Pfade mit vielen Punkten durch Grundformen wie Kreise und Rechtecke.

Hauptartikel: SVGs optimieren

2. Halten Sie Ihre Grafiken einfach! Mit SVG sind viele Effekte möglich, die es in der CSS-Welt so (noch) nicht gibt. Allerdings benötigen Sie viel mehr Zeit zum Rendern!

Einige der Leistungskiller sind:

  • SVG-Filter: sie brauchen viel Zeit, bis die Effekte berechnet werden („schlechtes“ Beispiel ist diese Goldschrift. Die neuen CSS-Filter sind schneller, liefern aber eben nur eine eingeschränkte Auswahl.[2]
  • SVG-Mask: Verwenden Sie stattdessen clip-path.
  • use: Vermeiden Sie das Schachteln zu vieler use-Elemente [3]
  • Webfonts und textPath: Eine Webseite ist kein Printprodukt! Vermeiden Sie komplexe Texte mit Textpfaden - positionieren Sie einzelne tspans anstelle von textPath!

Tuning-Attribute

…-rendering

SVG hat eine ganze Reihe von performance properties , die alle auf -rendering enden.

Die Werte klingen alle gleich:

  • auto (Standardwert)
  • optimizeSpeed
  • optimizeLegibility
  • geometricPrecision
Empfehlung: Auch wenn text-rendering: optimizeLegibility gut gemeint ist, ist dies gerade bei großen Schriften oft gar nicht mehr nötig. Auf Mobilgeräten mit Android kann es jedoch zum Einfrieren der Seite führen.[4]
Im Allgemeinen reicht das normale Rendering aus.

color-interpolation

Mit der Eigenschaft color-interpolation steuern Sie das Verhalten bei der Farbberechnung.[5]

Folgende Angaben sind möglich:

  • sRGB: (Standardwert) Farbberechnung nach dem sRGB-Farbmodell
  • auto: Grundeinstellungen des Browsers
  • linearRGB: Farbberechnung nach dem linearen RGB-Farbmodell
color-interpolation ansehen …
    <defs>
      <linearGradient id="g01"
        x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#c82f04 " />
	<stop offset="33%" stop-color="#dfac20" />
	<stop offset="66%" stop-color="#5a9900" />
        <stop offset="100%" stop-color="#337599" />
      </linearGradient>
    </defs>
 
    <!-- 3 verschiedene Interpolationsarten -->
    <rect x="170" y="10" width="150" height="200" />
    <rect x="350" y="10" width="150" height="200"
      color-interpolation="auto" />
    <rect x="530" y="10" width="150" height="200"
      color-interpolation="linearRGB" />

Weblinks

  1. ↑ Improving SVG Runtime Performance Taylor Hunt, 29.01.2019
  2. ↑ Updates in hardware-accelerated animation capabilities Una Kravets, 22.2.2021 (developer.chrome.com)
  3. ↑ SO: Does reusing symbols improve SVG performance? vom 22.12.2011
  4. ↑ text-rendering: optimizeLegibility is Decadent and Depraved Mat "Wilto" Marquis
  5. ↑ MDN: color-interpolation
Abgerufen von „http://wiki.selfhtml.org/index.php?title=SVG/Farben/Finetuning&oldid=98358“