how to embed FileAttachment image in svg

Community Help
1

How do I use an .png image attached to a notebook in an image element of an svg?

The following does not work:

{
  const margin = {top: 150, right: 10, bottom: 50, left: 100};
  const cHeight = 0.8*width;
  const svg = d3.create('svg')
      .attr('viewBox', `0 0 ${width} ${cHeight}`)
  //horizontal axis
  const hScale = d3.scaleLinear()
    .domain([0,1])
    .range([margin.left,width-margin.right]);

  //vertical axis
  const vScale = d3.scaleLinear()
    .domain([0,1])
    .range([margin.top, cHeight-margin.bottom]);

  
  //image
  svg.append('image')
    .attr('x', hScale(0))
    .attr('y', vScale(0.1))
    .attr('width', hScale(0.25) - hScale(0))
    .attr('height', vScale(0.9)-vScale(0.1))
    .attr('href', FileAttachment("image.png").image())

  
  
  return svg.node()
}

nor does the following:

{
  const margin = {top: 150, right: 10, bottom: 50, left: 100};
  const cHeight = 0.8*width;
  const svg = d3.create('svg')
      .attr('viewBox', `0 0 ${width} ${cHeight}`)
  //horizontal axis
  const hScale = d3.scaleLinear()
    .domain([0,1])
    .range([margin.left,width-margin.right]);

  //vertical axis
  const vScale = d3.scaleLinear()
    .domain([0,1])
    .range([margin.top, cHeight-margin.bottom]);

  
  //image
  svg.append('image')
    .attr('x', hScale(0))
    .attr('y', vScale(0.1))
    .attr('width', hScale(0.25) - hScale(0))
    .attr('height', vScale(0.9)-vScale(0.1))
    .attr('href', FileAttachment("image.png"))

  
  
  return svg.node()
}

nor does the following:

{
  const margin = {top: 150, right: 10, bottom: 50, left: 100};
  const cHeight = 0.8*width;
  const svg = d3.create('svg')
      .attr('viewBox', `0 0 ${width} ${cHeight}`)
  //horizontal axis
  const hScale = d3.scaleLinear()
    .domain([0,1])
    .range([margin.left,width-margin.right]);

  //vertical axis
  const vScale = d3.scaleLinear()
    .domain([0,1])
    .range([margin.top, cHeight-margin.bottom]);

  
  //image
  svg.append('image')
    .attr('x', hScale(0))
    .attr('y', vScale(0.1))
    .attr('width', hScale(0.25) - hScale(0))
    .attr('height', vScale(0.9)-vScale(0.1))
    .attr('href', "image.png")

  
  
  return svg.node()
}

Thanks!

2

This works:

{
  const margin = {top: 150, right: 10, bottom: 50, left: 100};
  const cHeight = 0.8*width;
  const svg = d3.create('svg')
      .attr('viewBox', `0 0 ${width} ${cHeight}`)
  //horizontal axis
  const hScale = d3.scaleLinear()
    .domain([0,1])
    .range([margin.left,width-margin.right]);

  //vertical axis
  const vScale = d3.scaleLinear()
    .domain([0,1])
    .range([margin.top, cHeight-margin.bottom]);


  //image
  svg.append('image')
    .attr('x', hScale(0))
    .attr('y', vScale(0.1))
    .attr('width', hScale(0.25) - hScale(0))
    .attr('height', vScale(0.9)-vScale(0.1))
    .attr('href', await FileAttachment("image.png").url())
  
  return svg.node()
}