Para revisar información clave sobre el diseño de iconos, consulte Iconos.
Una vez que se haya decidido por el diseño o el concepto de sus íconos, deberá generar archivos .svg para que cada uno se guarde en el directorio de icons. Los iconos deben crearse como gráficos de 100x100 píxeles que sean claros cuando se visualizan al 100 %.
Actualmente, hemos documentado dos flujos de trabajo para generar archivos .svg compatibles con Mapeo mediante software, uno con un producto comercial (Adobe Illustrator) y otro con un producto de código abierto (Inkscape).
Los iconos deben ser leídos por MAPEO en dos tamaños: 100 píxeles y 24 píxeles. Por ese motivo, existe una convención de nomenclatura de archivos específica:
nombre-icono-100px.svg
nombre-icono-24px.svg
Cada icono se puede duplicar y renombrar para que haya uno de cada tamaño. Son abiertos y leídos por los archivos .json en la carpeta de presets. Verifique que el nombre se haya ingresado correctamente donde sea necesario (más sobre esto en la siguiente sección). El script de compilación procesará el sufijo de tamaño de píxel.
Adobe Illustrator es un editor de gráficos vectoriales y un programa de diseño desarrollado por Adobe Inc. Aunque es un producto comercial con licencia, se usa muy comúnmente para crear gráficos vectoriales, y muchos usuarios también utilizan esta herramienta para crear íconos para Mapeo.
.svg con las propiedades adecuadasCuando esté listo para exportar un archivo gráfico vectorial a un formato de archivo .svg compatible con Mapeo, el proceso es el siguiente:
En el menú superior de Adobe Illustrator, haga clic en Archivo y luego seleccione Exportar, seguido de Exportar como.
Asegúrese de que Use Artboards esté marcado.
Guarde su archivo .svg en el directorio correcto (icons para las configuraciones de Mapeo) y con el nombre de archivo deseado, y haga clic en Exportar.
En la siguiente ventana, asegúrese de que las siguientes propiedades estén configuradas y luego haga clic en Aceptar:
Su archivo .svg ahora debería estar listo para ser utilizado por Mapeo. Consulte #naming-icon-files para obtener más información sobre cómo nombrar los archivos y dónde colocarlos en el directorio de configuración.
Inkscape 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.
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.
.svg files with the right size and Viewbox in Document PropertiesOnce 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.
Your .svg file should now be ready to be used by Mapeo. See #naming-icon-files for more information on how to name the files and where to place them in the configuration directory.
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.
