How to use SVG image as link or button to submit HTML form ?

Is it possible to use SVG image as a clickable link or button to submit HTML form ?

Hi,

It is possible to use SVG image as link or submit button. There are mutliple ways how to do it. You can place SVG image path into your code, between the link or button tags.

But you can also keep SVG path in a separate file (SVG image format). This makes it easier to use, because it can be used in your code in the same way as other image format. If you use SVG together with button tag, you may need to do some additional changes in CSS to make it look as expected.

Button that can be used to submit the form:

<button style="width: 100px; border: 0px; background-color: #FFFFFF;">
<svg viewBox="0 0 100 100" fill="coral" xmlns="http://www.w3.org/2000/svg">
<path d="M20 50a30 30 0 1 0 60 0a30 30 0 1 0 -60 0"></path>
</svg>
</button>
Input with image type that can be used to submit the form (external image):

<input type="image" src="button.svg" alt="submit" />
Button.svg should contain the SVG path code:

<svg viewBox="0 0 100 100" fill="coral" xmlns="http://www.w3.org/2000/svg">
<path d="M20 50a30 30 0 1 0 60 0a30 30 0 1 0 -60 0"></path>
</svg>