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

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

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

SVG-графика на веб-страницах может быть встроена двумя способами: как inline (встроенный) SVG в HTML или как external (внешний) SVG, на который ссылаются по URL. В этой статье мы рассмотрим, как извлекать как встроенные, так и внешние SVG-файлы с помощью Aspose.HTML for Java API. С помощью этого подхода вы сможете автоматически собирать все SVG с веб-сайта, не копаясь в коде вручную. Давайте погрузимся в процесс и сделаем извлечение SVG легким!

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

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

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

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

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

Example_ExtractInlineSvg.java hosted with ❤ by GitHub

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

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

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

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

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

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

Example_ExtractExternalSvg.java hosted with ❤ by GitHub

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

Aspose.HTML предоставляет набор бесплатных онлайн Веб-приложений HTML, включая конвертеры, слияния, SEO-инструменты, генераторы HTML-кода, утилиты URL и многое другое. Эти инструменты работают в любой операционной системе. Если вам нужно конвертировать или объединить файлы, извлечь веб-данные, сгенерировать HTML-код или проанализировать страницы на предмет SEO, вы можете сделать все это прямо в Интернете. Упростите свои повседневные задачи и повысьте производительность с помощью наших простых в использовании веб-приложений HTML – в любое время и в любом месте.

Извлечение изображений с веб-сайта Веб-доступность