Extraire des SVG d'un site web – Exemples en C#

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é inégalée à s’adapter à n’importe quelle taille sans compromettre la qualité. Outre d’autres avantages tels que la programmabilité, la taille réduite des fichiers, le style, l’interactivité et bien d’autres encore, le SVG peut améliorer l’attrait visuel et la fonctionnalité des pages web. Si vous êtes concepteur ou développeur, vous préférez parfois obtenir des images SVG à partir d’un site web.

Le téléchargement de SVG n’est pas aussi simple qu’il n’y paraît. Si vous avez déjà utilisé un clic droit 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 ? Regarder les balises SVG et déterminer où le SVG commence et se termine dans le code HTML de la page web ? Heureusement, vous pouvez utiliser la bibliothèque Aspose.HTML for .NET library pour télécharger le SVG d’un site web de manière programmatique.

Les images SVG dans les documents HTML se présentent sous deux formes – inline SVG et external SVG. Dans cet article, nous verrons comment extraire ces deux types d’images à l’aide de l’API Aspose.HTML for .NET. L’utilisation de notre bibliothèque C# vous aidera à trouver et à extraire tous les SVG de n’importe quel site Web. C’est mieux que de les chercher manuellement. Essayez donc !

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 enregistrer des images SVG en ligne, nous trouverons tous les éléments <svg> dans un document HTML et utiliserons la propriété OuterHTML 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 la classe HTMLDocument et transmettez-lui l’URL du site web à partir duquel vous souhaitez extraire des images SVG en ligne.
2. Utilisez la méthode GetElementsByTagName("svg") pour collecter tous les éléments <svg>. La méthode renvoie une liste des éléments <svg> du document HTML.
3. Créer une boucle pour itérer à travers chaque image SVG dans le tableau images.
4. Pour chaque image du tableau, utilisez la propriété OuterHTML pour obtenir le contenu de l’élément SVG et la méthode File.WriteAllText(), qui écrit le contenu SVG dans un fichier local.

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

Note: Certains fichiers SVG peuvent être protégés par des droits d’auteur, il convient donc de vérifier les conditions d’utilisation avant de les extraire et de les utiliser. Par exemple, l’utilisation du logo de l’entreprise ou d’autres fichiers SVG extraits dans vos projets de conception peut être considérée comme du plagiat, et vous ne devriez pas le faire. Il peut être judicieux de demander l’autorisation aux propriétaires des sites web avant d’utiliser leurs fichiers.

Extraire un SVG d’un site web – SVG externe

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 .NET :

1. Utilisez le constructeur HTMLDocument(Url) pour créer une instance de la classe HTMLDocument et transmettez-lui l’URL du site web à partir duquel vous souhaitez extraire des SVG externes.
2. Utilisez la méthode GetElementsByTagName("img") pour collecter tous les éléments <img>. La méthode renvoie une liste des éléments <img> du document HTML.
3. Utilisez la méthode Select() pour créer une collection distincte d’URL d’images relatives et la méthode GetAttribute("src") pour extraire l’attribut src de chaque élément <img>.
4. Pour filtrer les images non-SVG, utilisez les méthodes Where() et EndsWith() pour vérifier si l’URL se termine par l’extension .svg.
5. Créer des URLs absolues d’images SVG en utilisant la classe Url et la propriété BaseURI de la classe HTMLDocument.
6. Ensuite, pour chaque URL absolu, créez une requête en utilisant la classe RequestMessage.
7. Utilisez la méthode Context.Network.Send(request) du document pour envoyer la requête. La réponse est vérifiée pour s’assurer qu’elle a été envoyée avec succès.
8. Enfin, si la réponse est positive, utilisez la méthode File.WriteAllBytes() pour sauvegarder le SVG dans un fichier local.

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

Vous pouvez utiliser ces exemples C# pour automatiser l’extraction de toutes les images SVG d’une page web, ce qui peut s’avérer utile pour des tâches telles que l’archivage ou l’analyse de contenu web. Cette méthode est également très utile pour les concepteurs et les développeurs qui souhaitent extraire des SVG d’un site sans avoir à se plonger dans le code source.

Vous pouvez télécharger les exemples C# complets et les fichiers de données sur GitHub.

Aspose.HTML propose des applications Web HTML qui sont une collection en ligne de convertisseurs gratuits, de fusions, d’outils SEO, de générateurs de code HTML, d’outils URL, et bien plus encore. Les applications fonctionnent sur n’importe quel système d’exploitation doté d’un navigateur web et ne nécessitent aucune installation de logiciel supplémentaire. Convertissez, fusionnez, encodez, générez facilement du code HTML, extrayez des données du web ou analysez des pages web en termes de référencement, où que vous soyez. Utilisez notre collection d’applications web HTML pour effectuer vos tâches quotidiennes et rendre votre flux de travail fluide !