Mapeo Support Materials
English
English
  • Introduction
  • Overview
    • About Mapeo
      • Mapeo tools
      • Peer-to-peer & Mapeo sync
      • How Mapeo is being used
    • Is Mapeo right for me?
    • FAQs
  • Quick start guide
    • Getting started
    • Mapeo Mobile
    • Mapeo Desktop
  • Complete Reference guide
    • Welcome – Introduction
    • 🗒️Essentials for a successful Mapeo project
      • Planning a Mapeo project
        • What is the project goal?
        • What outputs do you want?
        • What information to collect?
          • Data types within Mapeo
        • Who should be involved and how?
        • What are the parameters?
      • Security & risk assessment
      • Creating user protocols
    • ✔️Will Mapeo work out-of-the-box for me?
      • Default configuration
      • Default background map
    • ⚙️Customization options
      • Translating Mapeo & default configurations
      • Custom configurations
        • Creating custom configurations
          • Planning configuration & data structure
            • Categories
            • Icons
            • Details fields
          • Coding configuration
            • Adding icon files
              • Creating and exporting SVG files using Adobe Illustrator
              • Creating and exporting SVG files using Inkscape
            • Creating details fields
            • Creating categories
            • Defining geometry defaults
            • Adding a project key
            • Adding project name and version
            • Building configuration file
              • Via the command line
              • Using GitHub Actions
          • Testing and iterating
      • Custom background maps
        • Creating custom background maps
          • Generating map files in .mbtiles format for the experimental Background Maps feature
    • 📱Mapeo Mobile installation & setup
      • Installing Mapeo Mobile
      • Choosing Mapeo Mobile settings
      • Experiments: Turning on experimental features
        • Directional Arrow
        • P2P (peer-to-peer) App Updates
        • Background Maps
        • Security
          • App Passcode
          • Obscure Passcode
      • Importing configurations into Mapeo Mobile
      • Adding custom background maps to Mapeo Mobile
      • Updating Mapeo Mobile
    • 📱Mapeo Mobile use
      • Activating GPS and viewing current location
      • Creating observations
      • Viewing observations
      • Editing and deleting observations
      • Sharing data externally
      • Syncing data via Wi-Fi
    • 💻Mapeo Desktop installation & setup
      • Installing Mapeo Desktop
      • Choosing Mapeo Desktop language
      • Importing configurations to Mapeo Desktop
      • Adding custom background maps to Mapeo Desktop
      • Updating Mapeo Desktop
    • 💻Mapeo Desktop use
      • Mapeo Desktop for managing Mapeo Mobile data (Observations mode)
        • Synchronizing data
          • Synchronizing via Wi-Fi
          • Synchronizing with a file
        • Viewing observations
        • Editing and deleting observations
        • Exporting data & sharing externally
      • Mapeo Desktop for creating territory data (Territory mode)
        • Navigating around the map
        • Creating and editing territory data
        • Changing background maps in Territory mode
        • Importing and using external geospatial data
        • Exporting and syncing data
      • Synchronizing data with Mapeo Desktop
    • 💡Mapeo trainings
      • Defining goals and format
      • Structuring a training
        • Best practices for planning a training
        • Structuring the agenda, content and activities
          • Suggestions for the different sections of a training event
          • Tips and suggested activities for training key features of Mapeo
          • Materials and resources available for the training event
      • Preparing equipment and supplies for a training
        • Recommended equipment and supplies
        • Tech preparation before doing in-person training
    • 🔧Troubleshooting
      • I can't start Mapeo
      • Mapeo closes automatically
      • I have problems with the GPS in Mapeo
        • GPS is not activated in Mapeo
        • My GPS signal is very weak
      • I have problems with the camera in Mapeo
        • I get a black screen when using the camera
      • I want to update Mapeo Mobile permissions
      • I have sync issues
        • I want to connect to Wi-Fi
        • I want to create local Wi-Fi networks
          • With a portable router
          • With a smartphone
        • The device I want to sync with does not show up on my Synchronize screen
        • I get an error when I try to sync with another device
        • I can't sync with the sync file
        • The person I want to sync with has deleted valuable data
      • Sharing files between devices
      • Saving and printing Mapeo reference materials
      • How do I back up Mapeo Desktop data?
    • Glossary & quick reference sheets
      • Glossary of Mapeo related terms
      • Overview of Mapeo Desktop Territory mode screen
  • For developers
    • Mapeo architecture overview
    • Mapeo repositories
    • Localization
  • Support
  • Additional references
  • Digital Democracy website
Powered by GitBook
On this page
  • Using Inkscape to vectorize images
  • Saving .svg files with the right size and Viewbox in Document Properties
  • Verify that your SVG file is built correctly
  • Additional resources
Export as PDF
  1. Complete Reference guide
  2. Customization options
  3. Custom configurations
  4. Creating custom configurations
  5. Coding configuration
  6. Adding icon files

Creating and exporting SVG files using Inkscape

PreviousCreating and exporting SVG files using Adobe IllustratorNextCreating details fields

Last updated 3 years ago

is a free and open-source vector graphics editor used to create vector images, primarily in Scalable Vector Graphics (.svg) format. Inkscape is an alternative to the commercial software Adobe Illustrator, and can be used to generate .svg files that work in Mapeo.

Using Inkscape to vectorize images

A common workflow for generating Mapeo icons is to find photos or other raster images, and turn them into vector images, simplifying them until they will render well at a small size. In Adobe Illustrator, this can be done using the Image Trace tool.

In Inkscape, this can be done using the Trace Bitmap tool found in the Path menu. There are some options to manipulate like Smoothing corners, Optimizing corners, and setting the number of colors.

Saving .svg files with the right size and Viewbox in Document Properties

Once you have a vector image that is to your satisfaction (and in a square format), you need to set the correct width & height and Viewbox size before saving the .svg file. You can do this in Document Properties (File menu).

First, set the Display units to pixels (px). This dropdown is located at the very top of the Document Properties menu.

Locate the "Custom Size" and "Scale" boxes in Document Properties.

First, you may need to set the unit of measurement for the Custom size, if it is not in pixels. If Units is in a format like milimeters (mm), change this to px.

Set the Width and Height to 100 each.

Next, the Viewbox needs to be set to 100 as well. The easiest way to do this — once you've set the Display units and Custom size units to pixels — is to set the Scale x to 1. It should copy over the Width and Height values from the Custom Size to the Viewbox. If that didn't do the trick, manually enter 100 for both Width and Height here.

Once you've done this, you may need to resize the art to match the full size of the Viewbox:

The easiest way to do this is to use the sizing and placement parameters right above the Viewbox, as shown in the screenshot above. Set W and H to 100 (px), and make sure X and Y are set to 0 (px). The image will then fill the entire Viewbox:

You can now save the .svg file by going to File → Save / Save As / Save A Copy.

Verify that your SVG file is built correctly

If you want to verify that the parameters in your .svg file are correct, open it in a text editor like Visual Studio Code or Notepad++.

It should have an initial <svg> tag with width and height set to 100, and viewBox set to "0 0 100 100."

After some tags like <defs>, <sodipodi:namedview>, <metadata>, which don't matter for the purposes of creating icons for Mapeo, you should see tags like <g> with layer properties, and a series of <path> with vertices and style properties, which constitute your vectors.

If your .svg file looks like this, the Mapeo configurations builder script should process your icons just fine.

Additional resources

Your .svg file should now be ready to be used by Mapeo. See for more information on how to name the files and where to place them in the configuration directory.

⚙️
Troubleshooting SVG image errors in Mapbox Studio
Inkscape
Naming icon files