How to use vector SVG markers

Overview

Usually you set markers as transparent PNG images. Besides, you can use vector images in SVG format. Vector images have higher quality and can be used to achieve a high resolution output on modern smartphones with high resolution screens (e.g. Retina display on iPhone).

What you should know when using SVG

The MapEx widget supports map markers in SVG format. And usually it will display fine in Google Chrome. However, some browsers (e.g. Firefox) will not display markers in SVG (you will see empty map without markers). To fix there is a solution to modify your SVG file by setting x, y, width and height parameters to desired (non-zero) dimensions. Example:

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"     "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink" x="20px" y="20px" height="20px" width="20px"
	 viewBox="0 0 15 15" enable-background="new 0 0 15 15" xml:space="preserve">
     <circle fill="#45A6DD" cx="7.5" cy="7.5" r="5.6"/>
</svg>

You can modify the file using your graphics editor or alternatively edit it manually using some text editor (e.g. Notepad, Notepad++ or Sublime).

Extra info for developers

This paragraph was added for curious people that prefer to know an all around analysis of this problem. There is undocumented parameter scale that can be used to "retinify" the marker. In this case 2 markers should be specified: a standard, and for Retina display. However, undocumented features may work today and can stop working tomorrow.