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 ?
0
give a positive ratinggive a negative rating
29 Oct 2022 at 03:27 PM
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>

1
give a positive ratinggive a negative rating
02 Nov 2022 at 08:26 AM
Tim
Share on FacebookShare on TwitterShare on LinkedInSend email
x
x
Follow us on Facebook
2022 AnswerTabsTermsContact us