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:
- Verwenden Sie den Konstruktor
HTMLDocument(
Url
), um eine Instanz der KlasseHTMLDocument
zu erstellen und übergeben Sie ihm die URL der Website, aus der Sie Inline-SVG-Bilder extrahieren möchten. - 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. - Erstellen Sie eine Schleife, um jedes SVG-Bild im Array
images
zu durchlaufen. - 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.
1// How to extract inline SVG images from a webpage using C#
2
3// Open a document you want to download inline SVG images from
4using HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/net/");
5
6// Collect all inline SVG images
7HTMLCollection images = document.GetElementsByTagName("svg");
8
9for (int i = 0; i < images.Length; i++)
10{
11 // Save each SVG element as an individual .svg file
12 File.WriteAllText(Path.Combine(OutputDir, $"{i}.svg"), images[i].OuterHTML);
13}
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:
- Verwenden Sie den Konstruktor
HTMLDocument(
Url
), um eine Instanz der KlasseHTMLDocument
zu erstellen, und übergeben Sie ihm die URL der Website, aus der Sie externe SVGs extrahieren möchten. - 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. - Verwenden Sie die Methode
Select()
, um eine eigene Sammlung von relativen Bild-URLs zu erstellen, und die Methode GetAttribute("src"
), um das Attributsrc
jedes<img>
-Elements zu extrahieren. - Um Nicht-SVG-Bilder herauszufiltern, verwenden Sie die Methoden
Where()
undEndsWith()
, um zu prüfen, ob die URL mit der Erweiterung .svg endet. - Erstellen Sie absolute SVG-Bild-URLs mit Hilfe der Klasse
Url und der Eigenschaft
BaseURI der Klasse
HTMLDocument
. - Erstellen Sie dann für jede absolute URL eine Anfrage mit Hilfe der Klasse RequestMessage.
- 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. - Wenn die Antwort erfolgreich war, verwenden Sie die Methode
File.WriteAllBytes()
, um das SVG in einer lokalen Datei zu speichern.
1// Download external SVG images from HTML using C#
2
3// Open a document you want to download external SVGs from
4using HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/net/");
5
6// Collect all image elements
7HTMLCollection images = document.GetElementsByTagName("img");
8
9// Create a distinct collection of relative image URLs
10IEnumerable<string> urls = images.Select(element => element.GetAttribute("src")).Distinct();
11
12// Filter out non SVG images
13IEnumerable<string> svgUrls = urls.Where(url => url.EndsWith(".svg"));
14
15// Create absolute SVG image URLs
16IEnumerable<Url> absUrls = svgUrls.Select(src => new Url(src, document.BaseURI));
17
18foreach (Url url in absUrls)
19{
20 // Create a downloading request
21 using RequestMessage request = new RequestMessage(url);
22
23 // Download SVG image
24 using ResponseMessage response = document.Context.Network.Send(request);
25
26 // Check whether response is successful
27 if (response.IsSuccess)
28 {
29 // Save SVG image to a local file system
30 File.WriteAllBytes(Path.Combine(OutputDir, url.Pathname.Split('/').Last()), response.Content.ReadAsByteArray());
31 }
32}
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!