créer une image SVG avec une chaîne base64 incorporée à partir d'une autre image svg avec des éléments

J'ai un fichier SVG qui contient plusieurs éléments (comme le chemin, les cercles, les rectangles, etc.).créer une image SVG avec une chaîne base64 incorporée à partir d'une autre image svg avec des éléments

Je voudrais convertir ce fichier SVG en SVG avec des données de base64 incorporées au lieu de plusieurs éléments. est-ce possible de faire ça avec Batik?

Le projet sur lequel je travaille nécessite l'utilisation de bibliothèques Java uniquement.

Source

2010-08-10 Olivier

Il existe une technique que j'ai utilisée pour intégrer des images SVG dans les articles de Blogger qui pourraient fonctionner pour cela. Fondamentalement, il s'agit d'un processus en deux étapes:

Vous sérialiser le SVG que vous voulez intégrer et le coder en URL.
Vous utilisez ensuite la chaîne codée en URL comme URI de données dans l'attribut xlink: href d'un élément d'utilisation SVG.

Voici un exemple de travail que j'ai testé avec Batik. Dites que vous voulez incorporer le document SVG suivant, 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>

Vous pouvez encode il en passant son chemin vers le script petit Rhino suivant:

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

-sûr, Si vous voulez le faire par programmation en Java, alors vous aurez besoin d'une méthode spécifique à Java pour sérialiser le document SVG et encoder l'URL de la chaîne.

Cela vous donne le document comme une chaîne encodée 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

Vous pouvez ensuite intégrer ce document en utilisant dans un URI de données, qui ressemble à ceci:

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

Pour par exemple, le document HTML suivant utilise une balise d'objet et l'URI des données pour intégrer le document 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>

Vous pouvez faire la même chose avec l'attribut xlink: href d'un élément SVG 'use', avec une mise en garde: il est illégal de référencer un document complet. Au lieu de cela, vous devez référencer un élément du document par son identifiant, et cet élément sera cloné en profondeur dans le document hôte SVG. Dans cet exemple, l'élément racine du document SVG est référencé par son identifiant "the_svg" (notez l'étiquette de hachage à la fin de l'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>

Pour votre information, cela fonctionne bien Batik 1.7 (testé dans le navigateur gribouillis), mais pas Chrome ou Firefox.

Source

2010-08-10 22:04:36 jbeard4

Une balise svg "image" fonctionnerait également à la place d'une "utilisation". Dans ce cas, vous n'avez pas besoin de référencer l'élément racine par son identifiant dans l'URL. – jbeard4

merci, je l'ai essayé et ça marche bien. – Olivier

Génial! Vous devriez probablement marquer cette réponse comme correcte, alors. – jbeard4

créer une image SVG avec une chaîne base64 incorporée à partir d'une autre image svg avec des éléments

Répondre

Questions connexes