SVG aus einer Website mit Java extrahieren

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 außergewöhnliche Fähigkeit, sich ohne Qualitätsverlust auf jede Größe zu skalieren. Darüber hinaus bietet SVG eine Reihe von Vorteilen, darunter Programmierbarkeit, geringe Dateigröße, Styling-Optionen, Interaktivität und vieles mehr, was die visuelle Attraktivität und Funktionalität einer Webseite verbessern kann.

Das Herunterladen von SVG ist nicht so einfach, wie es vielleicht scheint. Wenn Sie schon einmal die rechte Maustaste verwendet haben, um ein Bild von einer Webseite zu speichern oder zu öffnen, haben Sie wahrscheinlich bemerkt, 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 können Sie also tun? Sie können den HTML-Code manuell überprüfen, um SVG-Tags zu identifizieren und festzustellen, wo der SVG-Inhalt beginnt und endet. Zum Glück gibt es eine einfachere Lösung: Sie können Aspose.HTML for Java verwenden, um SVG-Dateien programmatisch von einer Website herunterzuladen.

SVG-Grafiken können auf zwei Arten in Webseiten eingebettet werden: als inline SVG innerhalb des HTML oder als external SVG, auf das über URLs verwiesen wird. In diesem Artikel wird gezeigt, wie man sowohl Inline- als auch externe SVGs mit Hilfe der Aspose.HTML for Java API extrahieren kann. Mit diesem Ansatz können Sie automatisch alle SVGs von einer Website sammeln, ohne den Code manuell durchsuchen zu müssen. Lassen Sie uns eintauchen und die SVG-Extraktion mühelos machen!

SVG von 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 verlinken. 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 der Klasse Element, um ihren Inhalt zu erhalten. Um SVG-Bilder von einer Website herunterzuladen, sollten Sie die folgenden Schritte ausführen:

1. Verwenden Sie den HTMLDocument(Url) Konstruktor, um eine Instanz von HTMLDocument zu erstellen und übergeben Sie die URL der Webseite, die Inline-SVG-Bilder enthält.
2. Rufen Sie die Methode getElementsByTagName(“img”) auf, um alle im HTML-Dokument vorhandenen <svg>-Elemente zu sammeln.
3. Erstellen Sie eine Schleife, um durch jedes SVG-Bild in der images-Sammlung zu iterieren.
4. Für jedes Bild im Array verwenden Sie die Methode getOuterHTML(), um den Inhalt des SVG-Elements zu erhalten, und verwenden Sie dann die Methode FileHelper.writeAllText(), um den SVG-Inhalt in eine lokale .svg-Datei zu schreiben.

// Open a document you want to download inline SVG images from
final 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.getLength(); i++) {
    // Save every image to a local file system
    FileHelper.writeAllText("{i}.svg", images.get_Item(i).getOuterHTML());
}

Hinweis: Beachten Sie immer die Urheberrechtsgesetze, wenn Sie mit SVG-Dateien arbeiten. Einige SVG-Dateien, wie z. B. Firmenlogos oder Markengrafiken, können geschützt sein, und ihre Verwendung ohne Erlaubnis kann als Plagiat angesehen werden. Bevor Sie SVG-Dateien extrahieren oder in Ihren Projekten verwenden, prüfen Sie die Nutzungsbedingungen der Website oder kontaktieren Sie den Eigentümer der Website, um eine entsprechende Genehmigung einzuholen.

SVG von einer Website extrahieren – External SVG

External 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, weshalb SVG-Bilder weiter gefiltert werden sollten. Schauen wir uns an, wie man SVG von einer Website mit Hilfe der Aspose.HTML for Java-Bibliothek herunterladen kann:

1. Erstellen Sie eine Instanz der Klasse HTMLDocument mit dem Konstruktor HTMLDocument(Url) und übergeben Sie die URL der Website, aus der Sie externe SVG-Bilder extrahieren möchten.
2. Sammeln Sie alle <img> Elemente im HTML Dokument mit der getElementsByTagName("img") Methode.
3. Extrahieren Sie das Attribut src von jedem Bildelement mit der Methode getAttribute(“src”) und speichern Sie die Werte in einem Set.
4. Filtern Sie nur .svg Bild-URLs, indem Sie prüfen, ob jede URL mit .svg endet, und fügen Sie diese zu einer neuen Liste hinzu.
5. Erstellen absoluter SVG-Bild-URLs unter Verwendung der Klasse Url und der Eigenschaft BaseURI der Klasse HTMLDocument.
6. Iterieren Sie durch die absoluten URLs und erstellen Sie eine Anfrage mit der Klasse RequestMessage für jede SVG-URL.
7. Senden Sie jede Anfrage mit document.getContext().getNetwork().send(request) und prüfen Sie die Antwort auf Erfolg.
8. Wenn die Antwort erfolgreich ist, verwenden Sie FileHelper.writeAllBytes(), um den SVG-Inhalt im lokalen Dateisystem zu speichern.

// Open a document you want to download external SVGs from
final 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
java.util.Set<String> urls = new HashSet<>();
for (Element element : images) {
    urls.add(element.getAttribute("src"));
}

// Filter out non SVG images
java.util.List<String> svgUrls = new ArrayList<>();
for (String url : urls) {
    if (url.endsWith(".svg")) {
        svgUrls.add(url);
    }
}
// Create absolute SVG image URLs
java.util.List<Url> absUrls = svgUrls.stream()
    .map(src -> new Url(src, document.getBaseURI()))
    .collect(Collectors.toList());

// foreach to while statements conversion
for (Url url : absUrls) {
    // Create a downloading request
    final RequestMessage request = new RequestMessage(url);

    // Download SVG image
    final ResponseMessage response = document.getContext().getNetwork().send(request);

    // Check whether response is successful
    if (response.isSuccess()) {
        String[] split = url.getPathname().split("/");
        String path = split[split.length - 1];

        // Save file to a local file system
        FileHelper.writeAllBytes(path, response.getContent().readAsByteArray());
    }
}

Dieser Ansatz automatisiert die Extraktion von externen SVG-Bildern aus einer Webseite und erspart Ihnen die Zeit und den Aufwand, jede Datei manuell herunterzuladen. Dies ist ideal für Designer und Entwickler, die SVGs von Websites extrahieren wollen, ohne in den Quellcode eintauchen zu müssen.

Aspose.HTML bietet eine Reihe kostenloser Online- HTML-Webanwendungen, darunter Konverter, Merger, SEO-Tools, HTML-Code-Generatoren, URL-Utilities und mehr. Diese Browser-Tools funktionieren auf allen Betriebssystemen und erfordern keine Installation zusätzlicher Software. Ganz gleich, ob Sie Dateien konvertieren oder zusammenführen, Webdaten extrahieren, HTML-Code generieren oder Seiten für die Suchmaschinenoptimierung analysieren müssen, Sie können alles direkt im Web erledigen. Rationalisieren Sie Ihre täglichen Aufgaben und steigern Sie Ihre Produktivität mit unseren benutzerfreundlichen HTML Web Apps – jederzeit und überall.