CSS list-style-image size

Question

I'm trying to set custom SVG icons with CSS on a <ul>'s list items. Example:

<ul>     <li style="list-style-image: url('first.svg')">This is my first item</li>     <li style="list-style-image: url('second.svg')">And here's my second</li> </ul> 

The problem is that the the images are too large, and stretch the height of the lines. I don't want to change the image size, because the point of using SVG is to scale with the resolution. Is there a way to set the size of the image using CSS without some sort of background-image hack?

EDIT: Here's a preview (large image deliberately chosen for illustration and drama): http://jsfiddle.net/tWQ65/4/
And my current background-image workaround, using CSS3's background-size: http://jsfiddle.net/kP375/1/

Answer 1

I'd use:

li {   list-style: none; } li::before {   content: '';   display: inline-block;   height: y;   width: x;   background-image: url(); } 

Answer 2

I'm using:

li {  	margin: 0;  	padding: 36px 0 36px 84px;  	list-style: none;  	background-image: url("../../images/checked_red.svg");  	background-repeat: no-repeat;  	background-position: left center;  	background-size: 40px;  }

where background-size set the background image size.