使用SVG作为背景图片<li>

Question

I'm trying to use an SVG as a background image for the elements in a list but it is not working. I'm not sure if it's me or if it is the SVG itself.

Here is the code for my nav

     <nav>
        <ul>
         <li class="completed"><a href="#">Exam</a> <i class="fa fa-check-circle"></i></li>
         <li><a href="#">Personal <i class="fa fa-times-circle"></i></a></li>
         <li><a href="#">Employment</a></li>
         <li><a href="#">Appointment</a></li>
         <li><a href="#">Record Check</a></li>
         <li><a href="#">Submit</a></li>
        </ul>
     </nav> 

Here is the code where I try to apply the SVG

nav > ul > li > a {
    display: inline;
    /*background-color: white;*/
    color: rgba(119, 119, 119, 0.59);
    background: url(../images/navPill.svg);
    background-size: cover;
}

And here is a link to the SVG

http://expirebox.com/download/13169ec086d8af7dd7ad4e5fe3f2d1ad.html [broken now]

Answer 1

You probably want to use background-size: contain instead of cover to make the arrow fit inside each of the links. However, when you use contain and the svg is shrunk, the thin arrow line is too faint to see.

Here is a working example. I have only changed cover to contain and added a black fill to the arrow so you can see it:

http://jsfiddle.net/68j04n3j/

Answer 2

Here's a better version of the SVG for this situation:

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xl="http://www.w3.org/1999/xlink" version="1.1"
    width="576" height="152" viewbox="0 0 576 152">
  <path transform="translate(10,-185)" d="M 0 189.5 L 39.741071 261.25 L 0 333.125 L 516.63393 332 L 556.375 260 L 516.63393 188 L 0 189.5 Z" stroke="black" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="10" fill="transparent" />
</svg>