Svg files can be added as a custom markers in the same way as any other images. But sometimes you may notice that your marker doesn’t correctly work on Firefox and IE

Firefox – no marker displayed

svg_resp_ffx

IE – crazy scaling

svg_resp_ie

If you observe above behavior, than most likely your svg file was saved as responsive (ie doesn’t have width & height defined).

A bit of background:

When using images on the web in responsive designs there are two options you can use to style them, you can keep them at a fixed-size and adjust at breakpoints if needed, or allow them to resize with the page depending on their parent container. 

For Storemapper, to make it work you should ensure your svgs are fixed-sized.

When you export svg file from Adobe Illustrator there is a choice to make, whether it will be a responsive or not responsive using ‘Responsive’ checkbox.  When you’re exporting a file for Storemapper ensure this checkbox is unchecked.

svg_export_illustrator

As a result you should have nice looking icons on all browsers.

In case you’re still experiencing any issue just drop us a note using help@storemapper.co