Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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)