Best practices for SVG in Tilemill Legend

[mizmay]

I'm helping a student with a point map symbolized with one SVG file. The color of the SVG changes based on the class of point, this is specified in CartoCSS and successfully rendered by Mapnik.

I'm struggling with what to tell her about the best practice for making a legend. Am I wrong? It seems like SVG is not really supported in Tilemill legends, but I have forgotten some of what I once knew about when Tilemill recognizes local files and when it doesn't.

I've tried copy/pasting the SVG directly into the legend editor, then modifying with path { fill: red }, but this is ignored. In past I've 64-bit encoded symbols to include in Tilemill legends, however this seems like a clumsy workflow given the ease/elegance of the SVG support within CartoCSS/Mapnik.

If anyone has attempted to translate CartoCSS styling of SVG over to the CSS/etc. the Tilemill legend can accept I'd be grateful to see it, otherwise we'll just nix the legend, iframe the map, and write our own static bit of html/CSS to explicate her symbology, or 64-bit encode a bunch of colored SVGs ( :/ ).

[springmeyer]

The idea of using SVG inline in the legend is very cool, but yeah I've not tried this or seen it done. I can't imagine that there would be anything specific about TileMill here so a test could be done in pure html/css.

[springmeyer]

//cc @geografa in case he's seen this done

[mizmay]

Thanks for the reply, Dane! I tested it. Didn't work :/...

On Thu, Jun 5, 2014 at 6:39 PM, Dane Springmeyer notifications@github.com wrote:

//cc @geografa https://github.com/geografa in case he's seen this done

— Reply to this email directly or view it on GitHub https://github.com/mapbox/tilemill/issues/2320#issuecomment-45294851.

[geografa]

@mizmay maybe try an iframe in your legend? http://jsbin.com/fupaj/1

[geografa]

But you'll have to sanitize the legendControl:

var map = L.mapbox.map('map', 'grafa.ouoez5mi', {
    // This line redefines part of the underlying code which
    // sanitizes HTML from Mapbox Hosting. The original code is there
    // for the protection of sites, so that malicious map-creators
    // can't add cross-site scripting attacks to sites that use their
    // maps. Turning it off allows any content to be available in tooltips.
    // It's recommended to only implement with trusted maps.
    legendControl: {
        sanitizer: function(x) { return x; }
    }
});