Skip to main content

SVG markers

iconSvg and infoWindowIconSvg are rendered by lunasvg on iOS and Android, with text shaped by HarfBuzz and SheenBidi.

  • Size: the SVG is fitted into width x height and centered. It keeps its aspect ratio.
  • Images: <image> may reference PNG, JPEG, GIF, BMP and SVG data URIs and http(s) URLs. Remote images are limited to 8 MB each and cached in memory. Provide raster images in device resolution, e.g. 192 px wide for a 64 pt marker on a 3x screen. Large photos cost a lot of memory, because every <image> keeps its decoded bitmap.
  • Info windows: remote images are loaded when the marker is added. Until an image is there, its <image> draws nothing, so a shape placed underneath works as a placeholder.
  • Fonts: the system fonts and the fonts bundled with the app (Android: assets/fonts, iOS: UIAppFonts). A bundled font is found by its file name without extension, e.g. font-family="Roboto-Bold", and by the family it declares, e.g. font-family="Roboto" font-weight="bold". Fonts registered at runtime, e.g. with expo-font, are not found. Text without a known font-family is drawn with the system font (iOS: SF, Android: Roboto).
  • Text: text is shaped and ordered like native text, so Arabic, Hebrew, Indic, Thai, CJK and emoji are drawn correctly. Characters that no font of the font-family list covers are drawn with the fallback fonts of the platform, which differ between iOS and Android. For the same look on both, bundle a font that covers them and name it in font-family, e.g. font-family="Roboto, Noto Sans Arabic". xml:lang and lang select language specific forms and fonts. font-weight 1 to 1000 selects the closest face or the instance of a variable font, missing bold and italic are synthesized.

Text shaping​

Text shaping with HarfBuzz and SheenBidi makes an app about 0.7 MB larger per ABI on Android and about 0.9 MB larger on iOS. Apps that only draw Latin text in bundled fonts can turn it off. Without text shaping:

  • characters that the fonts of the font-family list do not cover are drawn as boxes on Android and as bars on iOS, there are no fallback fonts,
  • Arabic is not joined and right-to-left text is not reordered,
  • font-weight does not change the system fonts, bold text needs a bundled bold font.

Android, in android/gradle.properties:

RNGoogleMapsPlus_svgTextShaping=false

iOS, at the top of the Podfile, then run pod install:

ENV['RNGOOGLEMAPSPLUS_SVG_TEXT_SHAPING'] = '0'

Expo, in the plugin options:

["react-native-google-maps-plus", { "svgTextShaping": false }]

For the known limitations see Limitations.