1

I determined using the core api that the method "svgCanvas.importImage(url) can import base64 encoded images.

But the embedded API does not expose this method which is private. It also seems i can not use any of the methods that method uses (svgFromgJson, etc).

Does anyone have advice on how I can load a base 64 string representing an image when the embedded svg-edit starts up? I am thinking to just wrap that string inside an < image> tag in a mock svg file and import that way..

Does SVG support embedding of bitmap images?

Community
  • 1
  • 1
Eddie
  • 9,696
  • 4
  • 45
  • 58

1 Answers1

1

Modifying the existing code, based on the answer in my original question I modified their sample import, and it works just wonderfully.

  1. Include the embedapi.js in your page
  2. Define an Iframe to show svg-edit

  3. Call the following code function in the iframe's onload event

    // call onLoad for the iframe
 var frame = document.getElementById('svgedit');
    svgCanvas = new embedded_svg_edit(frame);

 // Hide main button, as we will be controlling new/load/save etc from the host document
 var doc;
 doc = frame.contentDocument;
 if (!doc)
 {
   doc = frame.contentWindow.document;
 }

  var mainButton = doc.getElementById('main_button');
  mainButton.style.display = 'none';            
  var embeddedImage='<image xlink:href="data:image/png;base64,..OMITTED FOR BREVITY.." id="svg_2" height="128" width="128" y="0" x="0"/>';

  var svgDef = '<svg width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><title>Layer 1</title>' + embeddedImage +  '</g></svg>';
   svgCanvas.setSvgString(svgDef);

}
Eddie
  • 9,696
  • 4
  • 45
  • 58