Extraer SVG de sitio web – Ejemplos Java

SVG es un formato de gráficos vectoriales diseñado principalmente para la web, a menudo utilizado en documentos HTML. La principal ventaja de SVG es su excepcional capacidad para escalarse a cualquier tamaño sin perder calidad. Además, SVG ofrece varias ventajas, como programabilidad, tamaño de archivo reducido, opciones de estilo, interactividad, etc., todo lo cual puede mejorar el atractivo visual y la funcionalidad de una página web.

Descargar SVG no es tan fácil como parece. Si alguna vez ha utilizado el botón derecho del ratón para guardar o abrir una imagen de una página web, probablemente se habrá dado cuenta de que los archivos SVG son difíciles de extraer de un sitio web. A veces, hacer clic con el botón derecho del ratón no permite abrirlo en una pestaña nueva ni guardarlo. ¿Qué puede hacer? Puede inspeccionar manualmente el código HTML para identificar las etiquetas SVG y determinar dónde empieza y termina el contenido SVG. Afortunadamente, existe una solución más sencilla: puede utilizar Aspose.HTML for Java para descargar archivos SVG de un sitio web mediante programación.

Los gráficos SVG de las páginas web pueden incrustarse de dos formas: como Inline SVG dentro del HTML o como external SVG referenciado mediante URL. En este artículo, exploraremos cómo extraer SVG tanto en línea como externos utilizando la API de Aspose.HTML for Java. Con este método, puede recopilar automáticamente todos los SVG de un sitio web sin tener que buscarlos manualmente en el código. Sumerjámonos de lleno en la extracción de SVG sin esfuerzo.

Extraer SVG de un sitio web – Inline SVG

Las imágenes Inline SVG son elementos SVG <svg> cuyo contenido describe la imagen. Inline SVG se refiere a la incrustación de código SVG directamente en el código HTML en lugar de vincular a un archivo SVG externo. Se trata de una técnica muy utilizada para crear iconos, logotipos y otros elementos gráficos para sitios web.

Para guardar imágenes SVG en línea, buscaremos todos los elementos <svg> en un documento HTML y utilizaremos la propiedad OuterHTML de la clase Element para obtener su contenido. Por lo tanto, para descargar SVG desde el sitio web, usted debe tomar algunos pasos siguientes:

1. Utilice el constructor HTMLDocument(Url) para crear una instancia de HTMLDocument, pasando la URL de la página web que contiene imágenes SVG en línea.
2. Llame al método getElementsByTagName(“img”) para recoger todos los elementos <svg> presentes en el documento HTML.
3. Cree un bucle para recorrer cada imagen SVG de la colección images.
4. Para cada imagen de la matriz, utilice el método getOuterHTML() para obtener el contenido del elemento SVG y, a continuación, utilice el método FileHelper.writeAllText() para escribir el contenido SVG en un archivo local .svg.

// How to extract inline SVG images from a webpage using Java

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

// Collect all inline SVG images
HTMLCollection images = document.getElementsByTagName("svg");

for (int i = 0; i < images.getLength(); i++) {
    // Save every image to a local file system
    FileHelper.writeAllText("{i}.svg", images.get_Item(i).getOuterHTML());
}

Nota: Respete siempre las leyes de copyright cuando trabaje con archivos SVG. Algunos archivos SVG, como logotipos de empresas o gráficos de marca, pueden estar protegidos, y utilizarlos sin permiso puede considerarse plagio. Antes de extraer o utilizar cualquier archivo SVG en sus proyectos, compruebe las condiciones de uso del sitio web o póngase en contacto con el propietario del sitio para obtener el permiso correspondiente.

Extraer SVG de un sitio web – External SVG

SVG externo es un archivo SVG almacenado fuera de un documento HTML y cargado en el documento utilizando, por ejemplo, una etiqueta <img>. Separar los archivos SVG del HTML permite 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 se representan mediante 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 de un sitio web utilizando la biblioteca Aspose.HTML for Java:

1. Cree una instancia de la clase HTMLDocument utilizando el constructor HTMLDocument(Url) y pase la URL del sitio web del que desea extraer las imágenes SVG externas.
2. Recopile todos los elementos <img> del documento HTML utilizando el método getElementsByTagName("img").
3. Extrae el atributo src de cada elemento de imagen utilizando el método getAttribute(“src”) y almacena los valores en un Set.
4. Filtrar sólo las URLs de imágenes .svg comprobando si cada URL termina en .svg, y añadirlas a una nueva lista.
5. Cree URLs de imágenes SVG absolutas utilizando la clase Url y la propiedad BaseURI de la clase HTMLDocument.
6. Recorra las URL absolutas y cree una solicitud utilizando la clase RequestMessage para cada URL SVG.
7. Envíe cada solicitud utilizando document.getContext().getNetwork().send(request) y compruebe si la respuesta es correcta.
8. Finalmente, si la respuesta es satisfactoria, utilice FileHelper.writeAllBytes() para guardar el contenido SVG en el sistema de archivos local.

// Download external SVG images from HTML using Java

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

// Collect all image elements
HTMLCollection images = document.getElementsByTagName("img");

// Create a distinct collection of relative image URLs
java.util.Set<String> urls = new HashSet<>();
for (Element element : images) {
    urls.add(element.getAttribute("src"));
}

// Filter out non SVG images
java.util.List<String> svgUrls = new ArrayList<>();
for (String url : urls) {
    if (url.endsWith(".svg")) {
        svgUrls.add(url);
    }
}
// Create absolute SVG image URLs
java.util.List<Url> absUrls = svgUrls.stream()
        .map(src -> new Url(src, document.getBaseURI()))
        .collect(Collectors.toList());

// foreach to while statements conversion
for (Url url : absUrls) {
    // Create a downloading request
    final RequestMessage request = new RequestMessage(url);

    // Download SVG image
    final ResponseMessage response = document.getContext().getNetwork().send(request);

    // Check whether response is successful
    if (response.isSuccess()) {
        String[] split = url.getPathname().split("/");
        String path = split[split.length - 1];

        // Save file to a local file system
        FileHelper.writeAllBytes($o(path), response.getContent().readAsByteArray());
    }
}

Este enfoque automatiza la extracción de imágenes SVG externas de una página web, ahorrándole el tiempo y el esfuerzo de descargar manualmente cada archivo. Esto es ideal para diseñadores y desarrolladores que quieren extraer SVGs de sitios sin necesidad de sumergirse en el código fuente.

Aspose.HTML ofrece un conjunto de Aplicaciones web HTML gratuitas en línea, que incluyen conversores, fusiones, herramientas SEO, generadores de código HTML, utilidades URL y mucho más. Estas herramientas basadas en navegador funcionan en todos los sistemas operativos y no requieren la instalación de ningún software adicional. Si necesita convertir o fusionar archivos, extraer datos web, generar código HTML o analizar páginas para SEO, puede hacerlo todo directamente en la web. Agilice sus tareas diarias y aumente su productividad con nuestras sencillas aplicaciones web HTML, en cualquier momento y lugar.