Return to Revisions

I was unaware that support for SVG fragment identifiers is not so hot, so I found somewhat of a workaround in the form of Base64 encoding (thanks to these doppnet and CSS Tricks posts).

So, after optimizing my SVG in Inkscape I converted it to base64 using Mobilefish's converter (if you use this, make sure to set max characters per line to 0 so you don't have line breaks), and then added them as strings in a JSON array:

var activityURI = [
    {"activity":"All","uri":"oZWlnaH..."},
    {"activity":"Hiking","uri":"4bWxucz..."},
    ...
];

And then accessed them like this:

//for minor extra efficiency, set prefix of URI common to every item in array:
    var uriRoot = "data:image/svg+xml;base64,PD94bWwgdmVy...";

//set full URI using desired index:
    var uriPath = uriRoot + activityURI[//desired index# goes here\\].uri;
    var defPoiStyle = {
        externalGraphic: uriPath
    }

Drawbacks

1. Long, ugly strings in my code (thank goodness for word wrap).
2. Bigger JS file.
3. Tedious to maintain SVG since Base64 converter must be used every time.

Benefits:

1. It works in Chrome.
2. No more individual HTTP requests for individual SVG files.
3. Base64 may be comparable in performance to unencoded SVG.

Here is a working result. Any thoughts on how to do this better? All ears.