CSS oder SVG? Welche Webtechnologie eignet sich besser zur Umsetzung grafischer Texteffekte?

CSS vs SVG: Wer hat bei grafischen Texteffekten die Nase vorn?
Keine Kommentare

Scalable Vector Graphics (SVG) und Cascading Style Sheets (CSS) werden beide von Frontend-Entwicklern eingesetzt, um – neben vielen weiteren Einsatzmöglichkeiten – grafische Texteffekte im Web umzusetzen. Beide Formate haben ihre Vor- und Nachteile, was die Erstellung von Texteffekten betrifft. In diesem Artikel werden verschiedene Beispiele zur Erstellung von grafischen Texteffekten mit CSS und SVG vorgestellt.

Welche Webtechnologie eignet sich nun am besten, um grafische Texteffekte im Web umzusetzen: SVG oder CSS? Sara Soueidan ist dieser Frage nachgegangen: Anhand verschiedener Codebeispiele für die Entwicklung von Texteffekten sowohl in CSS als auch in SVG werden Kompatibilität, Verbreitung und Nutzerfreundlichkeit getestet.

Neben dieser konkreten Verwendung von SVG und CSS gibt es im Web unzählige Anleitungen und Codebeispiele, um ansprechende Textelemente zu gestalten – beispielsweise Animationen oder Schattierungen. Mit Textur hinterlegter Text und Text, der sich mit dem Hintergrund vermischt, zählen zu den am häufigsten verwendeten Texteffekten und werden aus diesem Grund ausführlich behandelt.

Grafische Texteffekte mit CSS


Mit Textur hinterlegter Text

Mithilfe der CSS-Property background-clip lässt sich ein Teil des Textes mit der Struktur eines Bildes füllen. Diese Property bestimmt die Background-Painting-Area eines Elements. Der Hintergrund erstreckt sich dann bis an die Grenzen des Elements; diese können über border-box, padding-box und content-box festgelegt werden. Durch background-clip wird das Hintergrundbild am Text im Vordergrund befestigt. Im nächsten Schritt wird dem Text eine Transparenz verliehen (nur mit Webkit-Property -webkit-text-fill-color möglich), sodass das Hintergrundbild durch den Text scheint:

.clippedElement {
  /* background image that will serve as text fill */
  background: url(path/to/your/image.jpg) no-repeat center center;
/* -webkit-background-clip clips the background of the element to the text */
    -webkit-text-fill-color: transparent; /* overrides the white text color in webkit browsers */
    -webkit-background-clip: text;

  /* general styles */
    background-size: 100% auto;
    color: #fff;
    text-align: center;
    padding: 2em;
}
1_texture-filled text

Screenshot: Software & Support Media. http://adobe.ly/1SBbmZc

Das Problem bei diesem CSS-Texteffekt ist die Browserunterstützung: Die Technik funktioniert nur in Chrome, Safari und Opera.

Texturierter Text (Mit Hintergrund vermischt)

Um einen texturierten Text zu generieren, der sich mit dem Hintergrund vermischt, lassen sich CSS-Masks nutzen. In diesem Beispiel werden ein paar „Splashes“ in den Text eingefügt.

2_splatter-mask-700x583

Screenshot: Software & Support Media. http://adobe.ly/1SBbmZc

Der Text erhält bei dieser Technik die Form seines Mask-Images, sodass der Hintergrund durchscheint. Nutzt man eine Textur, die zu der des Hintergrunds passt, erhält man so einen nahtlosen Übergangseffekt. Wendet man nun eine CSS-Mask auf den Text an, bleibt dieser an den schwarzen Stellen der Splashes sichtbar und dort, wo Mask-Image transparent ist, wird auch der Text nicht angezeigt.

h1 {
    /* the line that applies the splatter effect */
    mask-image: url(../img/splatter-mask_1.png); 

/* any general styles go here like font family, alignment, etc. */
}
css-mask-700x251

Screenshot: Software & Support Media. http://adobe.ly/1SBbmZc

Leider ist die Browserunterstützung für CSS-Masks auch nicht sehr verbreitet, sodass man auf das Webkit-Prefix zurückgreifen muss. Allerdings wird auch dieses nicht überall unterstützt.


Weitere Beispiele zu grafischen Texteffekten mit CSS haben die Blogger von Hongkiat gesammelt. Besonders ansprechend sind der Shadow Effect und der animierte Colorful Glitchy Effect, die beide mit CSS erstellt wurden und deren Code auf der zugehörigen Website einsehbar ist. Gerade der animierte Glitchy Effect ist nicht in allen Browsern darstellbar, außerdem sind die wenigsten CSS-Texteffekte für Screenreader auslesbar.

404

Screenshot: Software & Support Media. http://bit.ly/19UTO61

elegant shadow

Screenshot: Software & Support Media. http://bit.ly/1M4iuYk

 

Grafische Texteffekte mit SVG


Mit Textur hinterlegter Text

Um mithilfe von SVG einen Textteil mit Textur zu füllen, muss die Textur zuerst definiert werden. Danach kann sie als fill color für jedes Element genutzt werden – in diesem konkreten Beispiel als text. Es soll ein linearer Farbverlauf festgelegt werden, mit dem dann der Text gefüllt wird:

3_gradient-text-700x237

Screenshot: Software & Support Media. http://adobe.ly/1SBbmZc

