PerfectVector
Por Irene Kim8 min de lectura

Marcadores SVG en QGIS: prepara símbolos con colores editables

Prepara un marcador SVG personalizado para QGIS con parámetros de relleno y contorno, un hueco real y un detalle fijo. Conserva un SVG normal e inspecciona la copia de destino.

En esta página

Para preparar un marcador SVG personalizado de QGIS con colores editables, añade los marcadores de posición param() de QGIS a los atributos de pintura que quieras que controle la aplicación. Conserva colores explícitos en las regiones que deban permanecer fijas. El manual del selector de símbolos de QGIS 3.44 documenta marcadores de posición para el relleno, el contorno, sus opacidades y el ancho del contorno.

Empieza con un símbolo pequeño y limpio. Un icono que resulta convincente al tamaño de una ilustración puede perder su hueco, su detalle de color o su contorno al usarse como marcador de mapa.

Alcance de esta guía: renderizamos el SVG original normal en un navegador y auditamos el XML de la copia parametrizada. No importamos la copia en QGIS. La sintaxis de parámetros siguiente sigue la documentación de 3.44; las comprobaciones de destino deben completarse en la aplicación, por ti o por el destinatario del SIG.

Conserva un original normal y una copia para QGIS

Usa dos archivos con la misma geometría:

ArchivoFinalidad
marker-master.svgPinturas SVG normales para editar e inspeccionar en el navegador.
marker-qgis.svgUna copia de destino con marcadores de posición de parámetros QGIS en los atributos seleccionados.

Esta separación facilita inspeccionar el diseño original. Una vista previa del original normal en el navegador demuestra cómo se renderiza ese archivo de origen en el navegador. No demuestra que la copia de QGIS se haya importado correctamente ni que sus controles funcionen como se pretende.

Nuestro marcador original tiene un cuerpo verde, un hueco circular transparente y un detalle dorado en forma de rombo. Contiene dos trazados y ninguna imagen raster incrustada.

Diseño de origen original
Representación en el navegador del SVG normal de un marcador verde con hueco transparente y detalle dorado fijo, incluidas vistas previas de 24, 32 y 48 píxeles
El SVG original normal renderizado en un navegador. El patrón de cuadros se ve a través del hueco; no es una importación de QGIS ni una prueba de parámetros de color.

Construye un hueco real en el origen

Guarda lo siguiente como marker-master.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="64" height="64" viewBox="0 0 64 64">
  <path id="body" fill="#237466" fill-opacity="1"
        stroke="#173f37" stroke-opacity="1" stroke-width="2"
        fill-rule="evenodd"
        d="M32 5C19 5 10 14 10 27C10 42 32 59 32 59S54 42 54 27C54 14 45 5 32 5Z M32 17A10 10 0 1 0 32 37A10 10 0 1 0 32 17Z"/>
  <path id="accent" fill="#f2c96c" stroke="none"
        d="M32 41L36 46L32 51L28 46Z"/>
</svg>

El trazado del cuerpo incluye un contorno exterior y un contorno circular interior. fill-rule="evenodd" convierte la región interior en un hueco en esta construcción. Permite ver el fondo a través del marcador en lugar de pintar un disco blanco encima. La referencia de fill-rule de MDN explica cómo la regla determina qué regiones se rellenan.

El viewBox define el rectángulo de coordenadas de origen. Aquí es un cuadrado de 64 unidades, con espacio alrededor del contorno. Mantén ese marco igual en las dos copias. Si el símbolo aparece inesperadamente pequeño dentro de su marco, inspecciona la geometría y los márgenes vacíos antes de aumentar su tamaño de visualización.

El detalle dorado es un trazado independiente, lo que hace explícita su elección de pintura. Para un icono más elaborado, decide qué regiones pertenecen al color compartido del cuerpo antes de añadir parámetros. Nuestra guía de colores SVG explica dónde pueden almacenarse los rellenos y los trazos.

Parametriza el cuerpo y deja fijo el detalle

Crea una copia llamada marker-qgis.svg. En el trazado con id="body", sustituye sus cinco atributos de pintura por este bloque:

fill="param(fill) #237466"
fill-opacity="param(fill-opacity) 1"
stroke="param(outline) #173f37"
stroke-opacity="param(outline-opacity) 1"
stroke-width="param(outline-width) 2"

Conserva los datos del trazado y fill-rule sin cambios. Deja fill="#f2c96c" y stroke="none" del trazado accent como están.

Atributo SVGMarcador de posición QGISControl previsto
fillparam(fill)Color de relleno del cuerpo
fill-opacityparam(fill-opacity)Opacidad del relleno del cuerpo
strokeparam(outline)Color del contorno del cuerpo
stroke-opacityparam(outline-opacity)Opacidad del contorno del cuerpo
stroke-widthparam(outline-width)Ancho del contorno del cuerpo

