topic Re: Modify SVG into Panel in Dashboards & Visualizations

Modify SVG into Panel

jcolin101102 — Fri, 26 Apr 2019 23:14:30 GMT

Hi, I wonder if anyone could help me to improve my visualization into Splunk panel, because I'd like to resize my svg Image that resides inside a panel. I'm using an SVG app to draw my icons, but when I want to resize the image container, the app do not let me. Also I've an scrollbar that help me to view all icons inside the panel, but the app only let me specific height and width.

I've figure it out that the customizations about resize panels resides here :

But I only can view a proportion size of my icons.

It could be possible to make svg bigger for using scroll bar?

Regards.

Re: Modify SVG into Panel

niketn — Sat, 27 Apr 2019 09:03:41 GMT

@jcolin101102 if you are using Scalable Vector Graphic custom visualization, you will have option to provide the height and width settings for svg_viz field. Following is an example from the app itself where where width and height is set to 100%. On similar lines you can adjust your svg height/width.

| eval svg_viz = "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%' height='100%' viewBox='0 0 100 100'> ..........................................
 .......................................................
 .......................................................
 .......................................................

Please try out and confirm!

Re: Modify SVG into Panel

msivill_splunk — Thu, 16 May 2019 13:37:06 GMT

Could you share a cut down stand-alone example using SPL with | makeresults so people can try things remotely? Look at the SPL example in the accepted answer on https://answers.splunk.com/answers/741353/dynamic-svg-rendering.html to see how to do this with makeresults.

I would remove the width and height sizing setting in the SVG text as it is effectively hard coding the size SVG so it might not resize the way you expect.

Could you tag the question (if possible) with "Scalable Vector Graphics - Custom Visualization" so it's tied to the app that way as well. I originally missed this question

Re: Modify SVG into Panel

jcolin101102 — Fri, 17 May 2019 16:14:14 GMT

Hi, I'll try out.

Thanks for the idea!.

Regards.

Re: Modify SVG into Panel

jcolin101102 — Wed, 30 Sep 2020 00:35:48 GMT

Hi @niketn I could not change the height and width because it's being inside of the splunk panel. The panel updates itselft and the changes inmediatly

| eval svg_viz = svg_viz." "."".groupBy.""

Re: Modify SVG into Panel

niketn — Sun, 19 May 2019 15:11:06 GMT

@jcolin101102 you have accepted the answer. Is your issue resolved? You can always set panel height using Simple XML configuration height. For example following sets the height to 400px (default I think is 220px).

<option name="height">400</option>