<svg xmlns=“http://www.w3.org/2000/svg”  viewBox=“0 0 1250 400” width=“1250” height=“400”> 
    <title>Gradient-filled Text</title>
    <!— Source: http://lea.verou.me/2012/05/text-masking-the-standards-way/ —>
    <defs>
       <linearGradient id=“filler” x=“0%” y=“100%”>
           <stop stop-color=“gold” offset=“0%”></stop>
             <stop stop-color=“purple” offset=“20%”></stop>
           <stop stop-color=“deepPink” offset=“40%”></stop>
           <stop stop-color=“orange” offset=“60%”></stop>
           <stop stop-color=“yellow” offset=“80%”></stop>
           <stop stop-color=“skyblue” offset=“100%”></stop>
      </linearGradient>
    </defs>
    <text x=“100” y=“70%” font-size=“205” fill=“url(#filler)”> Radiant Text</text>
</svg>

Das defs-Element definiert die Textur, in diesem Fall ein linearGradient. Der Verlauf erhält eine ID, die sich auf das text-Element innerhalb des fill-Attributs bezieht. Auf diese Weise wird der Text mit dem Farbverlauf gefüllt. Die Textur kann dabei alles sein: JPEG, PNG, GIF etc., oder auch ein SVG-Bild oder -Pattern.

JavaScript Days 2019

JavaScript Testing in der Praxis (Teil 1 + 2)

mit Dominik Ehrenberg (Crosscan) und Sebastian Springer (MaibornWolff)

Fortgeschrittene schwarze Magie in TypeScript

mit Peter Kröner (‚Webtechnologie-Erklärbär‘)

Texturierter Text (Mit Hintergrund vermischt)

Genau wie in der vorher gezeigten Technik kann einem text-Element eine Textur zugefügt werden, indem zuerst die Mask definiert und dann der Text durch die Nutzung des mask-Attributs referenziert wird. In diesem Beispiel sollen einem Text „Bissspuren“ zugefügt werden:

5_svg-mask-demo-700x371

Screenshot: Software & Support Media. http://adobe.ly/1SBbmZc

Die Bissspuren werden zunächst in einem Grafikprogramm gestaltet. Die so erstellten Umrisse müssen als SVG-Files exportiert werden. Mit deren Hilfe lässt sich die Form einer Mask innerhalb eines defs-Elements definieren:

<svg viewBox=“0 0 900 400”>
  <defs>
    <mask id=“mask”>
      <rect x=“0” y=“0” width=“100%” height=“100%” fill=“#fff”></rect>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…”></path>
            <path fill=“#000” d=“…“></path>
            <path fill=“#000” d=“…“></path>
    </mask>
  </defs>

  <text font-size=“230” fill=“#FF481E” mask=“url(#mask)”>
    <tspan x=“0” y=“150”>nom</tspan>
    <tspan y=“280” x=“150”>nom<tspan>
    <tspan y=“400” x=“350”>nom<tspan>
  </text>
</svg>

Im Unterschied zu CSS wird das Element nicht an den schwarzen Stellen der Mask, sondern an den weißen angezeigt. Deswegen muss hier den Umrissen eine schwarze Füllung im Code mitgegeben werden; außerdem wurde ein Rechteck eingefügt, dass das gesamte SVG weiß füllt. Jede Art von Umriss ist möglich, um einen Texteffekt zu gestalten.


Ein weiteres schönes Beispiel für die Umsetzung von grafischen Texteffekten mit SVG stellt User yoksel im Artikel „How to Create (Animated) Text Fills“ vor. Zur Verdeutlichung haben wir zum einen SVG-Text mit animierten, gestrichelten Patterns herausgesucht und zum anderen eine Version, die SVG-Mask und HTML nutzt – hier lassen sich sogar Videos einbinden. Vorteil der SVG-Methodik sind erneut die übergreifende Browserunterstützung sowie die Möglichkeit, sogar animierten Text auszuwählen.

animated dash stroke pattern

Screenshot: Software & Support Media. http://bit.ly/1JLq8a5

video

Screenshot: Software & Support Media. http://bit.ly/1AyBhId

Fazit

Solange CSS-Masks nicht einen breiteren Support erfahren und mehr Browser die background-clip: text-Value umsetzen, ist für Sara Soueidan ganz klar SVG die bessere Wahl zum Erstellen von texturierten Texteffekten im Web. Will man ausgefallene Typografie auf einer Website darstellen, bleibt zur Zeit nur die Option SVG: Vor allem SVG-Filter ermöglichen die fast grenzenlose Bearbeitung von Texteffekten. So können verschiedenste Effekte zum Text-Element hinzugefügt werden, ohne den Text in ein Bild konvertieren zu müssen. Auch die Möglichkeit, SVGs mit CSS zu bearbeiten und zum Beispiel mit Animationen und Transitionen zu versehen, bietet Webdesignern viele Vorteile. Zudem ist SVG-Text in jedem Browser darstellbar, lässt sich komplett markieren und durchsuchen und ist außerdem 100 Prozent semantisch. Gerade die Eigenschaft, zugleich Bild- und Textformat in sich zu vereinen, macht SVG zur einfacheren Gestaltungsmöglichkeit im Web:

SVG — because of its nature as both an image and a document format — is simply better than CSS when it comes to solving certain design problems on the web.

Noch mehr zum Thema CSS vs. SVG findet sich hier:

Teil 1: CSS vs. SVG: wer hat bei grafischen Texteffekten die Nase vorn?

Teil 2: SVG vs. CSS – Styling Check

Teil 3: Formen mit SVG und CSS – welches Format eignet sich besser?

Teil 4: CSS vs. SVG – Die finale Runde

ML Conference 2019

Workshop: Machine Learning 101++ using Python

mit Dr. Pieter Buteneers (Chatlayer.ai)

Honey Bee Conservation using Deep Learning

mit Thiago da Silva Alves, Jean Metz (JArchitects)

Aufmacherbild: White diagonal long shadow styled alphabet vector template von Shutterstock / Urheberrecht: tuulijumala

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -