SVG URL Encoder

Was ist SVG?

SVG steht für Scalable Vector Graphics. SVG wird verwendet, um vektorbasierte Grafiken für das Web zu definieren. SVG definiert Grafiken im XML-Format. Jedes Element und Attribut in SVG-Dateien kann animiert werden.

• Wikipedia - Scalable Vector Graphics

Wie verwende ich SVG in CSS?

Um SVG-Code direkt in CSS zu verwenden, müssen Sie den SVG-Code für die weitere Verwendung kodieren. Um SVG zu kodieren, können Sie dieses SVG-URL-Kodierungstool oder die JavaScript-Funktion encodeURIComponent() verwenden. Eine kodierte SVG-Daten-URI kann mit den CSS-Eigenschaften background-image, border-image und mask über die Funktion url() verwendet werden. Beispiel: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

Wie ändere ich die Farbe von SVG in CSS?

Um die Farbe eines SVG zu ändern, können Sie die CSS-Eigenschaften „Maske“ und „Hintergrundfarbe“ kombinieren. Das folgende Beispiel ändert die Farbe eines SVG in Blau. Beispiel: mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E"); background-color: blue;

Was ist eine URL?

Eine URL (Uniform Resource Locator) ist die Adresse einer eindeutigen Ressource im Internet. Sie ist einer der wichtigsten Mechanismen, die von Browsern zum Extrahieren von Ressourcen wie HTML-Seiten, CSS-Dokumenten, Bildern usw. verwendet werden.

• MDN - What is a URL?

Wie kodiert man eine URL?

Zum Kodieren einer URL können Sie die Funktion encodeURIComponent() verwenden, die eine URI kodiert, indem sie jedes Vorkommen bestimmter Zeichen durch eine, zwei, drei oder vier Escape-Sequenzen ersetzt, die die UTF-8-Kodierung des Zeichens darstellen. Im Vergleich zu encodeURI() kodiert diese Funktion mehr Zeichen, einschließlich derjenigen, die Teil der URI-Syntax sind.

• MDN - encodeURIComponent()

Wie dekodiert man eine URL?

Um eine URL zu dekodieren, können Sie die Funktion decodeURIComponent() verwenden, die die URI dekodiert, indem sie jede Escape-Sequenz in der Form %XX als eine UTF-8-Codeeinheit (ein Byte) behandelt. In UTF-8 gibt die Anzahl der führenden 1-Bits im ersten Byte, die 0 (für 1-Byte-ASCII-Zeichen), 2, 3 oder 4 sein kann, die Anzahl der Bytes im Zeichen an.

• MDN - decodeURIComponent()