JavaでHTMLからインラインSVGと外部SVGを抽出

Aspose.HTML for Java はWebページをHTMLDocumentに読み込み、埋め込まれたSVGマークアップとリンクされたSVGリソースの両方を調べられるようにします。インライン画像はDOM内の<svg>要素として存在し、外部SVGファイルは<img src="image.svg">などの要素から参照されます。

インライン画像を保存するには、getOuterHTML()の値を.svgファイルに書き込みます。外部画像の場合は、document.getBaseURI()に基づいて相対URLを解決し、ドキュメントのネットワークサービスからリソースをリクエストして、返されたバイトを再エンコードせずに保存します。


Webページで見つかったSVGを保存

このJava例は、各インライン<svg>要素を保存し、<img>要素から参照されている重複のない外部SVGファイルをダウンロードします。ソースの種類ごとに名前を分けるため、svg出力ディレクトリで簡単に識別できます。

JavaでWebサイトからSVGを抽出

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++;
        }
    }
}

JavaでSVGを抽出する手順

  1. HTMLDocument で対象ページを読み込みます。
  2. getElementsByTagName("svg") でインライン<svg>要素を収集し、各要素のgetOuterHTML()値をUTF-8テキストとして書き込みます。
  3. <img>要素を収集し、空でないsrc属性を読み取ります。
  4. Url を使用して各相対参照を解決し、パスが.svgで終わるURLだけを残します。
  5. 外部SVGごとに RequestMessage を送信し、 ResponseMessage を確認します。
  6. 成功した各レスポンスをFiles.write()で.svgファイルとして保存します。

インラインSVGと外部SVGの違い

インラインSVGはHTML DOMの一部です。XMLマークアップは対応する<svg>要素から取得でき、getOuterHTML()でシリアライズできます。

外部SVGはURLで参照される独立したリソースです。このコードは<img>要素が使用するファイルをダウンロードします。他の要素、CSS、フラグメントリンクから参照されるSVGには、それぞれの場所に適したセレクターが必要です。

インラインSVGと外部SVGのワークフローについては、 Extract SVG From Website in Java を参照してください。


SVG抽出時の注意点

  • インラインSVGと外部SVGを区別してください。 インラインSVGはDOMからシリアライズし、外部SVGはリソースのレスポンスとしてダウンロードします。
  • 一意の出力名を使用してください。 インライン画像には元のファイル名がなく、異なる外部URLが同じ最後のパス部分を持つ場合もあります。
  • 各リソースのレスポンスを確認してください。 外部URLがSVGデータではなく、エラーページ、認証レスポンス、または利用できないコンテンツを返す場合があります。
  • 大きなコレクションを考慮してください。 readAsByteArray()は各外部SVGレスポンスをメモリに保持します。ページが非常に大きなファイルや多数のリソースを参照する場合は、ストリーミング方式を使用してください。
  • 信頼できないコンテンツを検証してください。 ダウンロードしたSVGをXMLベースのアクティブコンテンツとして扱い、公開または表示する前にスクリプト、リンク、外部参照を確認します。
  • 著作権とWebサイトの利用条件を守ってください。 所有しているSVG画像、または利用許可のあるSVG画像だけを抽出して再利用してください。公開されていても、保護されたロゴ、アイコン、イラストの再配布が許可されるわけではありません。

よくある質問

1. Webサイトから直接ダウンロードできないSVG画像があるのはなぜですか?

多くのWebサイトでは、個別の.svgファイルにリンクする代わりに、<svg>要素として画像を埋め込んでいます。インラインSVGはリソースURLからダウンロードするのではなく、HTML DOM内で見つけてgetOuterHTML()マークアップから保存する必要があります。

2. JavaでWebページからSVGファイルやアイコンを抽出するにはどうすればよいですか?

Aspose.HTML for Javaは読み込んだドキュメント内のSVG参照を調べられますが、すべての配置を1つのセレクターで処理することはできません。ページでの使用方法に応じて、インライン<svg>、<img src>、<object data>、<embed src>、CSSのurl()、SVGスプライト参照を確認してください。

3. HTMLからSVGを抽出してもベクター品質は維持されますか?

インラインSVGマークアップまたは外部SVGの元のバイトを保存しても画像はラスタライズされないため、ベクターパスと拡大縮小可能な寸法が維持されます。ただし、コピーされていないページCSS、フォント、画像、スクリプト、外部シンボルに依存する場合、保存したファイルの表示が変わることがあります。

4. Aspose.HTML for JavaはWebサイト全体からSVGファイルを抽出できますか?

Aspose.HTML for JavaはHTMLDocumentに読み込まれたページからSVGを抽出しますが、ドメイン内のすべてのページを自動的にクロールするわけではありません。Webサイト全体を処理するには、許可されたページURLを列挙し、各ドキュメントを調べて、収集したSVGリソースの重複を削除してください。


Aspose.HTML for Java をインストール

Aspose の公式リポジトリから Aspose.HTML for Java を追加します。ASPOSE_HTML_VERSION を Aspose.HTML for Java releases ページにある正確なバージョンに置き換え、依存関係を解決するためにプロジェクトを再読み込みまたは再ビルドしてください。

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、更新、依存関係のトラブルシューティングについては、 Install Aspose.HTML for Java を参照してください。

SVGとデータ抽出に関連するJavaタスク

画像抽出、Javaデータ抽出の概要、SVG変換例も参照できます。