How to programmatically access SVG inline styles?

[tehnrd]

I'm curious if there is a reliable way to systematically access/modify the inline styles for the SVG icons. Specifically the color and the single pixel border around the icon.

For example, you'll notice on this Mapbox marker they have modified the outside border to contrast with the pin color, http://api.tiles.mapbox.com/v3/marker/pin-l-car+f44@2x.png . I am trying to do something similar but I don't see away to explicitly locate the correct SVG elements with consistent parameters. Something like id="border" id="icon".

Maybe someone from Mapbox could shed some light on how they accomplished this with their markers API?

Apologies if this is not the correct place for this type of question.

[tmcw]

The markers API operates entirely on raster images, and takes advantage of the small translucent halo around Maki markers. The code for this is all in makizushi: it just uses node-blend to composite a Maki icon with a preset pin icon, and then tint the whole thing to a different color.

[tehnrd]

Fantastic! Looks like makizushi was just open sourced about a month ago. I've been working on this project for a while and last time I looked couldn't find anything on the markers API.

With that said do you see value if making programatic access to the different SVG elements that comprise the icon easier. I could foresee an app that let's users customize the icons by defining different colors for the parts of the icon but today this would be difficult, if not impossible.

[tmcw]

Sure - that would be useful. For our use cases, it isn't something that we'd use - SVGs never actually hit your browser in any case with any of Mapbox's clients, and even when we switch markers to vector, it'll likely be as pbf files rather than SVG.

[tehnrd]

Ya, I don't see it being particularly useful to Mapbox's usage but for others that use this library of icons for custom projects it could be quite useful. The use case I was thinking of is providing a UI to customize the icons color/border. This would load up the SVG in the browser and JavaScript would manipulate the styles based on user input. Then if you ever needed to apply these styles server side you'd also have a way to access the correct portions of the SVG and modify them before converting to png.

I don't want to clutter this project with unnecessary features but could you foresee this being a useful pull requests or a separate fork entirely.

[tmcw]

Sure, yep - this sounds like a good idea for an external tool that sources Maki from this repository.

[samanpwbb]

See https://github.com/mapbox/maki-chef/