使用 Aspose.HTML for Java 从网站提取 SVG
SVG 是一种主要为网络设计的矢量图形格式，通常用于 HTML 文档。SVG 的主要优势在于它能够在不降低质量的情况下缩放至任何尺寸。此外，SVG 还具有多种优势，包括可编程性、文件小、样式选项、交互性等，所有这些都能提高网页的视觉吸引力和功能性。
下载 SVG 并不像看起来那么容易。如果你曾经使用过鼠标右键来保存或打开网页上的图片，你可能会注意到从网站上提取 SVG 文件是一项挑战。有时，右键单击并不能在新标签页中打开或保存。那该怎么办呢？您可以手动检查 HTML 代码以识别 SVG 标记，并确定 SVG 内容的开始和结束位置。幸运的是，还有一种更直接的解决方案：您可以使用 Aspose.HTML for Java 以编程方式从网站下载 SVG 文件。
网页上的 SVG 图形可以通过两种方式嵌入：作为 HTML 中的内联 SVG 或作为通过 URL 引用的外部 SVG。在本文中，我们将探讨如何使用 Aspose.HTML for Java API 提取内联和外部 SVG。有了这种方法，您就可以自动收集网站上的每一张 SVG，而无需手动搜索代码。让我们一起来轻松提取 SVG！
从网站提取 SVG – Inline SVG
Inline SVG 图像是 SVG 元素<svg>，其内容描述了图像。内联 SVG 是指将 SVG 代码直接嵌入 HTML 代码，而不是链接到外部 SVG 文件。这是创建网站图标、徽标和其他图形元素的常用技术。
要保存内联 SVG 图像，我们需要找到 HTML 文档中的所有 <svg> 元素，并使用
Element 类的 OuterHTML 属性来获取它们的内容。因此，要从网站下载 SVG，应采取以下几个步骤：
- 使用
HTMLDocument(Url) 构造函数创建一个
HTMLDocument实例，并传递包含内联 SVG 图像的网页 URL。 - 调用
getElementsByTagName(“img”) 方法收集 HTML 文档中的所有
<svg>元素。 - 创建一个循环，遍历
images集合中的每个 SVG 图像。 - 对于数组中的每张图片，使用
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}注： 在使用 SVG 文件时，请务必遵守版权法。某些 SVG 文件(如公司徽标或品牌图形)可能受到保护，未经许可使用这些文件可能会被视为剽窃。在项目中提取或使用任何 SVG 文件之前，请查看网站的使用条款或联系网站所有者，以获得适当的许可。
从网站提取 SVG – External SVG
外部 SVG 是指存储在 HTML 文档之外的 SVG 文件，并通过<img>标记等方式加载到文档中。将 SVG 文件从 HTML 中分离出来，就可以在多个地方重复使用相同的 SVG 图像，而无需重复代码，从而使网页更高效、更易于维护。
外部 SVG 图像由 <img> 元素表示，而该元素也可以指代其他类型的图像，因此应进一步过滤 SVG 图像。让我们看看如何使用 Aspose.HTML for Java 库从网站下载 SVG：
- 使用
HTMLDocument(
Url) 构造函数创建一个 HTMLDocument 类实例，并传递要从中提取外部 SVG 图像的网站的 URL。 - 使用
getElementsByTagName(
"img") 方法收集 HTML 文档中的所有<img>元素。 - 使用
getAttribute(“src”) 方法提取每个图像元素的
src属性，并将值存储在一个Set中。 - 通过检查每个 URL 是否以
.svg结尾，只过滤.svg图像 URL，并将其添加到新列表中。 - 使用
Url 类和
HTMLDocument类的 BaseURI 属性创建绝对 SVG 图像 URL。 - 遍历绝对 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}这种方法可自动从网页中提取外部 SVG 图像，省去手动下载每个文件的时间和精力。这对于想要从网站上提取 SVG 而无需深入研究源代码的设计人员和开发人员来说，无疑是一大福音。
Aspose.HTML 提供一套免费的在线 HTML 网络应用程序，包括转换器、合并器、搜索引擎优化工具、HTML 代码生成器、URL 工具等。这些基于浏览器的工具适用于所有操作系统，无需安装任何其他软件。无论你是需要转换或合并文件、提取网页数据、生成 HTML 代码，还是分析网页以进行搜索引擎优化，你都可以在网上完成。利用我们易于使用的 HTML 网络应用程序，随时随地简化您的日常任务，提高您的工作效率。
