0

I have created a very simple SVG that is just a red circle to use as the list-style-image for my website. I got the idea for this from this SO answer: https://stackoverflow.com/a/19528768/201021

This solution works great except in Internet Explorer. In fact every other browser except IE renders the lists the same way. In IE the SVG image renders a bit larger and sometimes the edges are slightly cut off. See the examples below:

Internet Explorer:

svg bullets in internet explorer

Chrome:

svg bullets in chrome

Even with a fixed height & width set in the SVG file it does not render correctly in IE:

enter image description here

The edges are still sometimes cut-off and the markers don't appear to be vertically centered like they should be.

Even when the markers are very small it does not render correctly:

enter image description here

You can see the marker for the third level has edges cut-off.

Also, explicitly setting the height and width instead of using a viewbox means that the markers no longer auto-scale when the font-size is increased which is one reason I chose to go this route.

SVG code for redcircle.svg:

<?xml version="1.0"?>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50%" cy="50%" r="50%" fill="red" />
</svg>

HTML:

<p>
    <ul>
        <li>
            <span style="line-height: 1.5rem;">Bullet one</span><br>
        </li>
        <ul>
            <li>
                <span style="line-height: 1.5rem;">Bullet level two</span>
            </li>
            <ul>
                <li>Bullet level three</li>
            </ul>
        </ul>
    </ul>
</p>

CSS:

ul li {
  list-style-image: url("Images/redcircle.svg");
}

I can't really figure out why this is happening except that IE must be doing something different from the other browsers during the rendering of the SVG. Maybe the default size for a list marker in IE is larger or expandable?

I'm a bit at a loss at what to test as well. I've tried changing the viewBox values in the SVG but I've never written an SVG before so I'm not really sure what I'm doing.

Does anyone know why this is happening? Even better does anyone know a workaround to get the SVG to render the same in Internet Explorer?

Community
  • 1
  • 1
Mike D.
  • 4,034
  • 2
  • 26
  • 41
  • Can you share your code that renders the images above? Your current code sample just creates one disk filling a window. – Rich Turner Jan 28 '15 at 01:10
  • I've added the relevant HTML and CSS. Do note that the HTML is created from a jQuery rich text editor control (jquery-te), but that shouldn't matter. – Mike D. Jan 28 '15 at 01:36
  • Have you tried setting the `height` and `width` for the svg instead of using `viewbox`? – imtheman Jan 28 '15 at 01:56
  • @imtheman By setting the height and width in the SVG it does make sure that the image doesn't render larger than the other browsers but it still doesn't work quite right in IE. It also loses the ability to have the markers auto-scale when the font size increases. (I've updated the question with examples.) – Mike D. Jan 28 '15 at 04:46
  • 1
    See https://stackoverflow.com/questions/29932657/how-can-i-make-a-list-style-image-scale-with-the-lists-font-size-when-we-cant for similar issue. Solved by using :before pseudo element. For the clipping, simply make the circle a bit smaller inside the viewbox and try to make it a non-whole pixel radius at 1em to avoid some browser rendering issues. – Ruskin May 11 '18 at 03:02
  • Possible duplicate of [How can I make a list-style-image scale with the list's font size, when we can't use glyph fonts?](https://stackoverflow.com/questions/29932657/how-can-i-make-a-list-style-image-scale-with-the-lists-font-size-when-we-cant) – Mike D. Jun 28 '18 at 13:12
  • 1
    @Ruskin that does indeed look like it will work. Unfortunately I'm no longer working on this project so it's a moot point now but the info is much appreciated. =) – Mike D. Jun 28 '18 at 13:12

1 Answers1

0

try declaration of svg code like so:

<svg version="1.1" id="yourID" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="8px" height="8px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">

Set desired width and height instead of 8px, that should do, though i have no time to test it now, it should work)

thematrixhasyou
  • 45
  • 1
  • 10