thehighhomie @thehighhomie

SVG string to createObjectURL?

При попытке создания blobUrl из строки появляется ошибка ругающаяся на амперсанды в href у картинки.

Вот так я хочу отдать svg строку методу createObjectURL:

const svgString = `
<?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" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1920" height="1080" viewBox="0 0 1920 1080" xml:space="preserve">
<desc>Created with Fabric.js 3.6.2</desc>
<defs>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="#151616"></rect>
<g transform="matrix(1 0 0 1 960 540)"  >
<rect style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  x="-960" y="-540" rx="0" ry="0" width="1920" height="1080" />
</g>
<g transform="matrix(0.54 0 0 0.54 894.3 440)"  >
	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  xlink:href="https://images.unsplash.com/photo-1587839443822-98fc3e351c22?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjIzOTk3fQ" x="-540" y="-810" width="1080" height="1620"></image>
</g>
</svg>
`

const blob = new Blob([svgString], { type: 'image/svg+xml' })
const url = URL.createObjectURL(blob)

когда такой url устанавливается в src тэга img то в браузере у тэга img появляется иконка битого изображения, а когда я открываю blobUrl то там видно, что парсер ругается и ругается он на амперсанды в xlink:href у изображения.

окей, я переставляю все & на '&amp' когда я открываю blobUrl то ошибки самого изображения нет, но картинка в которой ссылка с амперсандами уже имеет иконку битого изображения, а другие элементы нормальн отображаются в изображении. при чем если я уберу все гет параметры то картинка отобразится нормально, но гет параметры нужны, потому что unsplash я как пример взял, у меня по гет параметрам выдаются дополнительные настройки изображений

в общем с заменой амперсандов & на '&amp' ошибки парсинна пропадают но blubUrl все равно не радботает...