SVG von Website extrahieren – C# Beispiele

SVG ist ein Vektorgrafikformat, das hauptsächlich für das Web entwickelt wurde und häufig in HTML-Dokumenten verwendet wird. Der Hauptvorteil von SVG ist seine unübertroffene Fähigkeit, sich ohne Qualitätseinbußen an jede Größe anzupassen. Zusammen mit anderen Vorteilen wie Programmierbarkeit, geringe Dateigröße, Styling, Interaktivität und mehr kann SVG die visuelle Attraktivität und Funktionalität von Webseiten verbessern. Wenn Sie ein Designer oder Entwickler sind, ziehen Sie es manchmal vor, SVG-Bilder von einer Website zu beziehen.

Das Herunterladen von SVG-Dateien ist nicht so einfach, wie es vielleicht scheint. Wenn Sie schon einmal mit der rechten Maustaste auf eine Webseite geklickt haben, um ein Bild zu speichern oder zu öffnen, haben Sie wahrscheinlich festgestellt, dass es schwierig ist, SVG-Dateien von einer Website zu extrahieren. Manchmal lässt sich das Bild mit der rechten Maustaste nicht in einer neuen Registerkarte öffnen oder speichern. Was ist zu tun? Soll man sich die SVG-Tags ansehen und feststellen, wo die SVG im HTML-Code der Webseite beginnt und endet? Glücklicherweise können Sie Aspose.HTML for .NET library verwenden, um SVG programmatisch von einer Website herunterzuladen.

SVG-Bilder in HTML-Dokumenten gibt es in zwei Formen – inline SVG und externes SVG. In diesem Artikel sehen wir uns an, wie man beide Arten dieser Bilder mit Aspose.HTML for .NET API extrahieren kann. Mit unserer C#-Bibliothek können Sie alle SVGs von jeder Website finden und extrahieren. Das ist besser als die manuelle Suche nach ihnen. Versuchen wir es!

SVG aus einer Website extrahieren – Inline SVG

Inline SVG-Bilder sind SVG-Elemente <svg>, deren Inhalt das Bild beschreibt. Inline SVG bedeutet, dass der SVG-Code direkt in den HTML-Code eingebettet wird, anstatt auf eine externe SVG-Datei zu verweisen. Dies ist eine beliebte Technik zur Erstellung von Website-Symbolen, Logos und anderen grafischen Elementen.

Um Inline-SVG-Bilder zu speichern, suchen wir alle <svg>-Elemente in einem HTML-Dokument und verwenden die Eigenschaft OuterHTML, um ihren Inhalt zu erhalten. Um SVG-Bilder von einer Website herunterzuladen, sollten Sie die folgenden Schritte ausführen:

1. Verwenden Sie den Konstruktor HTMLDocument(Url), um eine Instanz der Klasse HTMLDocument zu erstellen und übergeben Sie ihm die URL der Website, aus der Sie Inline-SVG-Bilder extrahieren möchten.
2. Verwenden Sie die Methode GetElementsByTagName("svg"), um alle <svg>-Elemente zu sammeln. Die Methode gibt eine Liste der <svg>-Elemente des HTML-Dokuments zurück.
3. Erstellen Sie eine Schleife, um jedes SVG-Bild im Array images zu durchlaufen.
4. Verwenden Sie für jedes Bild im Array die Eigenschaft OuterHTML, um den Inhalt des SVG-Elements zu erhalten, und die Methode File.WriteAllText(), die den SVG-Inhalt in eine lokale Datei schreibt.

// How to extract inline SVG images from a webpage using C#

// Open a document you want to download inline SVG images from
using HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/net/");

// Collect all inline SVG images
HTMLCollection images = document.GetElementsByTagName("svg");

for (int i = 0; i < images.Length; i++)
{
    // Save each SVG element as an individual .svg file
    File.WriteAllText(Path.Combine(OutputDir, $"{i}.svg"), images[i].OuterHTML);
}

Hinweis: Einige SVG-Dateien können urheberrechtlich geschützt sein. Prüfen Sie daher die Nutzungsbedingungen, bevor Sie sie extrahieren und verwenden. Wenn Sie zum Beispiel das Firmenlogo oder andere extrahierte SVG-Dateien in Ihren Designprojekten verwenden, kann dies als Plagiat angesehen werden und Sie sollten es nicht tun. Es könnte eine gute Idee sein, die Eigentümer der Website um Erlaubnis zu fragen, bevor Sie ihre Dateien verwenden.

