Multiple svg paths in shape?

Deneb Showcase
1

Hello all!
Sorry I keep having questions…
I wanted to use an SVG image as a “point” mark shape as per Vega-Lite tutorial:
Shape of the point marks. Supported values include:
[…]
*** a custom SVG path string (For correct sizing, custom shape paths should be defined within a square bounding box with coordinates ranging from -1 to 1 along both the x and y dimensions.)**

As an example: Isotype Dot Plot | Vega-Lite

However, in all examples I found one path only is specified for the svg image, whereas mine contains more “paths” - see the attached PowerBI, it is the “# SVG Tutorial Icon” measure containing the SVG paths forming the finished image.

Is this possible at all? It’s for a workaround for an idea I have - if it works out I will post about it.

SVG Point shape - eDNA question.pbix (1.6 MB)
Thanks!
Kind regards
Valeria

2

Hi @valeriabreveglieri. Is this the correct PBIX? I see the same data and visual in the supplied PBIX as in the Isotype Dot Plot example, and while I see your Power BI measure [# SVG Tutorial Icon], I don’t see what you’re desired outcome is: are you looking to have only the single SVG (from the measure) used in all cases?

(Never used SVGs before, so wanted to get things straight in my mind before embarking … can you prepare a mock-up of your desired result?)

Greg

3

Hello @Greg !
Yes I used the same file as last time, as I needed some underlying data that do not show but you should see a chart with the Vega-lite shape ex (animals?). I hope this version is OK…
The idea is to replace the cow/pig/… svgs in the vega-lite graph example on the page with the “tutorial” icon that I have now rendered in a matrix to make it clearer. Yes I would only need the “Tutorial” SVG in the end, not the animals SVGs, but once understood how to pass it to Vega-lite, then remodeling the chart should be easy (note the conditional :joy:)
So practically change the code in the Vega-lite example for at least one svg path to render the shape of the points as my “tutorial” svg.
The difficulty I am finding is that my svg has several paths - it is several components together - not just one like the examples from Vega-lite. So I am not sure if possible/how to pass that on…

Hope it’s clearer - if not please let me know!
Thanks
Kind regards
Valeria

SVG Point shape - eDNA question.pbix (1.6 MB)

4

Hi @valeriabreveglieri

I’m a newbie to using SVGs in Power BI and Deneb, but remembered a YouTube video by Ben Ferry from last year that I thought might help:

I was able to have a couple of parameters setup with SVGs within the Deneb visual and then could use them conditionally.

eDNA Forum - Multiple SVG Paths - 1
eDNA Forum - Multiple SVG Paths - 12944×1269 361 KB

As a quick test, I searched for and found another simple SVG (a truck) at:

Here’s the code:

{
  ...,
  "params": [
    {
      "name": "_svg_person",
      "value": "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"
    },
    {
      "name": "_svg_truck",
      "value": "M18.5 18C18.5 19.1046 17.6046 20 16.5 20C15.3954 20 14.5 19.1046 14.5 18M18.5 18C18.5 16.8954 17.6046 16 16.5 16C15.3954 16 14.5 16.8954 14.5 18M18.5 18H21.5M14.5 18H13.5M8.5 18C8.5 19.1046 7.60457 20 6.5 20C5.39543 20 4.5 19.1046 4.5 18M8.5 18C8.5 16.8954 7.60457 16 6.5 16C5.39543 16 4.5 16.8954 4.5 18M8.5 18H13.5M4.5 18C3.39543 18 2.5 17.1046 2.5 16V7.2C2.5 6.0799 2.5 5.51984 2.71799 5.09202C2.90973 4.71569 3.21569 4.40973 3.59202 4.21799C4.01984 4 4.5799 4 5.7 4H10.3C11.4201 4 11.9802 4 12.408 4.21799C12.7843 4.40973 13.0903 4.71569 13.282 5.09202C13.5 5.51984 13.5 6.0799 13.5 7.2V18M13.5 18V8H17.5L20.5 12M20.5 12V18M20.5 12H13.5"
    }
  ],
  "mark": {
    "type": "point",
    "filled": true,
    "shape": {
      "expr": "if(datum['animal'] == 'cattle', _svg_person, _svg_truck)"
    },
    "color": {
      "expr": "if(datum['animal'] == 'cattle', 'red', 'green')"
    }
  },
  ...
}

If your need is just to use a simple SVG code within the visual, this should suffice. Your “tutorial” code from your Power BI measure looks more complex (it has several “path” sections); not sure of the syntax to add it within the Vega-Lite JSON code, nor if you need to send this from a measure, but in any event, I hope this helps.

Greg
eDNA Forum - Multiple SVG Paths.pbix (1.6 MB)

1 Like
5

Thank you @Greg ! I had not seen the video by Ben Ferry - it is really good with a lot of resources :slight_smile:
Now I have not seen any comments out there about the possibility to use more complex SVGs with several paths… the curiosity still remains but I am pretty sure now I will be able to find a simpler SVG icon to do the job among the over 26,000 from Free Icons | Font Awesome (the SVG resources that Ben Ferry suggested) or from what you are also using SVG Repo - Free SVG Vectors and Icons! :upside_down_face:

Thanks again!
Kind regards
Valeria