Los valores posteriores a los marcadores de posición son valores predeterminados opcionales en la sintaxis de QGIS. No garantizan que un visor SVG normal entienda el valor de pintura parametrizado. Usa el original normal para la edición y vista previa general del SVG.

No sustituyas automáticamente todos los colores por param(fill). En este diseño, hacerlo eliminaría la decisión de mantener separado el detalle dorado. Aplica el marcador de posición compartido solo a las regiones que deban responder al mismo control.

Audita la copia de destino antes de entregarla

Nuestra comprobación XML confirmó que ambos archivos tienen el mismo viewBox y datos de trazado idénticos. La copia de QGIS contiene los cinco marcadores de posición previstos en body; accent conserva su relleno dorado fijo. Este ejemplo no contiene elementos <image>, archivos externos ni fuentes.

Para tu propio marcador, comprueba:

  • El origen contiene las formas vectoriales esperadas. Cambiar un atributo de pintura no puede recolorear los píxeles de una imagen incrustada como regiones independientes.
  • Solo los trazados previstos reciben parámetros. Mantén explícitos los detalles decorativos.
  • Ninguna declaración de estilo conserva en otra parte del archivo un valor de pintura fijo que entre en conflicto.
  • El hueco sigue siendo una abertura auténtica al verlo sobre un fondo que contraste.
  • El marcador tiene suficiente espacio para su contorno sin un marco vacío grande.

Un análisis XML correcto comprueba la sintaxis. No certifica que el renderizador de destino admita todas las funciones SVG. Mantén sencillo el origen y completa a continuación las comprobaciones en la aplicación.

Comprueba el marcador en el proyecto QGIS del destinatario

En el selector del símbolo de punto, elige una capa de símbolo SVG marker y carga la copia de destino. El manual de QGIS para esa versión enlazado antes describe este tipo de símbolo y sus controles disponibles.

Antes de usar el símbolo en todo el mapa, pide al destinatario que verifique por separado el relleno del cuerpo, el contorno y la opacidad; confirme que el detalle dorado permanece fijo; inspeccione el hueco al tamaño previsto del marcador; y vuelva a abrir el proyecto compartido con su archivo de símbolo disponible. Inspecciona también el mapa o la composición exportados, ya que ese es el archivo que recibirá el público.

Estas comprobaciones completan la entrega. Nuestra imagen del navegador y la auditoría del origen cubren el diseño de entrada, mientras que el proyecto QGIS real determina el resultado final.

Cuando el icono parte de una imagen prediseñada raster

Si tu pictograma personalizado solo existe en PNG o JPG, la herramienta de imágenes prediseñadas a SVG de PerfectVector puede recuperar un diseño vectorial para editar. Inspecciona los trazados, simplifica los detalles que desaparezcan al tamaño del marcador y separa el cuerpo de cualquier detalle fijo antes de añadir parámetros QGIS. La guía de preparación de iconos pequeños explica la claridad del origen y la limpieza en tamaños pequeños.

Esto prepara la apariencia de un símbolo. No georreferencia una imagen, no recupera coordenadas ni convierte un mapa dibujado en datos geográficos precisos. Nuestra guía de mapas dibujados a mano explica esa distinción. Si la entrada ya tiene los trazados vectoriales necesarios, úsala directamente; la guía de archivos SVG puede ayudarte a inspeccionar su contenido.

Preguntas frecuentes

¿Por qué un marcador SVG importado no permite controlar los colores que quiero? Comprueba si los atributos de pintura correspondientes contienen los marcadores de posición de parámetros QGIS. En este ejemplo, solo el cuerpo está parametrizado; el detalle dorado es fijo deliberadamente. Después verifica los controles en la versión QGIS de destino.

¿Puedo mantener fijo un color de detalle? Deja el relleno de esa región como color explícito y aplica los parámetros compartidos solo a las regiones que quieras controlar. Conserva el detalle en un trazado independiente para facilitar la auditoría del origen.

¿Vectorizar un icono lo convierte en datos geográficos? No. Crea el diseño del símbolo. Las ubicaciones, coordenadas y precisión del mapa siguen dependiendo de los datos geográficos y del flujo de trabajo SIG.

Fuentes

  1. QGIS 3.44 — El selector de símbolos — Parámetros de marcadores SVG y valores predeterminados opcionales.
  2. MDN — fill-rule — Regiones rellenas y regla par-impar usada para el hueco.
  3. MDN — viewBox — Rectángulo de coordenadas SVG usado por ambas copias del origen.

Para un pictograma raster, convierte la imagen prediseñada a SVG, inspecciona el hueco y los detalles pequeños y prepara una copia independiente para QGIS. Conserva el original normal y después pide al destinatario que pruebe los colores y el aspecto del marcador en el proyecto real antes de entregarlo.

Más del blog

Empieza con un SVG más limpio
y fácil de editar