Как установить IMG src с данными SVG + XML?

Question

У меня есть функция, которая возвращает файл SVG, который был ранее сгенерирован jSignature и сохранен в файл. Мой сценарий получает фактическое содержимое файла с помощью вызова ajax вместе с другими данными о подписи в большом объекте JSON.

Это автономный проект, поэтому я пытаюсь сохранить данные SVG в локальном хранилище для рендеринга в автономном режиме. Вот почему я не могу просто ссылаться на файлы SVG на сервере.

Я хочу назначить данные изображения SVG элементу IMG, чтобы пользователь мог видеть их в браузере. Как я могу установить эти данные SVG непосредственно в тег IMG без необходимости сначала записывать их в файл?

Если я попытаюсь установить свойство 'src', на изображении появится значок недопустимого изображения. Я также добавил текст «data: image / svg + xml» перед фактическими данными SVG, но без изменений.

Вот пример:

// This would be read from localStorage:
var image_data = '<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"1000\" height=\"151\"><path />...snipped...</svg>';

// Show the SVG image:
$("#image1").attr('src', 'data:image/svg+xml,' + image_data);

Однако это не работает. Что я делаю не так?

Answer 1

Я вполне уверен, что вы можете встраивать svg в src, например, если svg закодирован в base64.

Вам, вероятно, будет лучше с элементом <svg id="image1"></svg> и использованием jQuery .replaceWith(..) для его замены, нет? (вам не понадобится ганк xml / doctype).

Пример: JFiddle

HTML

<svg id="image1"></svg>

Javascript

var imageData = '<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"><svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>';
$('#image1').replaceWith( $('<div/>').append(imageData).find('svg:first').attr('id','image1') );