¿Cómo crear símbolos svg que tengan color de relleno, color de trazo y ancho de trazo modificables?

Quiero crear algunos símbolos svg para Qgis usando Inkscape, esos símbolos deben tener atributos como se describe en la pregunta. Durante los últimos dos días, he estado experimentando según las instrucciones de Sourcepole e imité algunos símbolos que vienen con qgis que tienen los atributos deseados sin ningún éxito.

Finalmente, experimenté con la forma más simple de símbolo: creé un svg que contiene solo un círculo en Inkscape e intenté modificarlo.

El archivo original ( circle.svg ) tiene esta línea:

<path
   sodipodi:type="arc"
   style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

Lo modifiqué en:

<path
   sodipodi:type="arc"
   style="fill:param(fill) #ffffff;fill-opacity:1;stroke:param(outline) #000000;stroke-width:param(stroke-width) 1.01988637;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"

Guardado como circle_modified.svg y seleccionado como símbolo de punto, pero Qgis no pudo cambiar los tres parámetros al mismo tiempo.

¿Qué hice mal o debería hacer de manera diferente?

Mi sistema: Qgis 1.8.0 en Ubuntu 12.04 64 bit, Inkscape 0.48, editor de texto Gedit 3.4.1.

Para crear símbolos SVG con color de relleno , color de trazo y ancho de trazo modificables en QGIS, debe reemplazar el atributo de estilo del elemento de ruta con estos 3 atributos:

• fill = "param (relleno) #FFF"
• stroke = "param (esquema) # 000"
• stroke-width = "param (contorno-ancho) 1"

Si está utilizando InkScape, después de escribir el nuevo archivo SVG, edite el archivo y reemplace toda la línea que comienza con estilo:

style="fill:#00a000;fill-opacity:1;stroke:#000000;stroke-width:1;(...)"

con la siguiente línea:

fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"

También quería hacer esto desde que descubrí cómo agregar símbolos SVG ayer , pero todos eran negros. La respuesta dada por jgrocha funciona: quería votar, pero después de unirme al foro SIG, ¡primero necesito tener algo de reputación!

También encontré esta página que confirma la respuesta: SÍMBOLOS SVG EN QGIS CON COLORES MODIFICABLES

Para tener la posibilidad de cambiar los colores del marcador, debemos agregar los marcadores de posición 'param (relleno)' para el color de relleno, 'param (contorno)' para el color del contorno y 'param (ancho del contorno)' para el ancho del trazo. Opcionalmente, estos marcadores de posición pueden ir seguidos de un valor predeterminado:

<svg width="100%" height="100%">
  <rect fill="param(fill) #ff0000" stroke="param(outline) #00ff00" stroke-width="param(stroke-width) 10" width="100" height="100">
  </rect>
