SVG/Tutorials/Text

SVG ist für alle Grafiken außer Fotografien das bessere Format für Ihre Webseiten.

Text in SVG …

• wird von Suchmaschinen und Screenreadern als Text erkannt und hilft Ihre Webseiten zugänglicher zu machen.
• kann durch Scriptprogramme bearbeitet …
• und in die Zwischenablage kopiert werden.

Dieser Kurs zeigt Beispiele und Effekte in SVG und wie diese in HTML eingebunden werden können.

1. Füllungen und Randlinien
   • Textformatierung
   • Verweise in SVG kennzeichnen
   • Füllungen
     • Verläufe
     • Muster und Kachelungen
   • Randlinien
     
2. Filter-Effekte
   • Schatten
     • Spiegelungen
   • Beleuchtungen
   • Turbulenzen
   • SVG-Filter in HTML
3. Schrift von Zauberhand
   • Schrift in Pfade umwandeln
4. animierte Textpfade
   • Lauftext
   • Rotationen
   • Einblendungen
5. Masken und Beschneidungen
6. mehrzeiliger Text
7. mehrsprachiger Text
8. Schreib- und Leserichtung

SVG wurde erstmals im September 2001 veröffentlicht. Damals waren diese Gestaltungsmöglichkeiten für das Web revolutionär. Mittlerweile sind viele Eigenschaften wie text-shadow in CSS übernommen worden. text-fill und text-stroke sind zwar nicht Teil eines Standards, werden mit Browserpräfix -webkit- aber von allen Browsern verstanden.

Trotzdem gibt es noch viele Effekte, die sich nur mit SVG realisieren lassen!

Texteffekte mit SVG
(Übersicht)

Texteffekte mit Füllungen und Randlinien →