How to Create Custom Shape Button using SVG?
Buttons are an integral part of any user interface, and a well-designed button can
significantly improve the user experience while adding style to your website or
application. If you want to create unique-shaped buttons that stand out from the
typical rectangular ones, SVG is an excellent option.
Scalable Vector Graphics (SVG) is a markup language used to create 2D graphics.
With SVG, you can create intricate shapes and apply various styles to them. Unlike
raster graphics like JPEG or PNG, SVG graphics can be scaled infinitely without
losing resolution or clarity, making it an ideal format for creating custom shapes
and designs, including buttons.
Approach 1 - Using the SVG <path> element
The utilization of the <path> element in the creation of varied shapes is of
paramount significance. To avail oneself of this technique, one must initiate the
generation of an SVG element, whereby an encompassing <path> element is
included.
Notably, the <path> element mandates the usage of the "d" attribute, which serves
to define the desired shape through a sequence of commands, but not limited to,
"M" (move to), "L" (line to), and "Z" (close path).
Algorithm:
Step 1- Define the dimension of the SVG element using attributes ‘width’ and
‘height’.
Step 2 - Use the <path> tag to define the custom shape of the button using the ‘d’
attribute.
Step 3 - Customize the shape by adjusting the values in the ‘d’ attribute, where ‘M’
and ‘L’ are the starting and ending point of the line segment, while ‘Z’ denotes the
shape.
Code -
<!DOCTYPE html>
<html>
<head>
<title>Custom Shape Button using SVG - Approach 1</title>
</head>
<body>
<a href="[Link]
<svg width="100" height="50">
<path d="M10 10 L90 10 L70 40 L30 40 Z" />
</svg>
</a>
</body>
</html>
Output -
Approach 2 - Using the SVG <polygon> element
<polygon> element enables the construction of a closed figure with rectilinear
segments. To implement this feature, the user must first instantiate an SVG
element and then embed an <polygon> element within it.
It is to be noted that <polygon> element mandates the presence of "points"
attribute, which serves to specify the polygon's vertex coordinates.
Algorithm -
Step 1 - Define svg element using <svg> tag with specified width and height.
Step 2 - Define the shape of the button using <polygon> tag with a list of points.
Step 3 - Print the custom shape button.
Code -
<!DOCTYPE html>
<html>
<head>
<title>Custom Shape Button using SVG - Approach 2</title>
</head>
<body>
<a href="[Link]
<svg width="100" height="50">
<polygon points="10,10 90,10 70,40 30,40" />
</svg>
</a>
</body>
</html>
Output -
Approach 3 - Using the SVG <rect> element
<rect> is a tool that can be utilized to manifest a rectangular shape. For the purpose
of generating a bespoke shape, the attributes "rx" and "ry" can be implemented to
produce rounded corners. To effectively utilize this instrument, one must initiate an
SVG element, and subsequently insert the "<rect>" element into it.
It is to be noted that the "<rect>" element demands the presence of attributes such
as "x", "y", "width", and "height", all of which dictate the location and magnitude of
the rectangle.
Algorithm -
Step 1 - Create <svg> tag with specific width and height in <body> tag.
Step 2 - Use the <rect> tag within <svg> to create a rectangular shape.
Step 3 - Print the rectangle shape button.
Code -
<!DOCTYPE html>
<html>
<head>
<title>Custom Shape Button using SVG - Approach 3</title>
</head>
<body>
<a href="[Link]
<svg width="100" height="50">
<rect x="10" y="10" width="80" height="30" rx="10"
ry="10" />
</svg>
</a>
</body>
</html>
Output -
Conclusion
Generating custom shape buttons using SVG is an uncomplicated task
comparatively. By utilizing the flexibility and versatility of SVG, creators possess the
ability to fabricate unconventional shapes and styles that are unachievable with
established CSS stylization.
Remember to optimize the SVG code to guarantee optimal performance and
accessibility to secure a seamless user experience.
