navigation arrows using svg

creating navigation button using SVG will help to optimize your buttons to any sizes retaining the actual quality of the buttons

Before we get started, lets discuss a little about svg paths which we will be using in this tutorial.

look at the below svg path to create a triangle


<path d="M0 0 L10 0 L0 10 Z"></path>

M denotes the starting point, L means to draw a line to and Z to close the path.
Therefore the above path draws a line from co ordinates (0,0) to (10,0), then from (10,0) to (0,10) and then closes the path [ line from (0,10) to (0,0) ].

So now lets get to drawing the svg arrows

to create a simple arrow pointing to the right


<svg>
    <path d="M0 0 L10 0 L25 20 L10 40 L0 40 L15 20 Z"></path>
</svg>

for an arrow pointing to the left


<svg>
    <path d="M25 0 L15 0 L0 20 L15 40 L25 40 L10 20 Z"></path>
</svg>

And now for a different arrow which involves two paths, for the one pointing to the right


<svg>
    <path d="M5 0 L15 0 L30 20 L15 40 L5 40 L20 20 Z"></path>
    <path d="M0 15 L22 15 L22 25 L0 25 Z"></path>
</svg>

and for the one to the left


<svg>
    <path d="M25 0 L15 0 L0 20 L15 40 L25 40 L10 20 Z"></path>
    <path d="M8 15 L30 15 L30 25 L8 25 Z"></path>
</svg>

Now if you want to include a circle around the arrow then you need to include a circle svg. For example, for the first arrow,


<svg>
    <path transform="translate(25 15)" d="M0 0 L10 0 L25 20 L10 40 L0 40 L15 20 Z"></path>
    <circle cx="35" cy="35" r="30" fill-opacity="0" stroke-width="3" />
</svg>

where cx and cy are the center point co ordinates of the circle and r is the radius.

For the second arrow


<svg>
    <path transform="translate(20 15)" d="M25 0 L15 0 L0 20 L15 40 L25 40 L10 20 Z"></path>
    <circle cx="35" cy="35" r="30" fill-opacity="0" stroke-width="3" />
</svg>

For the third arrow


<svg>
    <path transform="translate(22 15)" d="M5 0 L15 0 L30 20 L15 40 L5 40 L20 20 Z"></path>
    <path transform="translate(22 15)" d="M0 15 L22 15 L22 25 L0 25 Z"></path>
    <circle cx="35" cy="35" r="30" fill-opacity="0" stroke-width="3" />
</svg>

And finally for the fourth arrow


<svg>
    <path transform="translate(18 15)" d="M25 0 L15 0 L0 20 L15 40 L25 40 L10 20 Z"></path>
    <path transform="translate(18 15)" d="M8 15 L30 15 L30 25 L8 25 Z"></path>
    <circle cx="35" cy="35" r="30" fill-opacity="0" stroke-width="3" />
</svg>

Leave a Reply Cancel reply