Die Vorteile der Verwendung von SVGs in der Webentwicklung sind bekannt. SVGs sind klein, können recht zugänglich gemacht werden, sind skalierbar, ohne ihre Qualität zu verlieren, und können animiert werden. Dennoch gibt es eine Lernkurve. Dinge wie die Syntax von SVG können etwas knifflig sein, und manchmal ist es nicht ausgeschlossen, SVG-Code manuell zu ändern.

Die meisten SVG-Assets ermöglichen die Anwendung von Stilen auf vorhersagbare Weise. Zum Beispiel hat dieser Kreis einen Hover-Zustand, der fast wie jedes andere Element im DOM funktioniert.

Ein Problem, auf das ich bei mehreren Frontend-Projekten gestoßen bin, ist die Bereitstellung eines suboptimalen SVG-Assets von einem Kunden, Designer oder einer Markenressourcen-Website. An diesen Dateien ist nichts „falsch“, aber der SVG-Code erfordert manuelle Überarbeitungen, um die notwendige Funktionalität zu erreichen. Anstatt neue Dateien anzufordern, ist es oft einfacher, sie selbst zu bearbeiten.

Das Styling von SVGs wird durch die Tatsache erschwert, dass sie als XML-basierte Dateien in einigen Aspekten wie HTML agieren, aber in anderen nicht. Lassen Sie uns ein Beispiel verwenden, das Instagram selbst zur Verfügung stellt (das auch leicht auf Wikipedia zu finden ist). Da die Zwischenräume zwischen den Pfaden als eine Art Transparenz dienen, zeigt dieses Bild den dahinter liegenden Hintergrund an.

