Issues and Answers (I&A)

Custom SVG1.1 Bullets for <ul> <li> Tags Using CSS2.1 in HTML5 on Standards Compliant Browsers

One of the basic "theoretical" advantages of SVG graphics on the web is being able to use one graphics file in multiple locations and multiple sizes on a web page as well as site wide with little or no loss of detail or image quality. Ideally, SVG files should code in HTML exactly the same as jpeg, png, or gif files. In reality this is not yet the case but browsers are making remarkable (sometimes rapid) progress on this front. If you are experienced with web design and have been working on this issue as long as I have you may simply want to view my current solution to see if it meets your needs. If you are a novice to SVG, CSS, and/or HTML then you may find the following detailed description & "history" of this issue useful.

Issue Description

If and when universal browser support of svg is implemented, it can be expected that the following method would work when trying to use an existing svg image as a bullet for the li elements of an ul element:

Create a small svg file whose height and width attributes represent the desired size of the bullet. In the example below, I created a svg file named "BULLET.svg" whose desired height and width will be 16 ×16 pixels. Then to this same file add an external reference to the svg file which contains the desired bullet image. In the example below, my source will be a svg file named "IMAGE.svg" which has a named container element whose id property has the value of "USN_Seal" which is the portion of the image I want to use as a bullet. Finally, add a scale transform to fit the image into the specified height and width. 

<?xml version="1.0" encoding="UTF-8"
standalone="no"?> <svg
    version="1.1" baseProfile="full"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px"
    viewBox="0 0 16 16"
> <use xlink:href="images/IMAGE.svg#USN_Seal" transform="scale(0.02805)" /> </svg>

Use this newly created svg file in the uri of the list-style-image property for either the <li> child element (if you want the bullet to be unique to that list item only for some reason) or to the parent <ul> element to use the same bullet for each <li> child element 

<object type="image/svg+xml" data="images/IMAGE.svg" height="150"
width="150" style="float: left;">
    <img alt="NAVY Seal in black and white"
    src="images/IMAGE.png" />
</object>

<ul style="list-style-image: url( 'images/BULLET.svg' ); text-align: left; ">
    <li>Module 1</li> <li>Module 2</li> <li>Module
    3</li> <li>Module 4</li>
</ul>

Unfortunately, as the example below demonstrates, this does not yet work in any browser as of 11APR2014. If you do happen to see the image displayed as bullets in the list to the right of the larger version of the image then your brower is newer and more compliant in which case this particular issue is no longer relevant (Yay!!! - at least for your browser)

NAVY Seal in black and white
  • Module 1
  • Module 2
  • Module 3
  • Module 4
Pros:
Codes the same way as other image file types (jpeg, png, giff) in both HTML and CSS.
The external reference capability of SVG allows us to reuse a an existing svg file for bullets without adding extra clutter to our HTML and CSS code.
The required "extra" svg file to make this work is generally going to be much smaller than any corresponding jpeg, giff, or png image file normally used for this purpose.
Cons:
Works on no recent versions of standards compliant browsers:
Opera Logo 20.0                   Does not display the bullet image but does create the space for it next to each li element
FireFox Logo 28.0                   Does not display the bullet image but does create the space for it next to each li element
Internet Explorer Logo 9.0                     Does not display the bullet image but does create the space for it next to each li element
Google Chrome Logo 34.0                   Does not display the bullet image but does create the space for it next to each li element
Apple Safari Logo 5.1.7 (WIN)       Total failure! Ignores the height and width specifications for the object element. Does not display the bullet image but does create the space for it next to each li element

Current Solution as of 23NOV2012

The first step is to decide the exact pixel height you want your bullet to be. For this example I have chosen 16px. Then modify your source svg image file as follows after giving it a new name (I named mine "BULLET2.svg"):

In the top level <svg> tag for the document change the height and width attribute values to your desired pixel values when the image is to be used as a bullet. ( I recommend including a commented out  copy of the original values for future reference) It is also important to change the corresponding height and width values in the viewBox attribute to these same values. (recommend a commented out copy of the original viewBox settings as well) Because of the previous modifications to the svg file, the last step is to modify the outermost "grouping" element of the svg image so that it is scaled to fit into the size of the new viewBox specification. Below is an example of the changes in the code compared to the "original" file and highlighted in yellow: 

<?xml version="1.0" encoding="UTF-8"
standalone="no"?> <svg
    version="1.1" baseProfile="full"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg" width="570px"
    height="570px" viewBox="0 0 570 570"
>
    <g id="USN_Seal" ">
        <title>United States Navy Seal</title> <desc>This is
        an SVG version of the United States Na… </desc>
    
        …The rest of the svg image code goes here…
    
    </g>
</svg>





            
<?xml version="1.0" encoding="UTF-8"
standalone="no"?> <svg
    version="1.1" baseProfile="full"
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"
    viewBox="0 0 16 16"
> <!-- 
width="570px"  height="570px"
 viewBox="0 0 570 570" -->
    <g id="USN_Seal" transform="scale(0.02805)" >
        <title>United States Navy Seal</title> <desc>This is
        an SVG version of the United States Na… </desc>
    
        …The rest of the svg image code goes here…
    
    </g>
</svg>

Now the changes we have made to the svg file are not without consequences some of which may create new issues in other contexts At this point however, all you need to do is place the url for the image into the list-style-image property as highlighted below. This same image file can still be used elsewhere in the document and site-wide as long as it is specified in an <image />, <object>, or <embed> tag which specifies the desired height and width 

<object type="image/svg+xml" data="images/BULLET2.svg" height="150"
width="150" style="float: left;">
    <img alt="NAVY Seal in black and white"
    src="images/BULLET.png" />
</object>

<ul style="list-style-image: url( 'images/BULLET2.svg' ); text-align: left; ">
    <li>Module 1</li> <li>Module 2</li> <li>Module
    3</li> <li>Module 4</li>
</ul>
NAVY Seal in black and white
  • Module 1
  • Module 2
  • Module 3
  • Module 4
Pros:
Allows us to use a single svg file for bullets and elsewhere sitewide
Codes the same way as other image file types (jpeg, png, giff) in both HTML and CSS
Cons:
Only known to work in recent versions of standards compliant browsers as of 11APR2014:
FireFox Logo 28.0
Internet Explorer Logo 9.0.11
Opera Logo 20.0                   Shows bullets, but size of bullet not controlled by svg source file
Chrome Logo 34.0                   Shows bullets, but size of bullet not controlled by svg source file
Safari Logo 5.1.7 (WIN)       Displays the bullets properly, but image not resized properly in object elements