</svg>`

¡Gracias!

Parece que vale la pena proporcionar una respuesta simple sobre los conceptos básicos de SVG para ir junto con los detalles proporcionados aquí sobre detalles sobre el software ...

Un archivo SVG es solo un archivo de texto. El final del archivo será .svg pero se puede abrir en un editor de texto igual que un archivo con el final .txt

Un archivo svg simple se parece a esto:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- This is a comment -->

<g id="group1">
<title>My group</title>
<rect id="rectangle1" height="29" width="27" y="50" x="57" stroke-width="1.5" stroke="#000" fill="#ff0"/>
<ellipse ry="17" rx="16" id="circle1" cy="64" cx="113.5" stroke-width="1.5" stroke="#999" fill="#aaa"/>
<path id="path1" d="m56.5,97l51.5,1l5,25l-29,-5l-27.5,-21z" stroke-width="1.5" stroke="#f00" fill="#fff"/>
</g>
</svg>

En esto puede ver que los colores están definidos por los parámetros (donde los puntos se reemplazan con caracteres entre 0-9 o AF):

stroke=#...
fill=#...

Y el ancho del trazo se define por

stroke-width="..."

Se puede agregar lo siguiente, usando el editor de texto, para reemplazar los valores definidos que elija en el SVG ... haciendo posible que QGIS establezca los valores. QGIS comprende un valor para 'param (fill)' y los otros valores 'param (...)', ya que QGIS los establece.

Color de relleno: fill="param(fill) #FFF"

Color de contorno / línea: stroke="param(outline) #000"

Contorno / ancho de línea: stroke-width="param(outline-width) 1"

Opacidad de relleno: fill-opacity="param(fill-opacity)"

Contorno / opacidad de línea: stroke-opacity="param(outline-opacity)"

Tenga en cuenta que no hay nada que le impida utilizar los valores 'param (...)' en lugares ligeramente extraños, por lo que podría usar el valor 'param (fill-opacity)' para definir un color de relleno en un bit del Archivo SVG, pero un color de trazo / línea en otro bit del SVG.

En el diálogo QGIS compositor o símbolo de estilo, la configuración de los colores SVG es bastante obvia. La opacidad de relleno y trazo / línea se establece como parte de la configuración de color. La configuración de ancho de trazo / línea es obvia.

Por último dos puntos

Primero, tenga en cuenta que mientras está en un SVG es válido definir los colores como una colección de atributos de esta manera:

style="fill:none;fill-opacity:1;stroke:#000000;"

Parece que esto no funciona correctamente si incluye parámetros como se describe aquí.

Segundo, cuando se utiliza software como Illustrator o Inkscape, este software puede agregar muchos atributos adicionales al texto SVG. Si sabes lo que estás haciendo y entiendes los conceptos básicos de un SVG como el anterior, puede simplificarte la vida si eliminas este texto adicional. En particular, es posible que los colores se establezcan a través de la definición de estilos en lugar de elemento por elemento.

También tuve el mismo problema, pero después de algunos intentos finalmente funcionó. Estoy escribiendo aquí el procedimiento con la esperanza de que sea de alguna ayuda. Creé una espiral simple en Inkscape y la guardé como svg. Luego lo abrí en un editor de texto (por ejemplo, Notepad ++) y la entrada "estilo" apareció dos veces en mi código svg. Primero en esta parte:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
  <stop
     style="stop-color:#000000;stop-opacity:1;"
     offset="0"
     id="stop6174" />
</linearGradient>

Y luego aquí:

<path
   sodipodi:type="spiral"
   style="fill:none;fill-rule:nonzero;opacity:1;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:35;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:round;stroke-linejoin:round"
   id="path4686" />

Para hacer que el código funcione para tener una espiral svg editable en qgis, eliminé por completo la primera entrada de "estilo" de la primera porción de código:

<linearGradient
   id="linearGradient6172"
   osb:paint="solid">
</linearGradient>

Y sustituya la segunda entrada "estilo" en el segundo fragmento de código de la siguiente manera:

<path
   sodipodi:type="spiral"
   fill="param(fill) #000" stroke="param(outline) #FFF" stroke-  width="param(outline-width) 1"
   id="path4686" />

"# 000" y "#FFF" son dos colores predeterminados para el relleno y el contorno, mientras que "1" es el ancho del contorno predeterminado si no se especifica de manera diferente. Después de guardar estos cambios, puede almacenar el svg en la ruta correcta, la especificada por QGis (dependiendo de la versión se puede encontrar en Configuración -> Opciones -> Rutas SVG). Finalmente, su nuevo objeto svg aparecerá entre los otros objetos predeterminados y será editable.

Espero que pueda ayudar

Voy a ampliar esto porque me tomó un tiempo hacerlo funcionar. Haga su símbolo y guárdelo como un SVG de Inkscape y ábralo en el editor de texto. En el bloque de código inferior verá; style = "fill: # 00a000; fill-opacity: 1; stroke: # 000000; stroke-width: 1; (...)" Reemplace esta línea con; fill = "param (fill) #FFF" stroke = "param (outline) # 000" stroke-width = "param (outline-width) 1" En mis archivos SVG, la línea de estilo aparece para cada entidad o forma en el svg y reemplazar esas líneas no me funcionó; pero hacerlo en la parte inferior en un SVG de Inkscape funcionó. Probé mi solución y las instrucciones aquí en formatos SVG optimizados y simples, pero no funcionó, espero que esto ayude. Inkscape 0.48, QGIS 2.12.0, NotePad ++

Parece ser un problema, si usamos un valor exacto. Cada vez que abrimos las opciones, un valor individual para el color o el trazo se restablece a los del SVG. Esto se puede solucionar estableciendo un valor en las opciones avanzadas. Mis pruebas me mostraron que sería mejor usarlo en fill="param(fill)"lugar de fill="param(fill) #FFF"y así sucesivamente en el SVG.

Otra solución alternativa interesante: si tiene un SVG con color de primer plano y de fondo, puede usar el color de trazo como color de fondo de relleno. Tenga en cuenta que no puede usar un color de contorno separado para todo el SVG.

Gracias a todos ustedes. Aquí hay algunos consejos excelentes y me señalaron en la dirección correcta, pero ninguno abordó mi problema específico, así que agregaré lo que descubrí al bote. Dado que no parece haber una respuesta correcta para cada caso, primero me gustaría ofrecer una sugerencia para probar sus resultados lo más rápido posible.

Prueba de edición rápida

• Mueva temporalmente todos sus iconos de svg fuera de la carpeta de svg de QGIS.
• Haga una copia del archivo svg en el que desea trabajar solo para no sobrescribirlo y coloque una versión editable en la carpeta svg de QGIS.
• Abra QGIS, cargue una capa de puntos para trabajar, abra las propiedades de la capa y seleccione "marcador SVG".
• También puede hacer clic con el botón derecho en un archivo svg y configurar temporalmente el programa predeterminado "Abrir con" en el Bloc de notas para que pueda hacer doble clic en ellos para editarlos en el Bloc de notas.

Con esta configuración, puede ver de inmediato cómo QGIS responde a sus ediciones. Deje el archivo svg abierto en el Bloc de notas y el panel de propiedades abierto en QGIS. Para probar los resultados de una edición, simplemente presione Ctrl + S para guardarlo en el Bloc de notas y cambie a QGIS. Para volver a cargar el svg, cambie el tipo de capa de símbolo a cualquier otra cosa, luego vuelva a cambiarlo al marcador SVG. También hay solo uno allí, así que no tienes problemas para encontrarlo. Probé docenas de ediciones muy rápidamente como esta. Si tiene algún problema para que el svg vuelva al formulario de origen después de una edición, simplemente puede eliminarlo y hacer otra copia.

Hacer que el icono SVG sea editable

El problema que tuve fue que el ícono específico en el que estaba trabajando no tenía las palabras "estilo" o "relleno" en ningún lado, así que tuve problemas para descubrir dónde colocar la línea de parámetros. El truco de Inkscape descrito por Martina resolvió este problema, pero tengo muchos que hacer y no quería abrir y guardar cada uno en Inkscape, así que decidí intentar el ensayo y error. Mirando el código, pude ver que la información de la versión y los metadatos estaban en la parte superior y las instrucciones de forma estaban en la parte inferior entre comillas que estaban delimitadas al principio por <g><path d=(algunos tienen <g><g><path d=) y al final por /></g></svg>. Después de experimentar un poco, descubrí que poner la línea de parámetro entre pathyd=funcionó pero el ícono era invisible en el panel selector y el ícono en el panel de vista previa en la parte superior estaba completamente lleno de negro. El problema del icono invisible parece haber sido un error. Lo arreglé agregando un parámetro de opacidad que describiré a continuación. Resultó que el relleno negro era solo porque el ícono tenía solo 4 mm y estaba relleno solo por el contorno. Para solucionar esto, aumenté el tamaño del icono hasta 10 mm (en QGIS) y reduje el contorno a 0.1 (en el Bloc de notas).

Resumen

Si su icono no tiene las palabras "estilo" o "relleno" en ninguna parte, pero tiene esta línea <g><path d=(o <g><g><path d=) justo antes de las instrucciones de forma, debería poder agregar los parámetros de edición reemplazando la línea anterior con<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

Si el borde es demasiado grueso, puede reducirlo cambiando el último número a una fracción, por ejemplo <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

Si desea que su icono sea semitransparente, puede hacerlo cambiando la línea anterior a esta <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=. El valor de opacidad puede ser de 1 (totalmente opaco) a 0 (totalmente transparente) y puede usar centésimas o incluso milésimas para una precisión adicional (por ejemplo, 0.01). La misma regla se aplica al grosor del borde.

Si tiene muchos de ellos para editar, puede encontrar archivos por lotes aquí en StackExchange para automatizar el proceso de búsqueda y reemplazo.