Extraire des SVG d'un site Web à l'aide d'Aspose.HTML for Java

SVG est un format graphique vectoriel conçu principalement pour le web, souvent utilisé dans les documents HTML. Le principal avantage du SVG est sa capacité exceptionnelle à s’adapter à toutes les tailles sans perte de qualité. En outre, le SVG offre plusieurs avantages, notamment la programmabilité, la taille réduite des fichiers, les options de style, l’interactivité et bien d’autres encore, qui peuvent tous améliorer l’attrait visuel et la fonctionnalité d’une page web.

Le téléchargement de SVG n’est pas aussi simple qu’il n’y paraît. Si vous avez déjà utilisé le bouton droit de la souris pour enregistrer ou ouvrir une image à partir d’une page web, vous avez probablement remarqué que les fichiers SVG sont difficiles à extraire d’un site web. Parfois, le clic droit ne permet pas d’ouvrir l’image dans un nouvel onglet ou de l’enregistrer. Que faire alors ? Vous pouvez inspecter manuellement le code HTML pour identifier les balises SVG et déterminer où le contenu SVG commence et se termine. Heureusement, il existe une solution plus simple : vous pouvez utiliser Aspose.HTML for Java pour télécharger par programme des fichiers SVG à partir d’un site web.

Les graphiques SVG sur les pages web peuvent être intégrés de deux manières : en tant que svg en ligne dans le HTML ou en tant que svg externe référencé via des URL. Dans cet article, nous verrons comment extraire les SVG inline et externes à l’aide de l’API Aspose.HTML for Java. Grâce à cette approche, vous pouvez collecter automatiquement tous les SVG d’un site web sans avoir à parcourir manuellement le code. Plongeons dans cet article et rendons l’extraction de SVG sans effort !

Extraire SVG d’un site web – Inline SVG

les images Inline SVG sont des éléments SVG <svg> dont le contenu décrit l’image. Le SVG en ligne consiste à intégrer le code SVG directement dans le code HTML plutôt que de créer un lien vers un fichier SVG externe. Il s’agit d’une technique populaire pour créer des icônes, des logos et d’autres éléments graphiques pour les sites web.

Pour sauvegarder des images SVG en ligne, nous trouverons tous les éléments <svg> dans un document HTML et utiliserons la propriété OuterHTML de la classe Element pour obtenir leur contenu. Ainsi, pour télécharger des SVG à partir d’un site web, vous devez suivre les étapes suivantes :

1. Utilisez le constructeur HTMLDocument(Url) pour créer une instance de HTMLDocument, en passant l’URL de la page web contenant des images SVG en ligne.
2. Appelez la méthode getElementsByTagName(“img”) pour collecter tous les éléments <svg> présents dans le document HTML.
3. Créer une boucle pour parcourir chaque image SVG dans la collection images.
4. Pour chaque image du tableau, utilisez la méthode getOuterHTML() pour obtenir le contenu de l’élément SVG, puis utilisez la méthode FileHelper.writeAllText() pour écrire le contenu SVG dans un fichier .svg local.

// 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());
}

Note: Respectez toujours les lois sur les droits d’auteur lorsque vous travaillez avec des fichiers SVG. Certains fichiers SVG, tels que les logos d’entreprise ou les graphiques de marque, peuvent être protégés et leur utilisation sans autorisation peut être considérée comme du plagiat. Avant d’extraire ou d’utiliser des fichiers SVG dans vos projets, vérifiez les conditions d’utilisation du site web ou contactez le propriétaire du site pour obtenir l’autorisation nécessaire.

Extraire un SVG d’un site web – External SVG

Un SVG externe est un fichier SVG stocké en dehors d’un document HTML et chargé dans le document à l’aide, par exemple, d’une balise <img>. La séparation des fichiers SVG du HTML permet de réutiliser la même image SVG à plusieurs endroits sans dupliquer le code, ce qui rend les pages web plus efficaces et plus faciles à maintenir.

Les images SVG externes sont représentées par l’élément <img>, qui peut à son tour faire référence à d’autres types d’images, de sorte que les images SVG doivent faire l’objet d’un filtrage supplémentaire. Voyons comment télécharger des SVG à partir d’un site web en utilisant la bibliothèque Aspose.HTML for Java :

1. Créez une instance de la classe HTMLDocument en utilisant le constructeur HTMLDocument(Url) et passez l’URL du site web à partir duquel vous souhaitez extraire des images SVG externes.
2. Collecter tous les éléments <img> dans le document HTML en utilisant la méthode getElementsByTagName("img").
3. Extraire l’attribut src de chaque élément d’image en utilisant la méthode getAttribute(“src”) et stocker les valeurs dans un Set.
4. Filtrer uniquement les URLs des images .svg en vérifiant si chaque URL se termine par .svg, et les ajouter à une nouvelle liste.
5. Créer des URLs absolues d’images SVG en utilisant la classe Url et la propriété BaseURI de la classe HTMLDocument.
6. Parcourez les URL absolues et créez une requête à l’aide de la classe RequestMessage pour chaque URL SVG.
7. Envoyez chaque requête en utilisant document.getContext().getNetwork().send(request) et vérifiez le succès de la réponse.
8. Enfin, si la réponse est positive, utilisez FileHelper.writeAllBytes() pour sauvegarder le contenu SVG sur le système de fichiers local.

// 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());
    }
}

Cette approche automatise l’extraction des images SVG externes d’une page web, ce qui vous évite de télécharger manuellement chaque fichier. C’est une solution idéale pour les concepteurs et les développeurs qui souhaitent extraire des SVG de sites sans avoir à plonger dans le code source.

Aspose.HTML propose un ensemble d’ applications Web HTML gratuites en ligne, notamment des convertisseurs, des fusionneurs, des outils de référencement, des générateurs de code HTML, des utilitaires d’URL, et bien d’autres encore. Ces outils basés sur un navigateur fonctionnent sur tous les systèmes d’exploitation et ne nécessitent aucune installation de logiciel supplémentaire. Que vous ayez besoin de convertir ou de fusionner des fichiers, d’extraire des données web, de générer du code HTML ou d’analyser des pages pour le référencement, vous pouvez le faire directement sur le web. Rationalisez vos tâches quotidiennes et augmentez votre productivité grâce à nos HTML Web Apps faciles à utiliser – à tout moment et en tout lieu.