Extract SVG From Website – C# Examples

SVG is a vector graphics format designed primarily for the web, often used in HTML documents. The main advantage of SVG is its unsurpassed ability to scale to any size without compromising quality. Along with other benefits such as programmability, small file size, styling, interactivity, and more, SVG can improve web pages’ visual appeal and functionality. If you are a designer or developer, sometimes you prefer to get SVG images from a website.

Downloading SVG is not as easy as it might seem. If you have ever used a right-click to save or open an image from a web page, you have probably noticed that SVG files are challenging to extract from a website. Sometimes right-clicking won’t allow you to open it in a new tab or save it. And what to do? Is look at SVG tags and determine where the SVG starts and ends in the web page’s HTML code? Fortunately, you can use Aspose.HTML for .NET library to download SVG from website programmatically.

SVG images in HTML documents come in two forms – inline SVG and external SVG. In this article, we look at how to extract both types of these images using Aspose.HTML for .NET API. Using our C# library will help you find and extarct all SVGs from any website. It’s better than digging and looking for them manually. Let’s try!

Extract SVG from Website – Inline SVG

Inline SVG images are SVG elements <svg> whose content describes the image. Inline SVG refers to embedding SVG code directly into HTML code rather than linking to an external SVG file. This is a popular technique for creating website icons, logos, and other graphical elements.

To save inline SVG images, we will find all <svg> elements in an HTML document and use the OuterHTML property to get their content. So, to download SVG from website, you should take a few following steps:

1. Use the HTMLDocument(Url) constructor to create an instance of the HTMLDocument class and pass it the URL of the website from which you want to extract inline SVG images.
2. Use the GetElementsByTagName("svg") method to collect all <svg> elements. The method returns a list of the HTML document’s <svg> elements.
3. Create a loop to iterate through each SVG image in the images array.
4. For each image in the array, use the OuterHTML property to get the SVG element content and the File.WriteAllText() method, which wrote the SVG content to a local file.

using Aspose.Html;
using Aspose.Html.Net;
using System.IO;
using System.Linq;
...
    // Open a document you want to extract inline SVG images from
    using var document = new HTMLDocument("https://docs.aspose.com/svg/net/drawing-basics/svg-shapes/");

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

    for (var i = 0; i < images.Length; i++)
    {
        // Save every SVG image to a local file system
        File.WriteAllText(Path.Combine(OutputDir, $"{i}.svg"), images[i].OuterHTML);
    }

Note: Some SVG files may be protected by copyright, so check the terms of use before extracting and using them. For example, using the company logo or other extracted SVG files in your design projects might be considered plagiarism, and you shouldn’t do it. It might be a good idea to ask the website owners for permission before you use their files.

Extract SVG from Website – External SVG

External SVG is an SVG file stored outside an HTML document and loaded into the document using, for example, a <img> tag. Separating SVG files from HTML makes it possible to reuse the same SVG image in multiple places without duplicating the code, making web pages more efficient and easier to maintain.

External SVG images are represented by the <img> element, which in turn can also refer to other types of images, so SVG images should be further filtered. Let’s look at how to download SVG from website using the Aspose.HTML for .NET library:

1. Use the HTMLDocument(Url) constructor to create an instance of the HTMLDocument class and pass it the URL of the website from which you want to extract external SVGs.
2. Use the GetElementsByTagName("img") method to collect all <img> elements. The method returns a list of the HTML document’s <img> elements.
3. Use the Select() method to create a distinct collection of relative image URLs and the GetAttribute("src") method to extract the src attribute of each <img> element.
4. To filter out non-SVG images, use the Where() and the EndsWith() methods to check if the URL ends with the .svg extension.
5. Create absolute SVG image URLs using the Url class and the BaseURI property of the HTMLDocument class.
6. Then, for each absolute URL, create a request using the RequestMessage class.
7. Use the document’s Context.Network.Send(request) method to send the request. The response is checked to ensure it was successful.
8. Finally, if the response was successful, use the File.WriteAllBytes() method to save SVG to a local file.

using Aspose.Html;
using Aspose.Html.Net;
using System.IO;
using System.Linq;
...
    // Open the document you want to extract external SVGs from
    using var document = new HTMLDocument("https://products.aspose.com/html/net/");

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

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

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

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

    foreach (var url in absUrls)
    {
        // Create an extracting request
        using var request = new RequestMessage(url);

        // Extract SVG
        using var response = document.Context.Network.Send(request);

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

You can use these C# examples to automate extracting all SVG images from a webpage, which can be helpful for tasks such as archiving or analyzing web content. Also, this is great for designers and developers wanting to pull SVGs from sites without diving into the source code.

You can download the complete C# examples and data files from GitHub.

Aspose.HTML offers HTML Web Applications that are an online collection of free converters, mergers, SEO tools, HTML code generators, URL tools, and more. The applications work on any operating system with a web browser and do not require any additional software installation. Easily convert, merge, encode, generate HTML code, extract data from the web, or analyze web pages in terms of SEO wherever you are. Use our collection of HTML Web Applications to perform your daily matters and make your workflow seamless!