list-style-image svg smaller in webkit

Question

I've got a bit of an odd problem with my svg list-style-image in google chrome.

.services ul {
list-style-image: url('images/check.svg');
list-style-position: inside;
padding: 0;
margin: 0;
}

The image size is supposed to be 16px x 16px. But it appears way smaller, about half of the size. If I switch to png, the size is correct. In other browsers it seems allright.

Any ideas?

Answer 1

since you are calling the SVG image; you have to define SVG on your page as well. It is also mandatory to define the height and width as well in your SVG otherwise by default its take 1em width and height if not mentioned.

<svg height="16px" width="16px" viewBox="0 0 16 16"  version='1.1' xmlns='http://www.w3.org/2000/svg'>
</svg>

It would be better way to call the image by using background:url this way a height and width can given to image, so the SVG image could rendered properly.

.services li:before { 
content:''; 
display:inline-block; 
height:1em; 
width:1em; 
background-image:url('images/check.svg'); 
background-size:contain; 
background-repeat:no-repeat; 
padding-left: 2em; 
}

Answer 2

I had the same problem, especially with the size on iOs devices. I solved it by using a :before attribute

.services ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.usp ul li:before {
    content: url('images/check.svg');
    width: 16px;
    height: 16px;
    margin-right: 10px;
}