SVG button

26 Jan 2011 Code on Github

Introduction

One of the most basic elements for an interactive image is a button. Arguably any element associated with an onmouseup() event can be considered a button (note that buttons tend to be activate when the mouse button is released, not when it is first pressed down).

Basic button

To make something that looks a bit like a button, we can draw a rectangle (possibly with rounded corners) and write some text on it. We can then group these elements with the <g> tag and add the onmouseup() event to them both.

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <script type="text/javascript"><![CDATA[
        function buttonClick(evt) {
            alert('Click');
        }
    ]]></script> 
 
    <g onmouseup="buttonClick(evt)">
        <rect x="20" y="1" rx="5" ry="5" width="52" height="22"/>
        <text x="25" y="16">Button</text>
    </g>
</svg>

This basic design is far from perfect - for one thing, if it weren't for the label, it might not be obvious that it even is a button.

Styling

The main problem is the way the cursor changes when it moves over the text element. To fix this, we set the cursor attribute of the group to 'pointer'. We can also make it more obviously a button by adding a hover effect.

.button {
    fill: #007bbf;
    pointer: cursor;
}
.button:hover {
    fill: #0069d9;
}

Now we have a slightly more buttony button.

Button shapes

The advantage of SVG is that you can create all sorts of crazy shapes and the mouseover logic is all done for you. So you can have buttons of any shape you can create.

Continuous events on mouse hold

Sometimes you might want to continually call a function when the mouse is held down (as in this example). The solution is to have two additional functions in addition to the function you want to call (here named myFunction):

var myTimeout;

function beginFunction() {
  myFunction();
  myTimeout = setInterval("myFunction()", 50);
}

function endFunction() {
  if (typeof(myTimeout) !== "undefined") {
    clearTimeout(myTimeout);
  }
}

Then to the element you want to animate, add:

<tag onmousedown="beginFunction()" onmouseup="endFunction()" onmouseout="endFunction()" />

Now when the mouse is held down on the element, beginFunction() is called, which is turn calls myFunction(). It then uses setInterval() to repeatedly call myFunction every 50 ms. When the mouse either leaves the element or is released, then endFunction stops the repeating calls.

Comments (3)

Martin on 6 Mar 2013, 11:41 a.m.

Hi, is it possible with the button element to make another path visible or hidden?
Greets
Martin

Peter on 7 Mar 2013, 1:37 p.m.

Hi Martin,

You can do that by changing the click function to something like:

document.getElementById('target_id').setAttributeNS(null, 'visibility', 'hidden');

Bob on 8 Sep 2019, 3:34 a.m.

Thank you for your SVG tutorials. They're very helpful. Better than any others I've come across.

Interactive SVGs