SVG/Tutorials/Text

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

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- von allen Browsern verstanden.

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


Texteffekte mit SVG
(Übersicht)