从网站提取 SVG – C# 示例
SVG 是一种矢量图形格式，主要为网络设计，常用于 HTML 文档。SVG 的主要优势在于其无与伦比的缩放能力，可缩放至任何尺寸而不影响质量。SVG 还具有可编程、文件小、风格化、交互性强等优点，可以提高网页的视觉吸引力和功能性。如果你是一名设计师或开发人员，有时你更喜欢从网站上获取 SVG 图像。
下载 SVG 并不像看起来那么容易。如果你曾使用右键单击来保存或打开网页上的图片，你可能会注意到从网站上提取 SVG 文件是一项挑战。有时右键单击无法在新标签页中打开或保存。怎么办呢？是查看 SVG 标记并确定 SVG 在网页 HTML 代码中的开始和结束位置吗？幸运的是，您可以使用 Aspose.HTML for .NET 库 以编程方式从网站下载 SVG。
HTML 文档中的 SVG 图像有两种形式：内嵌 SVG 和外部 SVG。本文将介绍如何使用 Aspose.HTML for .NET API 提取这两种类型的图像。使用我们的 C# 库可以帮助您从任何网站中找到并提取所有 SVG。这比手动挖掘和查找要好得多。让我们试试
从网站提取 SVG – 内联 SVG (Inline SVG)
Inline SVG 图像是 SVG 元素<svg>，其内容描述了图像。内联 SVG 是指将 SVG 代码直接嵌入 HTML 代码，而不是链接到外部 SVG 文件。这是创建网站图标、徽标和其他图形元素的常用技术。
要保存内联 SVG 图像，我们需要找到 HTML 文档中的所有<svg>元素，并使用
OuterHTML 属性获取它们的内容。因此，要从网站下载 SVG，应采取以下几个步骤：
- 使用
HTMLDocument(
Url) 构造函数创建一个 HTMLDocument 类实例，并将要从中提取内联 SVG 图像的网站 URL 传递给它。 - 使用
GetElementsByTagName(
"svg") 方法收集所有<svg>元素。该方法返回 HTML 文档中<svg>元素的列表。 - 创建一个循环，遍历
images数组中的每个 SVG 图像。 1.对于数组中的每张图片，使用 OuterHTML 属性获取 SVG 元素内容，并使用File.WriteAllText()方法将 SVG 内容写入本地文件。
1// How to extract inline SVG images from a webpage using C#
2
3// Open a document you want to download inline SVG images from
4using 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.Length; i++)
10{
11 // Save each SVG element as an individual .svg file
12 File.WriteAllText(Path.Combine(OutputDir, $"{i}.svg"), images[i].OuterHTML);
13}注意： 某些 SVG 文件可能受版权保护，因此在提取和使用它们之前，请查看使用条款。例如，在你的设计项目中使用公司徽标或其他提取的 SVG 文件可能会被视为剽窃，你不应该这样做。在使用网站所有者的文件之前，最好先征得他们的同意。
从网站提取 SVG – 外部 SVG (External SVG)
External SVG 是指存储在 HTML 文档之外的 SVG 文件，并通过<img>标记等方式加载到文档中。将 SVG 文件从 HTML 中分离出来，就可以在多个地方重复使用相同的 SVG 图像，而无需重复代码，从而使网页更高效、更易于维护。
外部 SVG 图像由 <img> 元素表示，而该元素也可以指代其他类型的图像，因此应进一步过滤 SVG 图像。让我们看看如何使用 Aspose.HTML for .NET 库从网站下载 SVG：
- 使用
HTMLDocument(
Url) 构造函数创建一个HTMLDocument类实例，并将要从中提取外部 SVG 的网站 URL 传递给它。 - 使用
GetElementsByTagName(
"img") 方法收集所有<img>元素。该方法返回 HTML 文档中<img>元素的列表。 - 使用
Select()方法创建相对图像 URL 的独特集合，并使用 GetAttribute("src") 方法提取每个<img>元素的src属性。 - 要过滤掉非 SVG 图像，请使用
Where()和EndsWith()方法检查 URL 是否以 .svg 扩展名结束。 - 使用
Url 类和
HTMLDocument类的 BaseURI 属性创建绝对 SVG 图像 URL。 - 然后，针对每个绝对 URL，使用 RequestMessage 类创建一个请求。
- 使用文档的
Context.Network.Send(
request) 方法发送请求。将对响应进行检查，以确保发送成功。 - 最后，如果响应成功，则使用
File.WriteAllBytes()方法将 SVG 保存到本地文件。
1// Download external SVG images from HTML using C#
2
3// Open a document you want to download external SVGs from
4using 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
10IEnumerable<string> urls = images.Select(element => element.GetAttribute("src")).Distinct();
11
12// Filter out non SVG images
13IEnumerable<string> svgUrls = urls.Where(url => url.EndsWith(".svg"));
14
15// Create absolute SVG image URLs
16IEnumerable<Url> absUrls = svgUrls.Select(src => new Url(src, document.BaseURI));
17
18foreach (Url url in absUrls)
19{
20 // Create a downloading request
21 using RequestMessage request = new RequestMessage(url);
22
23 // Download SVG image
24 using ResponseMessage response = document.Context.Network.Send(request);
25
26 // Check whether response is successful
27 if (response.IsSuccess)
28 {
29 // Save SVG image to a local file system
30 File.WriteAllBytes(Path.Combine(OutputDir, url.Pathname.Split('/').Last()), response.Content.ReadAsByteArray());
31 }
32}您可以使用这些 C# 示例自动提取网页中的所有 SVG 图像，这对归档或分析网页内容等任务很有帮助。此外，这也非常适合想要从网站中提取 SVG 而无需深入研究源代码的设计师和开发人员。
您可以从 GitHub 下载完整的 C# 示例和数据文件。
Aspose.HTML 提供 HTML 网络应用程序，它是免费转换器、合并器、搜索引擎优化工具、HTML 代码生成器、URL 工具等的在线集合。这些应用程序可在任何装有网络浏览器的操作系统上运行，无需安装任何其他软件。无论你身在何处，都能轻松转换、合并、编码、生成 HTML 代码，从网络中提取数据，或从搜索引擎优化的角度分析网页。使用我们的 HTML 网络应用程序集来处理您的日常事务，让您的工作流程天衣无缝！
