powerbivisualizationpowerbi-desktopvega-litedeneb

SVG for point marks - what format of SVG works?

I've simplified the example from here to draw an svg (pic) for the point mark like this:

svg point mark working

However trying to substitute the SVG path with another path (pic2) results in this: not working pic

It should show a christmas tree: xmas tree

This is the code with both svg in a list, it seems the working one is spaced differently?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {"view": {"stroke": ""}},
  "width": 800,
  "height": 200,
  "data": {
    "values": [
      {"country": "Great Britain", "animal": "pic", "col": 3}
    ]
  },
  "mark": {"type": "point", "filled": true},
  "encoding": {
    "x": {"field": "col", "type": "ordinal", "axis": null},
    "y": {"field": "animal", "type": "ordinal", "axis": null},
    "row": {"field": "country", "header": {"title": ""}},
    "shape": {
      "field": "animal",
      "type": "nominal",
      "scale": {
        "domain": ["pic", "pic2"],
        "range": [
          "M1.7 -1.7h-0.8c0.3 -0.2 0.6 -0.5 0.6 -0.9c0 -0.6 -0.4 -1 -1 -1c-0.6 0 -1 0.4 -1 1c0 0.4 0.2 0.7 0.6 0.9h-0.8c-0.4 0 -0.7 0.3 -0.7 0.6v1.9c0 0.3 0.3 0.6 0.6 0.6h0.2c0 0 0 0.1 0 0.1v1.9c0 0.3 0.2 0.6 0.3 0.6h1.3c0.2 0 0.3 -0.3 0.3 -0.6v-1.8c0 0 0 -0.1 0 -0.1h0.2c0.3 0 0.6 -0.3 0.6 -0.6v-2c0.2 -0.3 -0.1 -0.6 -0.4 -0.6z",
          "M256 0L266.969 30.766L299.641 31.703L273.766 51.656L282.969 83L256 64.563L229.031 83L238.234 51.656L212.359 31.703L245.016 30.766z M387.281 405.297L327.781 313.344L361.016 313.344L301.203 220.875L334.094 220.875L256 100.156L177.906 220.875L210.781 220.875L150.984 313.344L184.219 313.344L124.719 405.297z M229.328 430.313h53.344v81.688H229.328Z"
        ]
      },
      "legend": null
    },
    "opacity": {"value": 1},
    "size": {"value": 200}
  }
}
Solution

  • It does show a Christmas tree doesn't it? If you're talking about the size and position, then these are encoded within the SVG. You can paste the SVG code into an editor like the one here: https://editor.method.ac/ and resize or position differently.

    <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
 <title>Drawing</title>

 <g id="Layer_1">
  <title>Layer 1</title>
  <path d="m173.00001,16l4.03405,11.31476l12.01573,0.3446l-9.51601,7.33808l3.38457,11.52733l-9.91835,-6.78055l-9.91835,6.78055l3.38457,-11.52733l-9.51601,-7.33808l12.01021,-0.3446l4.03957,-11.31476l0.00002,0zm48.281,149.05543l-21.88222,-33.81741l12.22278,0l-21.99733,-34.00718l12.09627,0l-28.72051,-44.39663l-28.72051,44.39663l12.09039,0l-21.99145,34.00718l12.22278,0l-21.88222,33.81741l96.56201,0l0.00001,0zm-58.09012,9.20009l19.61824,0l0,30.04227l-19.61824,0l0,-30.04227z" id="svg_3" stroke="#000" fill="none"/>
 </g>
</svg>