Не работает перевод svg в png, как починить?

Question

[Марат Иванов]

на вход подается svg

export const svgToBlobBase64 = (svg: any) => {
    const svgString = new XMLSerializer().serializeToString(svg);
    const decoded = unescape(encodeURIComponent(svgString));
    const base64 = btoa(decoded);
    const imgSource = `data:image/png+xml;base64,${base64}`;
    return imgSource
}

svg в png не конвертируется(

Comments

[Антон Антон]

а если у файла svg поменять расширение на png он от этого станет файлом png?

[psiklop]

Я погуглил png+xml это png кодированный в base64, а кодировать вектор в base64, чтобы получить png не выйдет.

[Adamos]

Надо сначала переименовать в GIF, потом в PDF, потом в DOCX - и из него уже переименовать в PNG. Тогда все получится.

[Марат Иванов]

Adamos, начну с .avi и далее по алфавиту)))

[Adamos]

Марат Иванов, нет, так нельзя.
По алфавиту встретится COM - он на виндах все сломает.
Ради совместимости с MS-DOS.

[Марат Иванов]

Антон Антон, всю детскую мечту о легком способе конвертирования сломали...(((

[Марат Иванов]

Adamos, да блин.... ну через цикл обойду. спасибо что сказал, так бы завалил весь код. Ну а по серьезному, не видел случайно как можно реализовать svg to png в коде?

[Adamos]

Марат Иванов, на фронте - не видел. На бэке ImageMagick сто лет как это умеет.

Answer 1

[Марат Иванов]

библиотека save-svg-as-png решает вопрос

Answer 2

[Антон Антон]

В теории можно попробовать нарисовать svg на канвасе, а потом этот канвас получить в виде png но проверять я это, конечно, не буду

Comments

[Марат Иванов]

проверять никто не просит, но за идею - большое спасибо!

[Adamos]

Марат Иванов, грабли возможны на этом пути.
Результат будет зависеть и от браузера, и от экрана.
И хрен определишь, что там у конкретного юзера пошло не так.

[Антон Антон]

Adamos, да не, я протестил, если запихать svg в качестве src к image, то его можно нарисовать на канвасе и все работает. главное, чтобы этот src проходил cors (будь он неладен), т.е. либо датаурл, либо в том же origin, либо CORS заголовки в ответе к изображению.

[Adamos]

Антон Антон, проверил - в одном браузере на одной машине?
SVG можно и инлайнить, никакие CORS не помешают.

[Антон Антон]

Adamos, в двух )
а вот инлайненый SVG минимум в firefox не работает, это именно img должен быть.

[Adamos]

Антон Антон, можно же и в img впихнуть data:base64, SVG легкие.

[Антон Антон]

Adamos, ну я так и написал

...либо датаурл, либо ...