You can open the SVG in Adobe Illustrator and do Object > Expand Appearance. The SVGs Sketch generates may include some SVG filters that can not be correctly rendered by Mapbox Studio. Sketch icons not rendering correctly in Mapbox Studio
SVG ICON RESIZE FULL
Blank imagesĬustom images imported with Mapbox Studio can appear blank if the original SVG files contain no vector content, or no content in supported attributes.įor example, you can successfully upload an SVG file with Mapbox Studio, but if the file includes raster content in an unsupported attribute such as and does not include vector content in a supported attribute, such as, the image will appear as a blank canvas containing no visible content.įor a full list of which SVG elements and attributes are supported and unsupported, see Unsupported SVG elements and attributes on this page. If you use Adobe Illustrator to create your SVG, choose Export or Save As and follow the instructions in the Create SVG icons in Adobe Illustrator section of this guide to format the SVG file correctly for use in Mapbox Studio.
Mapbox Studio does not support style properties added in the style element. If you are able to add your SVG to Mapbox Studio, but it shows up as black, it may be because you are using the style element to assign style properties rather than using inline style attributes. Here are some common issues and suggestions for troubleshooting them.
Sometimes SVGs fail to upload or upload successfully, but do not appear as expected. If a user views your map on a device with a low resolution screen, they receive a 1x sprite. For example, if a user views your map on a device with a high resolution screen, they will receive a 2x sprite. Behind the scenes, the Mapbox Styles API uses the source SVGs to render sprites (collections of PNG) at a variety of resolutions, then delivers the proper sprite based on a user's device. Studio uses SVG because it's scalable and supports devices with a range of screen resolutions. The Mapbox Studio style editor supports the SVG format for icons and patterns.