Mapeo Support Materials
Español
Español
  • Introducción
  • Visión general
    • Acerca de Mapeo
      • Herramientas de Mapeo
      • Base de datos de pares y sincronización de Mapeo
      • ¿Cómo se está usando Mapeo?
    • ¿Mapeo es adecuado para mí?
    • FAQs
  • Guía de inicio rápido
    • Empezando...
    • Mapeo Mobile
    • Mapeo Desktop
  • Guía de referencia completa
    • Bienvenid@ – Introducción
    • 🗒️Elementos esenciales para un proyecto de Mapeo exitoso
      • Planeando un proyecto de Mapeo
        • Cuál es el objetivo del proyecto?
        • Qué resultados (productos/materiales) quieres?
        • Qué información recolectar?
          • Tipos de datos dentro de Mapeo
        • Quién debe participar y cómo?
        • Cuáles son los parámetros?
      • Evaluación de riesgos y seguridad
      • Creando protocolos de usuario
    • ✔️Mapeo funcionará de inmediato para mí?
      • Configuración por defecto
      • Mapa de fondo por defecto
    • ⚙️Opciones de personalización
      • Traducir Mapeo y configuraciones predeterminadas
      • Configuraciones personalizadas
        • Creando configuraciones personalizadas
          • Planeando la configuración y la estructura de datos
            • Categorías
            • Iconos
            • Campos de detalles
          • Codificar la configuración
            • Adding icon files
              • Crear y exportar archivos SVG usando Adobe Illustrator
              • Crear y exportar archivos SVG usando 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
          • Probando e iterando
      • Mapas de fondo personalizados
        • Creando mapas de fondo personalizados
    • 📱Mapeo Mobile: instalación y ajustes
      • Instalar Mapeo Mobile
      • Elegir los ajustes de Mapeo Mobile
      • Importar configuraciones a Mapeo Mobile
      • Añadir mapas de fondo personalizados a Mapeo Mobile
      • Actualizar Mapeo Mobile
    • 📱Mapeo Mobile: uso
      • Activar el GPS y ver la posición actual
      • Crear observaciones
      • Ver observaciones
      • Editar y borrar observaciones
      • Compartir datos externamente
      • Sincronizar datos a través Wi-Fi
    • 💻Mapeo Desktop: instalación y ajustes
      • Instalar Mapeo Desktop
      • Escoger el idioma de Mapeo Desktop
      • Importar configuraciones a Mapeo Desktop
      • Añadir mapas de fondo personalizados a Mapeo Desktop
      • Actualizar Mapeo Desktop
    • 💻Mapeo Desktop: uso
      • Mapeo Desktop para gestionar datos de Mapeo Mobile (modo Observaciones)
        • Sincronizar datos
          • Sincronizar a través de Wi-Fi
          • Sincronizar con un archivo
        • Ver observaciones
        • Editar y borrar observaciones
        • Exportar datos y compartir externamente
      • Mapeo Desktop para la creación de datos territoriales (modo Territorio)
        • Navegar por el mapa
        • Crear y editar datos territoriales
        • Cambiar mapas de fondo en el modo Territorio
        • Importar y usar datos geoespaciales externos
        • Exportar y sincronizar datos
      • Sincronizar datos con Mapeo Desktop
    • 💡Capacitaciones en Mapeo
      • Definir objetivos y formato
      • Estructurar una capacitación
        • Buenas prácticas para planificar una capacitación
        • Estructuración de la agenda, contenidos y actividades
          • Sugerencias para las diferentes secciones de un evento de capacitación
          • Consejos y actividades sugeridas para capacitar en las funciones clave de Mapeo
          • Materiales y recursos disponibles para el evento de capacitación
      • Preparación de equipos y suministros para una capacitación
        • Equipos y suministros recomendados
        • Preparación técnica antes de realizar la formación presencial
    • 🔧Solución de problemas
      • No puedo iniciar Mapeo
      • Mapeo se cierra automáticamente
      • Tengo problemas con el GPS en Mapeo
        • No se activa el GPS en Mapeo
        • Mi señal de GPS es muy débil
      • Tengo problemas con la cámara en Mapeo
        • Me aparece una pantalla negra cuando uso la cámara
      • Quiero actualizar los permisos de Mapeo Mobile
      • Tengo problemas de sincronización
        • Quiero conectarme a una red Wi-Fi
        • Quiero crear redes Wi-Fi locales
          • Con un router portátil
          • Con un celular
        • El dispositivo con el que quiero sincronizar no aparece en mi pantalla Sincronizar
        • Me aparece un error cuando intento sincronizar con otro dispositivo
        • No puedo sincronizar con el archivo de sincronización
        • La persona con la que quiero sincronizar ha eliminado datos valiosos
      • Quiero compartir archivos entre dispositivos
      • Quiero guardar e imprimir materiales de referencia de Mapeo
    • Glosario y hojas de referencia rápida
      • Glosario de términos relacionados con Mapeo
      • Descripción general de la pantalla del modo Territorio de Mapeo Desktop
  • Para desarrolladores
    • La arquitectura de Mapeo
    • Repositorios de Mapeo
  • Apoyo
  • Referencias adicionales
  • 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. Guía de referencia completa
  2. Opciones de personalización
  3. Configuraciones personalizadas
  4. Creando configuraciones personalizadas
  5. Codificar la configuración
  6. Adding icon files

Crear y exportar archivos SVG usando Inkscape

PreviousCrear y exportar archivos SVG usando Adobe IllustratorNextCreating details fields

Last updated 2 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