# Svg Icon increase click area

**URL:** <https://discourse.nodered.org/t/svg-icon-increase-click-area/54062>\
**Category:** General\
**Created:** [21 November 2021 12:22 UTC](https://discourse.nodered.org/t/svg-icon-increase-click-area/54062 "2021-11-21T12:22:36Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [21 November 2021 12:22 UTC](https://discourse.nodered.org/t/svg-icon-increase-click-area/54062/1 "2021-11-21T12:22:36Z")

</div>

Is it possible to increase the click area of an icon in the svg node?

The problem now is that for example in the film icon the click event only occurs when clicking on the black lines of the icon, clicking on the grey parts (inside) of the film icon will not trigger a click event.  
This not not handy on a touch screen , you miss always the right spot to click.  
Tried it by overlaying an transparent square, but the square will only generate a click event when it's not transparent and a not transparent square will mess up my design.

node-red-contrib-ui-svg 2.2.4, NR 2.1.1

![Capture.PNG](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/4568a4b359cd34fab6a555f8f8bd724653a80856.jpeg)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 November 2021 13:01 UTC](https://discourse.nodered.org/t/svg-icon-increase-click-area/54062/2 "2021-11-21T13:01:38Z")

</div>

Hi @edje11,

Since this might be useful for other users also, I have quickly written a tutorial in this [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Enlarge-the-clickable-area-of-a-shape) page.

Bart

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 November 2021 15:16 UTC](https://discourse.nodered.org/t/svg-icon-increase-click-area/54062/3 "2021-11-21T15:16:39Z")

</div>

BTW other mechanism are based on increasing the _ **padding** _ of the element (see e.g. [here](https://ishadeed.com/article/clickable-area/), or by appling a thick transparent _ **border** _. I have tried that but it didn't work in my test. Would have been nice, because then you would only have to apply a simple CSS style to your clickable shapes, instead of having to add invisible circles all over the place...

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [21 November 2021 15:27 UTC](https://discourse.nodered.org/t/svg-icon-increase-click-area/54062/4 "2021-11-21T15:27:47Z")

</div>

Hi Bart,  
The tutorial as described on your wiki works great.  
Thanks for the explanation.

---

<div class="post-metadata">

**Author:** ![vikingsraven](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/vikingsraven/32/49243_2.png) [@vikingsraven](https://discourse.nodered.org/u/vikingsraven)\
**Post date:** [21 November 2021 16:36 UTC](https://discourse.nodered.org/t/svg-icon-increase-click-area/54062/5 "2021-11-21T16:36:52Z")

</div>

@BartButenaers , just tried looking at the tutorial and it doesn't let me view it, it just goes back to the same page as per your link!

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 November 2021 16:42 UTC](https://discourse.nodered.org/t/svg-icon-increase-click-area/54062/6 "2021-11-21T16:42:26Z")

</div>

I have fixed the link above. Had renamed the title of the wiki page ...

> [@BartButenaers](#):
>
> BTW other mechanism are based on increasing the _ **padding** _

It seems that padding of SVG elements is not supported. So the invisible circle will be the way to go, if I am not mistaken ...

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 December 2021 16:43 UTC](https://discourse.nodered.org/t/svg-icon-increase-click-area/54062/7 "2021-12-05T16:43:09Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.