46 votos

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

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 venían empaquetados con qgis que tienen atributos deseados sin ningún éxito.

Finalmente experimenté con la forma más simple de símbolo: Creé un svg que contiene sólo un círculo en Inkscape y traté de modificarlo.

El archivo original ( circle.svg ) tienen 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"

Salvado como circle_modified.svg y lo seleccionó 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, Gedit 3.4.1 editor de texto.

Gracias.

55voto

Jonah Katz Puntos 128

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

  • llenar \="param(fill) #FFF"
  • golpe \="param(outline) #000"
  • ancho de trazo \="param(outline-width) 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 el 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"

0 votos

¿dónde añado esas líneas en el QGIS?

2 votos

Abre el archivo .svg en un editor de texto y luego puedes añadir esta línea de código en él.

2 votos

Gracias por la respuesta. Tuve que cambiar class="st3" no style="fill:#00a... con fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" para que me funcione. (He creado el svg en illustrator).

9voto

Arno N. Uehm Puntos 21

Parece que merece la pena dar una respuesta sencilla sobre los fundamentos de los SVG para acompañar los detalles proporcionados aquí sobre los aspectos específicos del software...

Un archivo SVG no es más que un archivo de texto. La terminación del archivo será .svg pero puede abrirse en un editor de texto igual que un archivo con la terminación .txt

Un archivo svg sencillo tiene el siguiente aspecto:

<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 ella se puede ver que los colores están definidos por los parámetros (donde los puntos se sustituyen por caracteres entre 0-9 o A-F):

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

Y la anchura del trazo se define por

stroke-width="..."

Se puede añadir lo siguiente, utilizando el editor de texto, para reemplazar cualquier valor definido que elija en el SVG... haciendo posible que los valores sean establecidos por QGIS. QGIS entiende un valor para 'param(fill)' - y los otros valores 'param(...)' - ya que estos son establecidos por el propio QGIS.

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

Contorno / color de la 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)"

Opacidad del contorno / línea: stroke-opacity="param(outline-opacity)"

Tenga en cuenta que no hay nada que le impida utilizar los valores 'param(...)' en lugares ligeramente Impares - así, por ejemplo, podría utilizar el valor 'param(fill-opacity)' para definir un color de relleno en una parte del archivo SVG, pero un color de trazo/línea en otra parte del SVG.

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

Por último, dos puntos

En primer lugar, hay que tener en cuenta que mientras que en un SVG es válido definir los colores como una colección de atributos así:

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

Parece que no funciona correctamente si se incluyen parámetros como los descritos aquí.

En segundo lugar, cuando se utiliza un software como Illustrator o Inkscape se pueden añadir muchos atributos adicionales al texto SVG mediante este software. Si usted sabe lo que está haciendo y entiende los fundamentos de un SVG como el anterior puede hacer la vida más simple si se deshace de este texto adicional. En particular, usted puede encontrar que los colores se establecen a través de la definición de los estilos en lugar de elemento por elemento.

5voto

Brian Knight Puntos 1007

También he querido hacer esto desde que descubrí cómo añadir símbolos SVG ayer pero todos eran negros. La respuesta dada por jgrocha funciona - quería votarla pero al haberme unido al foro GIS, ¡necesito conseguir algo de reputación primero!

También he encontrado 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, tenemos que añadir los marcadores de posición 'param(fill)' para el color de relleno, 'param(outline)' para el color del contorno y 'param(outline-width)' para el ancho del trazo. Estos marcadores de posición pueden ir seguidos opcionalmente de un valor por defecto:

<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.

0 votos

¿dónde añado esas líneas en el QGIS?

3voto

Juggler Puntos 286

Yo también tuve el mismo problema pero después de algunos intentos finalmente funcionó. Escribo aquí el procedimiento esperando que sea de alguna ayuda. Creé una simple espiral en inkscape y la guardé como svg. Luego lo abrí en un editor de texto (por ejemplo, el Bloc de notas++) y la entrada "estilo" apareció dos veces en mi código svg. Primero en este trozo:

<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 con el fin de tener una espiral svg editable en qgis eliminé por completo la primera entrada de "estilo" del primer trozo de código:

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

Y sustituir la segunda entrada de "estilo" en el segundo trozo de código como sigue:

<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 por defecto para el relleno y el contorno, mientras que "1" es el ancho del contorno por defecto si no se especifica otra cosa. Después de guardar estos cambios puedes guardar 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 demás objetos por defecto y será editable.

Espero que pueda ayudar

2voto

KDT Puntos 1

Voy a ampliar la información porque me costó un poco conseguir que funcionara. Haz tu símbolo y guárdalo como un SVG de Inkscape y ábrelo en el editor de texto. En el bloque de código inferior verás style="fill:#00a000;fill-opacity:1;stroke:#000000;stroke-width:1;(...)" Sustituya esta línea por 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 los formatos SVG optimizados y simples pero no funcionó, espero que esto ayude. Inkscape 0.48, QGIS 2.12.0, NotePad++

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X