creare un'immagine SVG con stringa base64 incorporata da un'altra immagine svg con elementi

Ho un file SVG che contiene diversi elementi (come percorso, cerchi, rettangoli, ecc.).creare un'immagine SVG con stringa base64 incorporata da un'altra immagine svg con elementi

Mi piacerebbe convertire il file SVG in SVG con dati base64 integrati invece di più elementi. è possibile farlo con Batik?

Il progetto su cui sto lavorando richiede solo le librerie Java.

fonte

2010-08-10 Olivier

C'è una tecnica che ho usato per incorporare immagini SVG nei post di Blogger che potrebbero funzionare per questo. Fondamentalmente, è un processo in due fasi:

Si serializza l'SVG che si desidera incorporare e lo si codifica URL.
Si utilizza quindi la stringa con codifica URL come URI di dati nell'attributo xlink: href di un elemento di utilizzo SVG.

Ecco un esempio funzionante che ho testato con Batik. Dire che si desidera incorporare il seguente documento in formato 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>

È possibile URL codificare passando il suo percorso verso il seguente script piccolo Rhino:

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

di partecipazione al corso, se si desidera eseguire questa operazione in modo programmatico in Java, è necessario un metodo specifico per Java di serializzazione del documento SVG e codifica URL della stringa.

Questo vi dà il documento come una stringa con codifica 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

È quindi possibile incorporare questo documento utilizzando in un dato URI, che assomiglia a questo:

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

Per Ad esempio, il seguente documento HTML utilizza un tag oggetto e l'URI di dati per incorporare il documento SVG:

<html> 
    <head> 
    </head> 
    <body> 
     <object data="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" width="400" height="400"></object> 
    </body> 
</html>

Puoi fare la stessa cosa con l'attributo xlink: href di un elemento 'use' di SVG, con un avvertimento: è illegale fare riferimento a un documento completo. Invece, è necessario fare riferimento a un elemento nel documento tramite il suo id, e tale elemento sarà profondamente clonato nel documento host SVG. In questo esempio, l'elemento radice del documento SVG fa riferimento al suo id "the_svg" (notare il tag hash alla fine dell'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>

FYI, questo funziona bene in Batik 1.7 (testato nel browser Linea ondulata), ma non Chromium o Firefox.

fonte

2010-08-10 22:04:36 jbeard4

Un tag "immagine" svg funzionerebbe anche al posto di un "uso". In tal caso, non sarà necessario fare riferimento all'elemento root tramite il suo id nell'URL. – jbeard4

grazie, l'ho provato e funziona bene. – Olivier

Ottimo! Probabilmente dovresti contrassegnare questa risposta come corretta, quindi. – jbeard4

creare un'immagine SVG con stringa base64 incorporata da un'altra immagine svg con elementi

risposta

Problemi correlati