создать изображение SVG со встроенной строкой base64 из другого изображения SVG с элементами - PullRequest
Новая
       5

создать изображение SVG со встроенной строкой base64 из другого изображения SVG с элементами

5 голосов
/ 11 августа 2010

У меня есть SVG-файл, который содержит несколько элементов (например, путь, круги, прямоугольники и т. Д.).

Я хотел бы преобразовать этот SVG-файл в SVG со встроенными данными base64 вместо нескольких элементов.возможно ли это сделать с помощью батика?

В проекте, над которым я работаю, требуются только библиотеки Java.

1 Ответ

10 голосов
/ 11 августа 2010

Существует техника, которую я использовал для вставки изображений SVG в сообщения Blogger. который может работать для этого. По сути, это двухэтапный процесс:

  1. Вы сериализуете SVG, которую хотите встроить, и кодируете ее по URL.
  2. Затем вы используете строку в кодировке URL в качестве URI данных в атрибуте xlink: href элемента использования SVG.

Вот рабочий пример, который я тестировал с помощью батика. Скажем, вы хотите встроить следующий документ 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>

Вы можете закодировать его URL, передав его путь следующему маленькому скрипту Rhino: 

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

Конечно, если вы хотите сделать это программно на Java, вам понадобится специфический для Java метод сериализации документа SVG и URL-кодирования строки.

Это дает вам документ в виде строки в кодировке 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

Затем вы можете встроить этот документ, используя его в URI данных, который выглядит следующим образом: 

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

Например, следующий HTML-документ использует тег объекта и URI данных для встраивания 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>

Вы можете сделать то же самое с атрибутом xlink: href элемента SVG 'use' с одним предупреждением: ссылаться на полный документ недопустимо. Вместо этого вам нужно ссылаться на элемент в документе по его идентификатору, и этот элемент будет глубоко клонирован в хост-документ SVG. В этом примере корневой элемент документа SVG является ссылкой по его идентификатору "the_svg" (обратите внимание на хэш-тег в конце 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>

Кстати, это хорошо работает в Batik 1.7 (протестировано в браузере Squiggle), но не в Chromium или Firefox.

...