Отправка картинки в SVG на email
 

Нужно при нажатии на кнопку отправить SVG файл в базу, а затем передать на почту.

<figure id="imapc" class="changeSide-1">
                            <object data="{{asset($product_slug->svg_url)}}" type="image/svg+xml" id="imap">
                                <p>К сожалению, вы используете устаревшую версию браузера, который не поддерживает интерактивную карту.</p>
                            </object>
                        </figure>

<form action="{{route('send-form')}}" method="post" enctype="multipart/form-data">
                                    {{ csrf_field() }}
                                    <input type="text" class="email" placeholder="Enter your email" name="email">
                                    <input type="text" class="hidden-form-front" name="product_front" value="">
                                    <input type="text" class="hidden-form-back" name="product_back" value="">
                                    <button class="send-button">Send</button>
                                </form>

$('.send-button').click(function (e) {
        var getFront = document.getElementById("imap").contentDocument.lastChild.outerHTML;
        var imgsrc = 'data:image/svg+xml;base64,' + btoa(getFront);
       
        $('.hidden-form-front').val(imgsrc);

    });

При этом коде, в базу приходит закодированный в base файл, но на почту приходит пустой img.

<img alt="">

https://css-tricks.com/a-guide-on-svg-support-in-email/

Попробуйте так:

<embed type="image/svg+xml" src="data:image/svg+xml;base64,PHN2ZyB4bW......

не знаю на всех ли почтовых клиентах прокатит такое. И вообще, не ожидайте от почтовых клиентов и серверов такой поддержки как HTML.

Спасибо, не получилось

Конвертируйте в графический формат, ибо с почтовыми клиентами на моб. устройствах еще печальнее будет.

Вот мой код за конвертацию в png

var getFront = document.getElementById("imap").contentDocument.lastChild.outerHTML;
        var imgsrc = 'data:image/svg+xml;base64,' + btoa(getFront);

        var canvas = document.querySelector("canvas"),
            context = canvas.getContext("2d");
        canvas.setAttribute('width', 526);
        canvas.setAttribute('height', 233);
var image = new Image;
        image.src = imgsrc;
        image.onload = function () {
            context.drawImage(image, 0, 0);
            var canvasdata = canvas.toDataURL("image/png");
            canvas.parentNode.removeChild(canvas);
            $('.hidden-form-front').val(canvasdata);
        };

Но теперь в базу ничего не приходит.

А что вы в нее записываете?

ссылку в base64. Вот такого вида: data:image/png;base64,iVBORw0KGgoAAA...

Зачем? И вообще откуда у клиента возникает этот SVG, от сервера так, а значит зачем же его туда сюда гонять? Можно на сервер отправлять "указатель" на выбранный SVG, сервер его конвертирует (imageMagick) и сохранит как картинку на диск, ну и отправит почтой (можно не как вложение, а внедренное в тело почтового отправления).

Если на сервере нечем конвертировать SVG, пусть будет клиентом, но получая это как base64, сохраняйте ее как картинку на диск, зачем забивать базу картинками?

Как сохранить картинку на диск? Через

<input type="file">

мне не подходит.
У меня на сайте есть картинка в SVG, пользователь может поменять цвет этой картинки на самом сайте, а затем уже отредактированная картинка должна быть отправлена на email.

Если приходит изображение как base64 и язык сервера РНР, то изображение, это

$img = base64_decode($_POST['product_front']);

Конечно и удостоверится нужно, что это изображение. Можно и не сохранять на диск, если SVG, это рабочий формат, а изображение только для отправки почтой, то $img и отправлять, без сохранения на диск.