SVG von Website extrahieren – Externes SVG

Externes SVG ist eine SVG-Datei, die außerhalb eines HTML-Dokuments gespeichert ist und in das Dokument geladen wird, z. B. mit einem <img>-Tag. Durch die Trennung von SVG-Dateien und HTML ist es möglich, dasselbe SVG-Bild an mehreren Stellen wiederzuverwenden, ohne den Code zu duplizieren, wodurch Webseiten effizienter und leichter zu pflegen sind.

Externe SVG-Bilder werden durch das <img>-Element dargestellt, das wiederum auch auf andere Bildtypen verweisen kann, so dass SVG-Bilder weiter gefiltert werden sollten. Schauen wir uns an, wie man SVG von einer Website mit der Aspose.HTML for .NET-Bibliothek herunterladen kann:

1. Verwenden Sie den Konstruktor HTMLDocument(Url), um eine Instanz der Klasse HTMLDocument zu erstellen, und übergeben Sie ihm die URL der Website, aus der Sie externe SVGs extrahieren möchten.
2. Verwenden Sie die Methode GetElementsByTagName("img"), um alle <img>-Elemente zu sammeln. Die Methode gibt eine Liste der <img>-Elemente des HTML-Dokuments zurück.
3. Verwenden Sie die Methode Select(), um eine eigene Sammlung von relativen Bild-URLs zu erstellen, und die Methode GetAttribute("src"), um das Attribut src jedes <img>-Elements zu extrahieren.
4. Um Nicht-SVG-Bilder herauszufiltern, verwenden Sie die Methoden Where() und EndsWith(), um zu prüfen, ob die URL mit der Erweiterung .svg endet.
5. Erstellen Sie absolute SVG-Bild-URLs mit Hilfe der Klasse Url und der Eigenschaft BaseURI der Klasse HTMLDocument.
6. Erstellen Sie dann für jede absolute URL eine Anfrage mit Hilfe der Klasse RequestMessage.
7. Verwenden Sie die Methode Context.Network.Send(request) des Dokuments, um die Anfrage zu senden. Die Antwort wird geprüft, um sicherzustellen, dass sie erfolgreich war.
8. Wenn die Antwort erfolgreich war, verwenden Sie die Methode File.WriteAllBytes(), um das SVG in einer lokalen Datei zu speichern.

// Download external SVG images from HTML using C#

// Open a document you want to download external SVGs from
using HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/net/");

// Collect all image elements
HTMLCollection images = document.GetElementsByTagName("img");

// Create a distinct collection of relative image URLs
IEnumerable<string> urls = images.Select(element => element.GetAttribute("src")).Distinct();

// Filter out non SVG images
IEnumerable<string> svgUrls = urls.Where(url => url.EndsWith(".svg"));

// Create absolute SVG image URLs
IEnumerable<Url> absUrls = svgUrls.Select(src => new Url(src, document.BaseURI));

foreach (Url url in absUrls)
{
    // Create a downloading request
    using RequestMessage request = new RequestMessage(url);

    // Download SVG image
    using ResponseMessage response = document.Context.Network.Send(request);

    // Check whether response is successful
    if (response.IsSuccess)
    {
        // Save SVG image to a local file system
        File.WriteAllBytes(Path.Combine(OutputDir, url.Pathname.Split('/').Last()), response.Content.ReadAsByteArray());
    }
}

Mit diesen C#-Beispielen können Sie das Extrahieren aller SVG-Bilder aus einer Webseite automatisieren, was für Aufgaben wie die Archivierung oder Analyse von Webinhalten hilfreich sein kann. Auch für Designer und Entwickler, die SVGs von Websites extrahieren möchten, ohne in den Quellcode eintauchen zu müssen, ist dies eine tolle Sache.

Sie können die vollständigen C#-Beispiele und Datendateien von GitHub herunterladen.

Aspose.HTML bietet HTML-Webanwendungen, die eine Online-Sammlung von kostenlosen Konvertern, Zusammenführungen, SEO-Tools, HTML-Code-Generatoren, URL-Tools und mehr sind. Die Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Konvertieren, fusionieren, kodieren, generieren Sie HTML-Code, extrahieren Sie Daten aus dem Web oder analysieren Sie Webseiten im Hinblick auf SEO, wo immer Sie sind. Nutzen Sie unsere Sammlung von HTML-Webanwendungen, um Ihre täglichen Aufgaben zu erledigen und Ihren Arbeitsablauf nahtlos zu gestalten!