Wrap WordPress Previous and Next Links around SVG

Question

I am looking to use .svg arrows as previous and next links in WordPress for a custom post type I have set up, but I can't seem to find out how to wrap the <?php previous_post_link(); ?> <?php previous_post_link(); ?> and <?php next_post_link(); ?> <?php next_post_link(); ?> functions around my .svg code.

The code I am using to output my .svg arrows can be found below. I am using this method so the complete code for my .svg file is displayed in the source so I can target it in my css.

<?php
   $stylesheet_path = get_bloginfo('stylesheet_directory');
   $image_path = '/images/arrow-left.svg';
   $full_path = $stylesheet_path . $image_path;
?>
<?php echo file_get_contents("$full_path"); ?>

Can anyone point me in the right direction?

Thanks.

EDIT

Code on the WordPress Codex is:

<?php previous_post_link( $format, $link, $in_same_term = false, $excluded_terms = '', $taxonomy = 'category' ); ?>

Code for the previous/next links I am using at the moment is:

<?php previous_post_link( '%link', '<img src="' . get_template_directory_uri() . '/images/arrow-right.svg">'); ?>

But this only adds the .svg file in the img tag, it doesn't add the full .svg code.

Answer 1

I have just added the svg code into the second parameter, please see below:

<?php previous_post_link( '%link', '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="30.465px" height="26.219px" viewBox="0 0 30.465 26.219" enable-background="new 0 0 30.465 26.219" xml:space="preserve" aria-labelledby="title" role="img"><title>Arrow Left</title><g><path d="M14.373 25.7c0.691-0.69 0.691-1.8 0-2.505l-8.312-8.313h22.646c0.978 0 1.771-0.793 1.771-1.8c0-1-0.8-1.8-1.8-1.771 H6.031l8.313-8.312c0.691-0.689 0.691-1.8 0-2.505c-0.692-0.7-1.8-0.7-2.5 0L0.508 11.831c-0.346 0.347-0.52 0.8-0.52 1.3 c0 0.5 0.2 0.9 0.5 1.253L11.867 25.73c0.693 0.7 1.8 0.7 2.486-0.03H14.373z"/></g></svg>'); ?>

Thanks.