Extract SVG from a Website in Java

SVG graphics can appear in an HTML document as inline <svg> markup or as an external file referenced by a URL. Extracting inline SVG means saving the element markup, while extracting an external SVG requires resolving and downloading its resource URL.

To extract SVG from a website in Java, load the page into an HTMLDocument. Save the OuterHTML of each inline <svg> element, and separately locate external SVG references, resolve relative URLs against document.getBaseURI(), and download the resulting resources.

Extract Inline SVG from HTML

An inline SVG is represented by an <svg> element whose markup is part of the HTML document. It does not necessarily have a separate image URL, so saving the element’s serialized markup creates the local SVG file.

The example uses getOuterHTML() from the Element API to preserve each complete <svg> element, including its root tag and attributes.

1. Create an HTMLDocument from the source web page URL.
2. Call getElementsByTagName(“svg”) to collect inline SVG elements.
3. Iterate through the returned collection.
4. Read each element’s getOuterHTML() value and write it to a uniquely named .svg file.

// How to extract inline SVG images from a webpage using Java

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

Generate each output name explicitly. Java does not interpolate {i} inside an ordinary string literal; use an expression such as i + ".svg" to create a different name for each inline SVG.

Always respect the website’s terms of use, copyright, and permissions when downloading or reusing SVG graphics.

Download External SVG Files

An external SVG is stored separately from the HTML document and referenced by a URL. The current example examines <img src> values and keeps references whose strings end with .svg.

This is a deliberately narrow detection rule. External SVG can also be referenced by <object>, <embed>, <source>, <use>, CSS, or a URL whose pathname does not expose the .svg extension.

1. Load the source web page into an HTMLDocument.
2. Collect <img> elements and read distinct, non-empty src values.
3. Identify SVG references and resolve relative values with the Url class and document.getBaseURI().
4. Create and send a RequestMessage for each absolute SVG URL.
5. Check the ResponseMessage and save its bytes to a uniquely named local file.

// Download external SVG images from HTML using Java

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

The endsWith(".svg") check is case-sensitive and does not match a URL followed by a query string or fragment. For more reliable detection, inspect the resolved URL pathname and validate the response content type.

SVG Sources Covered by the Examples

SVG source	Covered?	Notes
Inline <svg> element	Yes	The complete element markup is saved with getOuterHTML().
<img src="image.svg">	Yes	The string must end with lowercase .svg in the current example.
<object data="image.svg"> or <embed src="image.svg">	No	These elements require separate attribute queries.
SVG sprite referenced by <use href>	No	The reference may identify a symbol inside another SVG resource.
CSS background-image	No	The URL is stored in CSS rather than an HTML image attribute.
Extensionless SVG URL	No	Detection requires response metadata or content inspection.

Common SVG Extraction Issues

Issue	Likely cause	Fix
Repeated extraction overwrites the same inline SVG file	The output name is a constant string.	Build the file name from the loop index or another unique value.
An external SVG with query parameters is skipped	Its URL does not end with .svg.	Test the normalized URL pathname rather than the complete URL string.
A saved inline SVG looks different outside the page	Its styles, referenced symbols, fonts, or other dependencies are defined outside the <svg> element.	Preserve or inline the required dependencies before using the file independently.
An empty src resolves to the web page URL	Empty attribute values were not removed before URL resolution.	Skip null, empty, and whitespace-only values.
Two downloaded SVGs overwrite each other	Their URLs have the same final path segment.	Generate unique destination names.

FAQ

Why can an inline SVG not be downloaded by its image URL?

An inline SVG is part of the HTML markup and may not have a separate resource URL. Extract its <svg> element and save the serialized markup instead.

Does the example extract individual symbols from an SVG sprite?

No. The inline example saves complete <svg> elements, while the external example downloads complete SVG files referenced through <img src>. Extracting an individual <symbol> referenced by <use> requires additional DOM and reference-processing logic.

Related Aspose.HTML Articles

• Data Extraction in Java – explore other HTML and web data extraction workflows.
• Extract Images from Website – locate and download raster images and icons.
• Save File from URL in Java – download a resource when its URL is already known.

Other Platforms

• Extract SVG from Website in C# – extract inline and external SVG with Aspose.HTML for .NET.

Try HTML Web Applications

Aspose.HTML provides free online HTML Web Applications for converting files, extracting web data, generating HTML, and analyzing pages without installing additional software.