Извлечение встроенных и внешних SVG из HTML

Aspose.HTML for Java загружает веб-страницу в объект HTMLDocument, поэтому приложение может анализировать как встроенную SVG-разметку, так и связанные SVG-ресурсы. Встроенная графика представлена элементами <svg> в DOM, а внешние SVG-файлы могут подключаться через элементы наподобие <img src="image.svg">.

Чтобы сохранить встроенную графику, запишите значение getOuterHTML() соответствующего элемента в файл .svg. Для внешнего ресурса разрешите относительный URL по document.getBaseURI(), запросите файл через сетевой сервис документа и сохраните полученные данные без перекодирования.


Сохранение SVG с веб-страницы

Пример сохраняет каждый встроенный элемент <svg> и скачивает уникальные внешние SVG-файлы, на которые ссылаются элементы <img>. Разные имена позволяют отличать два типа источников в выходном каталоге svg.

Извлечение SVG с сайта на Java

Path outputDirectory = Paths.get("svg");
Files.createDirectories(outputDirectory);

try (HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/java/")) {
    // Save inline SVG elements as standalone files
    HTMLCollection inlineSvgElements = document.getElementsByTagName("svg");
    int inlineNumber = 1;

    for (Element svgElement : inlineSvgElements) {
        Path outputPath = outputDirectory.resolve("inline-" + inlineNumber + ".svg");
        byte[] svgMarkup = svgElement.getOuterHTML().getBytes(StandardCharsets.UTF_8);
        Files.write(outputPath, svgMarkup);
        inlineNumber++;
    }

    // Collect distinct external SVG sources from image elements
    HTMLCollection images = document.getElementsByTagName("img");
    Set<String> externalSources = new LinkedHashSet<>();

    for (Element image : images) {
        String source = image.getAttribute("src");
        if (source.isEmpty()) {
            continue;
        }

        Url resourceUrl = new Url(source, document.getBaseURI());
        if (resourceUrl.getPathname().toLowerCase().endsWith(".svg")) {
            externalSources.add(source);
        }
    }

    int externalNumber = 1;
    for (String source : externalSources) {
        Url resourceUrl = new Url(source, document.getBaseURI());
        RequestMessage request = new RequestMessage(resourceUrl);
        ResponseMessage response = document.getContext().getNetwork().send(request);

        if (response.isSuccess()) {
            Path outputPath = outputDirectory.resolve("external-" + externalNumber + ".svg");
            Files.write(outputPath, response.getContent().readAsByteArray());
            externalNumber++;
        }
    }
}

Как извлечь SVG из HTML

  1. Загрузите целевую страницу с помощью HTMLDocument .
  2. Получите встроенные элементы <svg> методом getElementsByTagName("svg") и сохраните значение getOuterHTML() каждого элемента как текст UTF-8.
  3. Соберите элементы <img> и прочитайте их непустые атрибуты src.
  4. Разрешите каждый относительный адрес с помощью класса Url и оставьте URL, путь которых оканчивается на .svg.
  5. Отправьте RequestMessage для каждого внешнего SVG и проверьте полученный ResponseMessage .
  6. Сохраните каждый успешный ответ в файл .svg методом Files.write().

Встроенные и внешние SVG

Встроенный SVG является частью HTML DOM. Его XML-разметка доступна через соответствующий элемент <svg> и может быть сериализована методом getOuterHTML().

Внешний SVG является отдельным ресурсом, на который указывает URL. Код скачивает файлы, используемые элементами <img>. Для поиска SVG в других элементах, CSS или ссылках на фрагменты потребуются селекторы, соответствующие этим способам подключения.

Подробные примеры для обоих вариантов приведены в статье Извлечение SVG с веб-сайта .


Что учитывать при извлечении SVG

  • Разделяйте встроенные и внешние SVG. Встроенная SVG-разметка сериализуется из DOM, а внешний SVG скачивается как отдельный сетевой ресурс.
  • Используйте уникальные имена файлов. У встроенной графики нет исходного имени файла, а разные внешние URL могут оканчиваться одинаковым сегментом пути.
  • Проверяйте каждый ответ. Внешний URL может вернуть страницу ошибки, ответ системы аутентификации или сообщение о недоступном ресурсе вместо данных SVG.
  • Учитывайте объём данных. Метод readAsByteArray() буферизует каждый внешний SVG в памяти. Используйте потоковую загрузку, если страница может ссылаться на много ресурсов или необычно большие файлы.
  • Проверяйте недоверенное содержимое. Рассматривайте скачанный SVG как активное содержимое на основе XML и проверяйте скрипты, ссылки и внешние ресурсы перед публикацией или отображением.
  • Соблюдайте авторские права и условия сайта. Извлекайте и используйте только собственную SVG-графику или ресурсы, на доступ к которым у вас есть разрешение. Публичная доступность не даёт права распространять защищённые логотипы, значки или иллюстрации.

Часто задаваемые вопросы

1. Почему некоторые SVG-изображения нельзя скачать с сайта напрямую?

Многие сайты встраивают графику в элементы <svg> вместо ссылок на отдельные файлы .svg. Встроенный SVG нужно найти в HTML DOM и сохранить его разметку getOuterHTML(), а не скачивать по URL ресурса.

2. Как извлечь SVG-файлы и значки с веб-страницы на Java?

Aspose.HTML for Java позволяет анализировать источники SVG в загруженном документе, однако одного селектора для всех вариантов подключения не существует. Проверьте встроенные элементы <svg>, атрибуты <img src>, <object data> и <embed src>, значения CSS url() и ссылки на SVG-спрайты.

3. Сохраняется ли качество векторной графики при извлечении SVG из HTML?

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

4. Можно ли извлечь SVG-файлы со всего сайта с помощью Aspose.HTML for Java?

Aspose.HTML for Java извлекает SVG со страницы, загруженной в HTMLDocument, но не обходит автоматически все страницы домена. Для обработки всего сайта составьте список разрешённых URL страниц, проверьте каждый документ и удалите дубликаты найденных SVG-ресурсов.


Установка Aspose.HTML for Java

Добавьте Aspose.HTML for Java из официального репозитория Aspose. Замените ASPOSE_HTML_VERSION точным номером версии со страницы выпусков Aspose.HTML for Java , затем перезагрузите или пересоберите проект, чтобы система зависимостей загрузила библиотеку.

Добавьте репозиторий и зависимость в проект Maven:

Maven – pom.xml

<repositories>
    <repository>
        <id>AsposeJavaAPI</id>
        <url>https://releases.aspose.com/java/repo/</url>
    </repository>
</repositories>
<dependencies>
    <dependency>
        <groupId>com.aspose</groupId>
        <artifactId>aspose-html</artifactId>
        <version>ASPOSE_HTML_VERSION</version>
    </dependency>
</dependencies>

Добавьте репозиторий и зависимость в проект Gradle:

Gradle – build.gradle

repositories {
    maven {
        url = uri('https://releases.aspose.com/java/repo/')
    }
}
dependencies {
    implementation 'com.aspose:aspose-html:ASPOSE_HTML_VERSION'
}

Используйте версию JDK, совместимую с выбранным выпуском библиотеки. Инструкции по установке JAR вручную, настройке Kotlin DSL, обновлению и устранению проблем с зависимостями приведены в руководстве Установка Aspose.HTML for Java .

Другие задачи с SVG и HTML на Java

Перейдите к извлечению изображений, обзору раздела или примерам преобразования SVG.