java - usar - svg web

crear una imagen SVG con cadena base64 incorporada de otra imagen svg con elementos (1)

Hay una técnica que he utilizado para insertar imágenes SVG en publicaciones de Blogger que podrían funcionar para esto. Básicamente, es un proceso de dos pasos:

Usted serializa el SVG que desea incrustar y lo codifica con URL.
A continuación, utiliza la cadena con codificación URL como URI de datos en el atributo xlink: href de un elemento de uso de SVG.

Este es un ejemplo de trabajo que he probado con Batik. Supongamos que desea incrustar el siguiente documento SVG, circle.svg:

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4in" height="4in" id="the_svg" viewBox="0 0 4 4" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="1" cy="1" r="1" fill="blue" stroke="none" id="the_circle"/> </svg>

Puede codificar con URL pasando su ruta al siguiente pequeño script de Rhino:

#!/usr/bin/env rhino print(escape(readFile(arguments[0])))

Por supuesto, si quiere hacer esto programáticamente en Java, necesitará un método específico de Java para serializar el documento SVG y la codificación URL de la cadena.

Esto le da el documento como una cadena codificada en URL:

%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A

A continuación, puede insertar este documento utilizándolo en un URI de datos, que se ve así:

data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A

Por ejemplo, el siguiente documento HTML usa una etiqueta de objeto y el URI de datos para incrustar el documento SVG:

Puede hacer lo mismo con el atributo xlink: href de un elemento ''uso'' de SVG, con una advertencia: es ilegal hacer referencia a un documento completo. En su lugar, debe hacer referencia a un elemento en el documento por su id, y ese elemento se clonará en profundidad en el documento de host SVG. En este ejemplo, el elemento raíz del documento SVG es referenciado por su id "the_svg" (observe la etiqueta hash al final del URI).

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="4in" height="4in" id="the_svg" viewBox="0 0 4 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <use x="0" y="0" width="4" height="4" xlink:href="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%0A%20%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20width%3D%224in%22%20height%3D%224in%22%20id%3D%22the_svg%22%0A%20%20%20%20%20viewBox%3D%220%200%204%204%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%09%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%20fill%3D%22blue%22%20stroke%3D%22none%22%20id%3D%22the_circle%22/%3E%0A%3C/svg%3E%0A%0A#the_svg"/> </svg>

Para tu información, esto funciona bien en Batik 1.7 (probado en el navegador Squiggle), pero no en Chromium o Firefox.

Tengo un archivo SVG que contiene varios elementos (como ruta, círculos, rectángulos, etc.).

Me gustaría convertir ese archivo SVG a un SVG con datos base64 integrados en lugar de múltiples elementos. ¿Es posible hacer eso con Batik?

El proyecto en el que estoy trabajando requiere que use solo bibliotecas de Java.