Modify SVG into Panel

[jcolin101102]

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.

[msivill_splunk]

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

[jcolin101102]

Hi, I'll try out.

Thanks for the idea!.

Regards.

[niketn · Accepted solution]

@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!

[jcolin101102]

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.""

[niketn]

@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>