Extraer SVG del sitio web – Ejemplos de C#

SVG es un formato de gráficos vectoriales diseñado principalmente para la web y que se utiliza a menudo en documentos HTML. La principal ventaja de SVG es su insuperable capacidad de escalar a cualquier tamaño sin comprometer la calidad. Junto con otros beneficios como programabilidad, tamaño de archivo pequeño, estilo, interactividad y más, SVG puede mejorar el atractivo visual y la funcionalidad de las páginas web. Si es diseñador o desarrollador, a veces prefiere obtener imágenes SVG de un sitio web.

Descargar SVG no es tan fácil como parece. Si alguna vez ha utilizado un clic derecho para guardar o abrir una imagen desde una página web, probablemente haya notado que los archivos SVG son difíciles de extraer de un sitio web. A veces, hacer clic derecho no le permitirá abrirlo en una nueva pestaña ni guardarlo. ¿Y qué hacer? ¿Es mirar las etiquetas SVG y determinar dónde comienza y termina el SVG en el código HTML de la página web? Afortunadamente, puedes usar la biblioteca Aspose.HTML for .NET para descargar SVG desde un sitio web mediante programación.

Las imágenes SVG en documentos HTML vienen en dos formas: SVG en línea (inline SVG) y SVG externo (external SVG). En este artículo, veremos cómo extraer ambos tipos de estas imágenes usando Aspose.HTML for .NET API. El uso de nuestra biblioteca C# le ayudará a encontrar y extraer todos los SVG de cualquier sitio web. Es mejor que cavar y buscarlos manualmente. ¡Intentémoslo!

Extraer SVG del sitio web – SVG en línea

Las imágenes SVG en línea son elementos SVG <svg> cuyo contenido describe la imagen. SVG en línea se refiere a incrustar código SVG directamente en código HTML en lugar de vincularlo a un archivo SVG externo. Esta es una técnica popular para crear íconos, logotipos y otros elementos gráficos de sitios web.

Para guardar imágenes SVG en línea, buscaremos todos los elementos <svg> en un documento HTML y usaremos la propiedad OuterHTML para obtener su contenido. Entonces, para descargar SVG del sitio web, debe seguir algunos pasos:

1. Utilice el constructor HTMLDocument(Url) para crear una instancia de la clase HTMLDocument y pásele la URL del sitio web del que desea extraer imágenes SVG en línea.
2. Utilice el método GetElementsByTagName("svg") para recopilar todos los elementos <svg>. El método devuelve una lista de los elementos <svg> del documento HTML.
3. Cree un bucle para recorrer cada imagen SVG en la matriz imágenes.
4. Para cada imagen en la matriz, use la propiedad OuterHTML para obtener el contenido del elemento SVG y el método File.WriteAllText(), que escribió el contenido SVG en un archivo local.

// Open a document you want to download inline SVG images from
using var document = new HTMLDocument("https://products.aspose.com/html/net/");

// Collect all inline SVG images
var images = document.GetElementsByTagName("svg");

for (var i = 0; i < images.Length; i++)
{
    // Save every image to a local file system
    File.WriteAllText(Path.Combine(OutputDir, $"{i}.svg"), images[i].OuterHTML);
    //Console.WriteLine(document.Images[i].OuterHTML);
}

Nota: Algunos archivos SVG pueden estar protegidos por derechos de autor, así que consulte los términos de uso antes de extraerlos y usarlos. Por ejemplo, utilizar el logotipo de la empresa u otros archivos SVG extraídos en sus proyectos de diseño puede considerarse plagio y no debería hacerlo. Puede ser una buena idea pedir permiso a los propietarios del sitio web antes de utilizar sus archivos.

Extraer SVG del sitio web – SVG externo

SVG externo es un archivo SVG almacenado fuera de un documento HTML y cargado en el documento usando, por ejemplo, una etiqueta <img>. La separación de archivos SVG de HTML hace posible reutilizar la misma imagen SVG en varios lugares sin duplicar el código, lo que hace que las páginas web sean más eficientes y fáciles de mantener.

Las imágenes SVG externas están representadas por el elemento <img>, que a su vez también puede hacer referencia a otros tipos de imágenes, por lo que las imágenes SVG deben filtrarse más. Veamos cómo descargar SVG desde un sitio web usando la biblioteca Aspose.HTML for .NET:1. Utilice el constructor HTMLDocument(Url) para crear una instancia de la clase HTMLDocument y pásele la URL del sitio web del que desea extraer SVG externos.

1. Utilice el método GetElementsByTagName("img") para recopilar todos los elementos <img>. El método devuelve una lista de los elementos <img> del documento HTML.
2. Utilice el método Select() para crear una colección distinta de URL de imágenes relativas y el método GetAttribute(“src”) para extraer el atributo src de cada elemento <img>.
3. Para filtrar imágenes que no sean SVG, utilice los métodos Where() y EndsWith() para verificar si la URL termina con la extensión .svg.
4. Cree URL de imágenes SVG absolutas utilizando la clase Url y la propiedad BaseURI de la clase HTMLDocument.
5. Luego, para cada URL absoluta, cree una solicitud utilizando la clase RequestMessage.
6. Utilice el método Context.Network.Send(request) del documento para enviar la solicitud. La respuesta se verifica para garantizar que haya sido exitosa.
7. Finalmente, si la respuesta fue exitosa, use el método File.WriteAllBytes() para guardar SVG en un archivo local.

// Open a document you want to download external SVGs from
using var document = new HTMLDocument("https://products.aspose.com/html/net/");

// Collect all image elements
var images = document.GetElementsByTagName("img");

// Create a distinct collection of relative image URLs
var urls = images.Select(element => element.GetAttribute("src")).Distinct();

// Filter out non SVG images
var svgUrls = urls.Where(url => url.EndsWith(".svg"));

// Create absolute SVG image URLs
var absUrls = svgUrls.Select(src => new Url(src, document.BaseURI));

foreach (var url in absUrls)
{
    // Create a downloading request
    using var request = new RequestMessage(url);

    // Download SVG image
    using var response = document.Context.Network.Send(request);

    // Check whether response is successful
    if (response.IsSuccess)
    {
        // Save SVG image to a local file system
        File.WriteAllBytes(Path.Combine(OutputDir, url.Pathname.Split('/').Last()), response.Content.ReadAsByteArray());
    }
}

Puede utilizar estos ejemplos de C# para automatizar la extracción de todas las imágenes SVG de una página web, lo que puede resultar útil para tareas como archivar o analizar contenido web. Además, esto es excelente para diseñadores y desarrolladores que desean extraer archivos SVG de sitios sin profundizar en el código fuente.

Puede descargar los ejemplos completos de C# y los archivos de datos desde GitHub.

Aspose.HTML ofrece Aplicaciones web HTML que son una colección en línea de convertidores, fusiones, herramientas de SEO, generadores de código HTML, herramientas de URL y más gratuitos. Las aplicaciones funcionan en cualquier sistema operativo con un navegador web y no requieren ninguna instalación de software adicional. Convierta, fusione, codifique, genere código HTML, extraiga datos de la web o analice páginas web en términos de SEO fácilmente dondequiera que esté. Utilice nuestra colección de aplicaciones web HTML para realizar sus asuntos diarios y hacer que su flujo de trabajo sea fluido.