SVG/Tutorials/Text

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

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)