SVG URL Encoder
SVG kann in CSS als URL verwendet werden, aber ohne Kodierung funktioniert es nicht in allen Browsern.
Wenn die Kodierung encodeURIComponent()
für SVG verwendet wird, funktioniert es überall.
SVG muss das Attribut xmlns haben: xmlns='http: //www.w3.org/2000/svg'
.
Falls es nicht existiert, wird es automatisch hinzugefügt
Kodiertes SVG kann im background
, im border-image
oder in der mask
verwendet werden (Live-Demo).
FAQ
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.
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.
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.
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.
Beispiele für codiertes SVG
SVG zu CSS Konvertierungstabelle
SVG | CSS |
---|---|
<svg><circle r="50" cx="50" cy="50" fill="tomato"/><circle r="41" cx="47" cy="50" fill="orange"/><circle r="33" cx="48" cy="53" fill="gold"/><circle r="25" cx="49" cy="51" fill="yellowgreen"/><circle r="17" cx="52" cy="50" fill="lightseagreen"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3C/svg%3E"); |
<svg><rect x="10" y="10" width="30" height="30"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='30' height='30'/%3E%3C/svg%3E"); |
<svg><circle cx="25" cy="75" r="20"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='75' r='20'/%3E%3C/svg%3E"); |
<svg><ellipse cx="75" cy="75" rx="20" ry="5"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='75' cy='75' rx='20' ry='5'/%3E%3C/svg%3E"); |
<svg><line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='10' x2='50' y1='110' y2='150' stroke='black' stroke-width='5'/%3E%3C/svg%3E"); |
<svg><polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145'/%3E%3C/svg%3E"); |
<svg><polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180'/%3E%3C/svg%3E"); |
<svg><polygon points="12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10" fill="gold"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10' fill='gold'/%3E%3C/svg%3E"); |
<svg><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E"); |
<svg><path d="M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z'/%3E%3C/svg%3E"); |
<svg><path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 10 C 20 20, 40 20, 50 10' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |
<svg><path d="M 70 10 C 70 20, 110 20, 110 10" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 10 C 70 20, 110 20, 110 10' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |
<svg><path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 10 C 120 20, 180 20, 170 10' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |
<svg><path d="M 10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 60 C 20 80, 40 80, 50 60' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |
<svg><path d="M 70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 60 C 70 80, 110 80, 110 60' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |
<svg><path d="M 130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 60 C 120 80, 180 80, 170 60' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |
<svg><path d="M 10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 110 C 20 140, 40 140, 50 110' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |
<svg><path d="M 70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 110 C 70 140, 110 140, 110 110' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |
<svg><path d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 110 C 120 140, 180 140, 170 110' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |
<svg><path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/></svg> | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80' stroke='black' fill='transparent'/%3E%3C/svg%3E"); |