SVG/Tutorials/Text

Informationen zu diesem Text

Lesedauer

4x30min

Schwierigkeitsgrad

einfach

Vorausgesetztes Wissen

• SVG
• CSS

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. Masken und Beschneidungen
4. animierte Textpfade
5. mehrzeiliger Text
   
   
   
   
   
   

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 →