SVG as a submit button May 12, 2015 posted in html, svg.

SVG is a great format for your web graphics and icons especially. There is a small trick how to use an inline svg image as a submit button inside your form.

First thing to do is to wrap your image inside a label tag together with the submit button.

<form action="/search/" class="hide-submit" method="GET" > <input name="q" type="text" /> <label> <input type="submit" /> <svg xmlns="http://www.w3.org/2000/svg" ...> <path d=" ..." /> </svg> </label> </form>

The label associates these two elements together, so if you click one of them it acts like you clicked on the another as well.

Lastly we need to hide the actual submit button with a simple CSS.

form.hide-submit input[type="submit"] { display: none;}

And we have an inline svg image that behaves like a submit button without any use of javascript.

Resources

Would you like to get top 5 links on Programming every Monday?

Sign up to Programming Digest and stay up to date!