Warum gibt es keine Hintergrundfarbe auf dem SVG, sodass wir eine Farbänderung beim Hovern anwenden können (z. B. svg:hover { background: #888; })? Das liegt daran, dass die Pfade den umgekehrten Raum füllen, den man erwarten würde. Der Negativraum rendert alles, was sich hinter diesem Element befindet (<body> in den unten stehenden CodePen-Beispielen). Oft ist das kein Problem und kann sogar für große Hintergrunddesigns wünschenswert sein, um organische Übergänge zwischen Inhaltsbereichen zu gewährleisten. Da ich dieses SVG jedoch als Link verwende, muss ich die Datei ändern, um den Raum dahinter gestalten zu können.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <title>Instagram</title>
  <path d="..." transform="translate(0 0)" fill="#fff"/>
  <path d="..." transform="translate(0 0)" fill="#fff"/>
  <path d="..." transform="translate(0 0)" fill="#fff"/>
</svg>

Das Instagram-Logo ist ein perfektes Beispiel für eine umständliche SVG-Datei, die mehr CSS-Finesse erfordert als die meisten anderen. Auch hier ist nichts *falsch* an diesem SVG, aber es stellt einige Herausforderungen für das Styling dar. Um einen Hover-Zustand hinzuzufügen, der den Hintergrund ändert, müssen wir den obigen Code ändern.

Dafür gibt es mehrere Möglichkeiten, aber die einfachste Lösung ist, ein weiteres Element hinter das Bild zu legen. Da das Instagram-Logo rechteckig ist, können wir hinter die drei Vordergrundpfade, aus denen dieses SVG besteht, ein <rect>-Element hinzufügen. Wenn das Logo kreisförmig oder oval wäre, hätte ich das <circle>- oder <ellipse>-Element verwendet. Achten Sie darauf, eine Höhe und Breite festzulegen, die mit der viewBox übereinstimmen, wenn Sie diesen Elementtyp hinzufügen, und verwenden Sie den rx-Wert, um die Ecken nach Bedarf abzurunden. Anstatt jeder Pfad im SVG-Element eine Klasse oder eine Füllung hinzuzufügen, können wir die <rect>- und <path>-Elemente in der CSS-Datei ansprechen.

Der Vorteil dieses Ansatzes liegt in seiner Einfachheit. Anstatt mehrere Dateien ändern oder JavaScript oder JavaScript-Bibliotheken von Drittanbietern verwenden zu müssen, können wir eine Codezeile zum SVG-Codeblock hinzufügen und diese gestalten.

Wenn Sie aus irgendeinem Grund die SVG-Datei unverändert lassen müssen oder bevorzugen, können Sie das CSS überarbeiten, um eine ähnliche Funktionalität zu erreichen.

Wir könnten eine background-Eigenschaft auf die social-link-Klasse setzen, aber für dieses Tutorial werde ich stattdessen die etwas kompliziertere, aber ebenso effektive Strategie anwenden, ein SVG zu überarbeiten, indem ich ihm ein Pseudoelement hinzufüge. Im folgenden Beispiel habe ich die ::before-Pseudoklasse verwendet, um eine Form hinzuzufügen, und die opacity-Eigenschaft, um sie beim Hovern sichtbar zu machen. Um zu vermeiden, dass diese Form einen Rand um das Symbol hinterlässt, habe ich sie mit den height- und width-Eigenschaften (calc(100% - 2px)) etwas kleiner als das SVG gemacht. Dann zentriere ich das Pseudoelement hinter dem SVG und stimme die transition-Eigenschaft für Element und Pseudoelement ab.

/* Sets the link's dimensions */
.social-link {
  display: block;
  height: 24px;
  position: relative;
  width: 24px;
}

/* Targets the pseudo-element to create a new layer */
.social-link::before {
  background: #fff;
  border-radius: 2px;
  content: "";
  display: block;
  height: calc(100% - 2px);
  opacity: 0;
  position: absolute;
  transition: all 0.2s ease-in-out;
  width: calc(100% - 2px);
}

/* Changes the background color of the pseudo-element on hover and focus */
.social-link::before:hover, .social-link::before:focus {
  background: #000;
}

/* Makes sure the actual SVG element is layered on top of the pseudo-element */
.social-link svg {
  position: relative;
  z-index: 1;
}

/* Makes the background-color transition smooth */
.social-link svg path {
  transition: all 0.2s ease-in-out;
}

/* SVG paths are initially white */
.social-link path {
  fill: #fff;
}

/* The pseudo-elememt comes into full view on hover and focus */
.social-link:hover::before, .social-link:focus::before {
  opacity: 1;
}

/* Fills the SVG paths to black on hover and focus  */
.social-link:hover svg path, .social-link:focus svg path {
  fill: #000;
}

Ich empfehle die oben genannten Strategien für eine schnelle Lösung, da die Verwendung von Vanilla-JavaScript oder einer JavaScript-Bibliothek wie vivus.js oder raphaeljs in den meisten Fällen übertrieben ist, um einem SVG einen Hover-Zustand hinzuzufügen. Es gibt jedoch Zeiten, in denen die Modifizierung eines SVG mit JavaScript vorteilhaft ist. Da JavaScript zweifellos die flexibelste Methode ist, Stile zu ändern, wollen wir uns ansehen, wie das aussehen könnte.

Mein Beispiel trennt die JavaScript-Datei, aber wenn Sie JavaScript innerhalb des SVG-Elements selbst hinzufügen möchten, müssen Sie ein <script>-Element hinzufügen, genau wie in einer HTML-Datei. Stellen Sie sicher, dass Sie Ihrem <script>-Element ein CDATA-Marker hinzufügen, um sicherzustellen, dass es als XML geparst wird.

Ich verwende jQuery, um die Dinge etwas zu vereinfachen und CSS so minimal wie möglich zu halten, obwohl ich aus Klarheitsgründen eine background-Eigenschaft auf die social-link-Klasse in der CSS-Datei hinzugefügt habe, anstatt sie über JavaScript hinzuzufügen. Beachten Sie, dass diese Lösung svg path anspricht, wenn sie die CSS-Methode ändert, anstatt diesen Pfaden eine Klasse zuzuweisen, da in diesem Fall jeder Pfad gleich behandelt werden sollte.

Es gibt viele, viele Möglichkeiten, SVGs zu gestalten, aber die in diesem Artikel gesammelten Beispiele sind nützlich und erweiterbar. Strategien zur Änderung von SVG-Dateien müssen anhand der vollständigen Funktionalität einer Anwendung bewertet werden, aber ich vermute, dass die meisten Frontend-Entwickler feststellen werden, dass das <rect>-Element die einfachste und lesbarste Lösung bietet.

Danksagungen

Vielen Dank an Joe Essey und meine Frontend-Kollegen von Nebo Agency, Allison Lewis und Nile Livingston (schauen Sie sich Niles Artikel „SVGs für das Web“ an).

Danksagungen

Kommentare