Other Usage

How to insert image on a rectangle inside the svg

verothor
Path Finder

Hello all,

please could you help me with one question - it is possible to add an png image on a rectangle square?

Just as an example the rectangle is set like this - it is possible to include there an image to the corner of the rectangle?

<a href=""> <g>
<rect style=fill:color_grey width="150" height="90" x=1200 y=200/>
</g>
</a>

 

Thank you for any help and answers.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

What has this to do with Splunk?

0 Karma

verothor
Path Finder

The SVG is used on a splunk dashboard and inside this I needed to add a picture on a rectangles, so thought someone maybe have some experience with this.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Alternatively, you could look at using CSS to modify the fill pattern used. There are a number of issues with this. Firstly, the pattern must have been visible on your dashboard. Secondly, for column charts for example, the "bars" are defined as a path for each series; this means that the pattern is applied across the whole series, not each bar separately. Thirdly, the image used must be available.

In this example, I have used the app icon

  <row>
    <panel>
      <html>
        <svg version="1.1" height="100" width="200">
          <defs>
            <pattern id="imagefiller" patternUnits="userSpaceOnUse" width="500" height="500">
              <rect style="fill:blue" width="500" height="500"/>
              <image href="/en-GB/splunkd/__raw/servicesNS/username/application/static/appIcon_2x.png" x="20" y="100" width="30" height="30" />
            </pattern>
          </defs>
          <g>
            <rect style="fill:url(#imagefiller)" width="150" height="90"/>
          </g>
        </svg>
        <style>
          #filler g.highcharts-series path.highcharts-graph {
            fill: url(#imagefiller);
          }
        </style>
      </html>
    </panel>
    <panel>
      <chart id="filler">
        <search>
          <query>| makeresults count=5
| eval value=random()%5
| eval series=mvindex(split("ABC",""),random()%3)
| chart sum(value) by series</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

So, you want to change the svg generated by the viz / chart? You can do this by creating a custom visualisation.

Custom visualizations API | Documentation | Splunk Developer Program

0 Karma
Get Updates on the Splunk Community!

Index This | Why did the turkey cross the road?

November 2025 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

  &#x1f680; Your data just got a serious AI upgrade — are you ready? Say hello to the Agentic Era with the ...

Feel the Splunk Love: Real Stories from Real Customers

Hello Splunk Community,    What’s the best part of hearing how our customers use Splunk? Easy: the positive ...