Извлечь SVG с веб-сайта с помощью Java

SVG – это формат векторной графики, разработанный в основном для Интернета и часто используемый в HTML-документах. Основным преимуществом SVG является его исключительная способность масштабироваться до любых размеров без потери качества. Кроме того, SVG обладает рядом преимуществ, включая программируемость, небольшой размер файла, возможности стилизации, интерактивность и многое другое, что может улучшить визуальную привлекательность и функциональность веб-страницы.

Скачать SVG не так просто, как может показаться. Если вы когда-нибудь использовали правую кнопку мыши, чтобы сохранить или открыть изображение с веб-страницы, то наверняка заметили, что файлы SVG сложно извлечь с веб-сайта. Иногда щелчок правой кнопкой мыши не позволяет открыть изображение в новой вкладке или сохранить его. Что же делать? Вы можете вручную просмотреть HTML-код, чтобы выявить теги SVG и определить, где начинается и заканчивается содержимое SVG. К счастью, есть и более простое решение: вы можете использовать Aspose.HTML for Java для программной загрузки SVG-файлов с веб-сайта.

Извлечение SVG с веб-сайта – Inline SVG

Inline SVG изображения – это SVG-элементы <svg>, содержимое которых описывает изображение. Inline SVG означает встраивание SVG-кода непосредственно в HTML-код, а не ссылку на внешний SVG-файл. Это популярная техника для создания иконок, логотипов и других графических элементов.

Чтобы сохранить встроенные SVG-изображения, мы найдем все элементы <svg> в HTML-документе и воспользуемся свойством OuterHTML класса Element, чтобы получить их содержимое. Итак, чтобы скачать SVG с сайта, необходимо выполнить несколько следующих действий:

1. С помощью конструктора HTMLDocument(Url) создайте экземпляр HTMLDocument, передав ему URL веб-страницы, содержащей встроенные SVG-изображения.
2. Вызовите метод getElementsByTagName(“img”), чтобы собрать все <svg> элементы, присутствующие в HTML-документе.
3. Создайте цикл для перебора каждого SVG-изображения в коллекции images.
4. Для каждого изображения в массиве используйте метод getOuterHTML(), чтобы получить содержимое SVG-элемента, а затем используйте метод FileHelper.writeAllText(), чтобы записать содержимое SVG в локальный файл .svg.

 1// Open a document you want to download inline SVG images from
 2final HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/net/");
 3
 4// Collect all inline SVG images
 5HTMLCollection images = document.getElementsByTagName("svg");
 6
 7for (int i = 0; i < images.getLength(); i++) {
 8    // Save every image to a local file system
 9    FileHelper.writeAllText("{i}.svg", images.get_Item(i).getOuterHTML());
10}

Извлечение SVG с веб-сайта – External SVG

External SVG – это SVG-файл, хранящийся вне HTML-документа и загружаемый в документ с помощью, например, тега <img>. Отделение SVG-файлов от HTML позволяет повторно использовать одно и то же SVG-изображение в нескольких местах без дублирования кода, что делает веб-страницы более эффективными и простыми в обслуживании.

Внешние SVG-изображения представлены элементом <img>, который, в свою очередь, может ссылаться и на другие типы изображений, поэтому SVG-изображения необходимо дополнительно фильтровать. Давайте рассмотрим, как загрузить SVG с сайта с помощью библиотеки Aspose.HTML for Java:

1. Создайте экземпляр класса HTMLDocument с помощью конструктора HTMLDocument(Url) и передайте URL сайта, с которого вы хотите извлечь внешние SVG-изображения.
2. Соберите все элементы <img> в HTML-документе с помощью метода getElementsByTagName("img").
3. Извлеките атрибут src из каждого элемента изображения с помощью метода getAttribute(“src”) и сохраните значения в Set.
4. Отфильтруйте только URL-адреса изображений .svg, проверив, заканчивается ли каждый URL-адрес на .svg, и добавьте их в новый список.
5. Создайте абсолютные URL-адреса SVG-изображений, используя класс Url и свойство BaseURI класса HTMLDocument.
6. Пройдитесь по абсолютным URL и создайте запрос с помощью класса RequestMessage для каждого SVG URL.
7. Отправьте каждый запрос с помощью document.getContext().getNetwork().send(request) и проверьте ответ на успех.
8. Наконец, если ответ успешный, используйте FileHelper.writeAllBytes() для сохранения содержимого SVG в локальной файловой системе.

 1// Open a document you want to download external SVGs from
 2final HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/net/");
 3
 4// Collect all image elements
 5HTMLCollection images = document.getElementsByTagName("img");
 6
 7// Create a distinct collection of relative image URLs
 8java.util.Set<String> urls = new HashSet<>();
 9for (Element element : images) {
10    urls.add(element.getAttribute("src"));
11}
12
13// Filter out non SVG images
14java.util.List<String> svgUrls = new ArrayList<>();
15for (String url : urls) {
16    if (url.endsWith(".svg")) {
17        svgUrls.add(url);
18    }
19}
20// Create absolute SVG image URLs
21java.util.List<Url> absUrls = svgUrls.stream()
22    .map(src -> new Url(src, document.getBaseURI()))
23    .collect(Collectors.toList());
24
25// foreach to while statements conversion
26for (Url url : absUrls) {
27    // Create a downloading request
28    final RequestMessage request = new RequestMessage(url);
29
30    // Download SVG image
31    final ResponseMessage response = document.getContext().getNetwork().send(request);
32
33    // Check whether response is successful
34    if (response.isSuccess()) {
35        String[] split = url.getPathname().split("/");
36        String path = split[split.length - 1];
37
38        // Save file to a local file system
39        FileHelper.writeAllBytes(path, response.getContent().readAsByteArray());
40    }
41}

Этот подход позволяет автоматизировать извлечение внешних SVG-изображений с веб-страницы, экономя время и усилия на ручную загрузку каждого файла. Это отлично подходит для дизайнеров и разработчиков, которые хотят извлекать SVG-изображения с сайтов без необходимости погружаться в исходный код.