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.

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.

 1// Open a document you want to download inline SVG images from
 2final HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/net/");
 3
 4// Collect all inline SVG images
 5HTMLCollection images = document.getElementsByTagName("svg");
 6
 7for (int i = 0; i < images.getLength(); i++) {
 8    // Save every image to a local file system
 9    FileHelper.writeAllText("{i}.svg", images.get_Item(i).getOuterHTML());
10}

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.

 1// Open a document you want to download external SVGs from
 2final HTMLDocument document = new HTMLDocument("https://products.aspose.com/html/net/");
 3
 4// Collect all image elements
 5HTMLCollection images = document.getElementsByTagName("img");
 6
 7// Create a distinct collection of relative image URLs
 8java.util.Set<String> urls = new HashSet<>();
 9for (Element element : images) {
10    urls.add(element.getAttribute("src"));
11}
12
13// Filter out non SVG images
14java.util.List<String> svgUrls = new ArrayList<>();
15for (String url : urls) {
16    if (url.endsWith(".svg")) {
17        svgUrls.add(url);
18    }
19}
20// Create absolute SVG image URLs
21java.util.List<Url> absUrls = svgUrls.stream()
22    .map(src -> new Url(src, document.getBaseURI()))
23    .collect(Collectors.toList());
24
25// foreach to while statements conversion
26for (Url url : absUrls) {
27    // Create a downloading request
28    final RequestMessage request = new RequestMessage(url);
29
30    // Download SVG image
31    final ResponseMessage response = document.getContext().getNetwork().send(request);
32
33    // Check whether response is successful
34    if (response.isSuccess()) {
35        String[] split = url.getPathname().split("/");
36        String path = split[split.length - 1];
37
38        // Save file to a local file system
39        FileHelper.writeAllBytes(path, response.getContent().readAsByteArray());
40    }
41}

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.