Konvertieren Sie SVG in Base64 online oder über C#

Bilder online kodieren

Über das URI-Schema

Daten-URI ist eine Methode zum Einbetten von Bildern und anderen Dateien in Webseiten als Textzeichenfolge basierend auf Base64-Codierung. Mit dem Daten-URI-Schema können Sie beliebige Binärdaten in HTML-, CSS-, JSON- oder SVG-Dokumente einfügen. Sie können beispielsweise Bilder in eine Webseite einbetten, als ob sie von einer externen Ressource geladen würden, aber anstatt die URL der Datei anzugeben, fügen Sie den Base64-codierten Inhalt des Bildes ein. Der Hauptvorteil der Verwendung von Daten-URIs ist eine Beschleunigung des Seitenladens, da der Browser keine zusätzliche Webanforderung stellen muss, um die Datei abzurufen, da das Bild bereits in das HTML-Dokument eingebettet ist.

Die Syntax des Daten-URI lautet wie folgt: data:[<mime type>][;charset=<charset>][;base64],<codierte Daten>.

SVG-Dateien können „unsichere“ Zeichen enthalten. Vektorgrafiken können Raster als eingebetteten Inhalt oder Attribute haben, deren Werte in einfachen oder doppelten Anführungszeichen stehen. Daher ist eine Vorverarbeitung (Normalisierung) dieses Formats erforderlich. Sie können SVG in HTML oder CSS über Daten-URI verwenden. Wenn SVG mit Daten-URI codiert ist, funktioniert es in jedem Browser.

So konvertieren Sie SVG in Base64 in C#

Um das SVG-Bild in eine Base64-Zeichenfolge zu konvertieren, verwenden wir die API Aspose.SVG for .NET, die eine funktionsreiche, leistungsstarke und einfach zu bedienende API ist - Verwenden Sie die Dokumentbearbeitungs-API für die C#-Plattform. Wir betrachten das Beispiel eines SVG-Bildes für die Base64-Codierung und das Einbetten einer Base64-Zeichenfolge als Daten-URI in ein SVG-Dokument. Diese Operationen können mit ein paar Zeilen Code durchgeführt werden:

    // Open an SVG image
    var bytes = File.ReadAllBytes(@"flower.svg");
    // Initialize an SVGDocument object
    var document = new SVGDocument();
    // Create an image element
    var img = (SVGImageElement)document.CreateElementNS("http://www.w3.org/2000/svg", "image");
    // Convert SVG image to Base64
    img.Href.BaseVal = "data:image/svg+xml;charset=utf-8;base64," + Convert.ToBase64String(bytes);
    // Add the image element into the SVG document
    document.RootElement.AppendChild(img);
    // Save the SVG document
    document.Save(@"image-base64.svg");

Schritte zum Konvertieren von SVG in Base64 in C#

1. Öffnen Sie ein zu konvertierendes SVG-Bild. Verwenden Sie die ReadAllBytes(path)-Methode, um das SVG-Bild zu öffnen und den Inhalt der Datei in ein Byte-Array einzulesen.
2. Initialisieren Sie eine neue Instanz der Klasse SVGDocument.
3. Verwenden Sie die Methode CreateElementNS(namespaceURI,qualifiedName) der SVGDocument-Klasse, um eine zu erstellen Bildinstanz. Der namespaceURI setzt den Verweis auf die W3C-SVG-Spezifikation. Der qualifiedName muss den String-Tag-Namen des Bildelements enthalten.
4. Konvertieren Sie SVG in Base64. Rufen Sie die ToBase64String(bytes)-Methode auf, um ein Array von 8-Bit-Ganzzahlen in die entsprechende Zeichenfolgendarstellung zu konvertieren, die in Base64-Ziffern codiert ist.
5. Fügen Sie das Bildelement mit der Methode AppendChild(node) zum SVG-Dokument hinzu.
6. Verwenden Sie die Methode Save(path), um das SVG-Dokument zu speichern.

Vor- und Nachteile von Daten-URI

Der Daten-URI bietet uns eine clevere Möglichkeit, Bilder auf einer Webseite einzubetten. URI-Schemata können auf viele Arten verwendet werden. Aber in jedem Fall gibt es Vor- und Nachteile.

Vorteile:

• Beschleunigung des Ladens von Seiten. Der Browser muss keine zusätzliche Webanforderung stellen, um die Datei abzurufen, da das Bild bereits in das HTML-Dokument eingebettet ist.
• Leistungsverbesserung. Der Browser benötigt weniger CPU-Zeit.
• Webseiten werden unabhängig von externen Dateien, sodass sie auch offline einfach geteilt werden können.

Nachteile:

• Die Größe der Base64-codierten Daten ist 1/3 größer als das Binärbild.
• Die verschlüsselten Bilder werden nicht vom Browser zwischengespeichert und bei jedem Besuch einer solchen Seite heruntergeladen.
• Codierte Bilder sind schwer zu bearbeiten, da die Base64-Zeichenfolge zuerst decodiert werden muss.
• Ein Base64-Bild wird niemals von Google indiziert, da es nicht in den Ergebnissen der Bildersuche erscheint.
  
  

Online-Base64-Encoder

Aspose.SVG bietet kostenlose Online-Anwendungen zum Kodieren und Dekodieren von Binärdaten:

• Base64-Encoder sind eine Reihe von Tools, mit denen Sie Binärdaten in verschiedenen Ausgabeformaten codieren können: Plain Base64, JSON, XML, URI oder CSS.
• Image Base64 Decoder konvertiert einen Daten-URI, der eine Base64-Zeichenfolge enthält, in ein Bild, indem eine URI-Zeichenfolge in das Eingabesteuerelement eingefügt wird.

Unsere browserbasierten Anwendungen funktionieren auf allen Plattformen, einschließlich Windows, Linux, Mac OS, Android und iOS. Für Sie ist keine Registrierung, Plugin- oder Softwareinstallation erforderlich. Beginnen Sie mit der sicheren, sicheren und einfachen Nutzung unserer Online-Base64-Codierungs-/Decodierungstools!

Anwendungsbeispiele für die Base64-Codierung

<svg xmlns="http://www.w3.org/2000/svg">
	<image href="data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlna..." alt="Blue flower"/>
</svg>

<body>
    <div>
        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlna..." alt="Blue flower">
    </div>
</body>

.class {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUwIiBoZWlna...');
}

<?xml version="1.0" encoding="UTF-8"?>
<root>
<image mime = "image/svg+xml">PHN2ZyB3aWR0aD0iNDUwIiBoZWlna...</image>
</root>

{
  "image": {
    "mime": "image/svg+xml",
    "data": "PHN2ZyB3aWR0aD0iNDUwIiBoZWlna..."
  }
}

FAQ

Erste Schritte mit der Aspose.SVG for .NET API