Insert SVG in FieldImage

[antoine escriva]

Hello,

I would like to know if it's possible to insert an SVG image in a block with a FieldImage.
In my case, I have a  SVG image in html that I would like to insert in the block once the user has modified it.

How can I do that ? 

[Beka Westberg]

Hello!

The value of the built-in image field is the source URL of the image you want it to display. So if you have a way to pass it a source URL for your modified image, then calling setValue with that string should definitely work =)

Otherwise you will need to create a custom field to implement this behavior.

I hope that helps! If you have any further questions please reply!
--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/4891dcc4-7308-468d-9825-0a1f94c5a932n%40googlegroups.com.

[antoine escriva]

I solved my problem by converting my svg to base 64 !

"matrix" -> document.querySelector('#matrix") -> "<svg> <rect></rect> .... <rect></rect></svg>"

function get_matrix_base64(matrix) {

     let s = new XMLSerializer().serializeToString(matrix);

     let encodedData = window.btoa(s);

     return "data:image/svg+xml;base64," + encodedData;

}

[Beka Westberg]

Nice! I'm glad you found a fix that works for your project :D Thank you for posting the solution back to the forum =)

Best wishes,

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/749735a8-ab4a-4abd-8b93-e0a6ca2bbdb9n%40googlegroups.com.

[Adam Higerd]

You might consider looking at URL.createObjectURL as well, though be sure to also look at URL.revokeObjectURL to avoid resource leaks.

/s/ Adam

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAHpwHMaN89FzqkJy70Waw05dkB8miiF_WQT2b3j57aBW%3DSj_5g%40mail.gmail.com.