Come creare simboli svg con colore di riempimento, colore del tratto e larghezza del tratto modificabili?

Voglio creare alcuni simboli svg per Qgis usando Inkscape, quei simboli devono avere attributi come descritto nella domanda. Negli ultimi due giorni ho sperimentato secondo le istruzioni di Sourcepole e ho imitato alcuni simboli forniti in bundle con qgis che hanno desiderato attributi senza successo.

Alla fine ho sperimentato la forma più semplice di simbolo: ho creato uno svg che contiene solo un cerchio in Inkscape e ho provato a modificarlo.

Il file originale ( circle.svg ) ha questa riga:

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

L'ho modificato in:

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

Salvato come circle_modified.svg e selezionato come simbolo punto, ma Qgis non è stato in grado di modificare tutti e tre i parametri contemporaneamente.

Cosa ho fatto di sbagliato o dovrei fare diversamente?

Il mio sistema: Qgis 1.8.0 su Ubuntu 12.04 64 bit, Inkscape 0.48, editor di testo Gedit 3.4.1.

Per creare simboli SVG con colore di riempimento , colore del tratto e larghezza del tratto modificabili in QGIS, è necessario sostituire l' attributo di stile dall'elemento del percorso con questi 3 attributi:

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

Se stai usando InkScape, dopo aver scritto il nuovo file SVG, modifica il file e sostituisci l'intera riga iniziando con stile:

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

con la seguente riga:

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

Ho anche voluto farlo da quando ho scoperto come aggiungere i simboli SVG ieri , ma erano tutti neri. La risposta data da jgrocha funziona: volevo votarla, ma essendo appena entrato nel forum GIS, devo prima guadagnarmi una reputazione!

Ho anche trovato questa pagina che conferma la risposta: SIMBOLI SVG IN QGIS CON COLORI MODIFICABILI

Per avere la possibilità di cambiare i colori del marcatore, dobbiamo aggiungere i parametri (riempimento) 'segnaposto per il colore di riempimento,' param (contorno) 'per il colore del contorno e' param (larghezza del contorno) 'per la larghezza del tratto. Questi segnaposto possono facoltativamente essere seguiti da un valore predefinito:

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

Grazie!

Sembra che valga la pena fornire una semplice risposta ai concetti di base degli SVG da affiancare ai dettagli forniti qui sulle specifiche relative al software ...

Un file SVG è solo un file di testo. La fine del file sarà .svg ma può essere aperta in un editor di testo come un file con la fine .txt

Un semplice file svg è simile al seguente:

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

In questo puoi vedere che i colori sono definiti dai parametri (dove i punti sono sostituiti da caratteri tra 0-9 o AF):

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

E la larghezza del tratto è definita da

stroke-width="..."

È possibile aggiungere quanto segue, usando l'editor di testo, per sostituire qualsiasi valore definito scelto in SVG ... rendendo possibile l'impostazione dei valori da QGIS. QGIS comprende un valore per "param (fill)" - e gli altri valori "param (...)" - poiché questi sono impostati dallo stesso QGIS.

Colore di riempimento: fill="param(fill) #FFF"

Colore contorno / linea: stroke="param(outline) #000"

Larghezza contorno / linea: stroke-width="param(outline-width) 1"

Riempi l'opacità: fill-opacity="param(fill-opacity)"

Opacità contorno / linea: stroke-opacity="param(outline-opacity)"

Prendi nota del fatto che non c'è nulla che ti impedisca di usare i valori 'param (...)' in punti leggermente dispari, quindi ad esempio potresti usare il valore 'param (fill-opacity)' per definire un colore di riempimento in un bit del File SVG, ma un colore tratto / linea in un altro bit dell'SVG.

Nel dialogo del compositore o del simbolo di stile QGIS le impostazioni per i colori SVG sono abbastanza ovvie. L'opacità di riempimento e tratto / linea è impostata come parte delle impostazioni del colore. L'impostazione della larghezza / tratto è ovvia.

Infine due punti

Innanzitutto, nota che in un SVG è valido definire i colori come una raccolta di attributi in questo modo:

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

Questo sembra non funzionare correttamente se includi i parametri come descritto qui.

In secondo luogo, quando si utilizza software come Illustrator o Inkscape è possibile aggiungere molti altri attributi al testo SVG da questo software. Se sai cosa stai facendo e capisci le basi di un SVG come sopra, potrebbe semplificarti la vita se ti sbarazzi di questo testo aggiuntivo. In particolare potresti scoprire che i colori sono impostati attraverso la definizione di stili piuttosto che articolo per articolo.

Ho anche avuto lo stesso problema, ma dopo alcuni tentativi finalmente ha funzionato. Sto scrivendo qui la procedura sperando che possa essere di qualche aiuto. Ho creato una spirale semplice in inkscape e l'ho salvata come svg. Quindi l'ho aperto in un editor di testo (ad esempio Notepad ++) e la voce "stile" è stata ripetuta due volte nel mio codice svg. Primo in questo pezzo:

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

E poi qui:

<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" />

Per far funzionare il codice in modo da avere una spirale svg modificabile in qgis ho rimosso completamente la prima voce "style" dal primo blocco di codice:

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

E sostituire la seconda voce di "stile" nel secondo blocco di codice come segue:

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

"# 000" e "#FFF" sono due colori predefiniti per il riempimento e il contorno mentre "1" è la larghezza del contorno predefinita se non diversamente specificato. Dopo aver salvato queste modifiche è possibile memorizzare svg nel percorso corretto, quello specificato da QGis (a seconda della versione che si trova in Impostazioni -> Opzioni -> Percorsi SVG). Alla fine il tuo nuovo oggetto svg apparirà tra gli altri oggetti predefiniti e sarà modificabile.

Spero possa essere d'aiuto

Espanderò questo perché mi ci è voluto un po 'per farlo funzionare. Crea il tuo simbolo e salvalo come Inkscape SVG e aprilo nell'editor di testo. Nel blocco di codice in basso vedrai; style = "fill: # 00a000; fill-opacity: 1; tratto: # 000000; tratto-tratto: 1; (...)" Sostituisci questa riga con; fill = "param (fill) #FFF" stroke = "param (outline) # 000" stroke-width = "param (outline-width) 1" Nei miei file SVG la linea di stile appare per ogni entità o forma in svg e sostituire quelle linee non ha funzionato per me; ma farlo in fondo su un Inkscape SVG ha funzionato. Ho provato la mia soluzione e le indicazioni qui sui formati SVG ottimizzati e semplici, ma non ha funzionato, spero che questo aiuti. Inkscape 0.48, QGIS 2.12.0, NotePad ++

Sembra essere un problema, se usiamo un valore esatto. Ogni volta che apriamo le opzioni, un valore individuale per colore o tratto viene ripristinato a quelli nell'SVG. Questo può essere risolto impostando un valore nelle opzioni avanzate. I miei test mi hanno mostrato che sarebbe meglio usare al fill="param(fill)"posto fill="param(fill) #FFF"e così via in SVG.

Un'altra soluzione interessante: se si dispone di un file SVG con il colore di primo piano e di sfondo, è possibile utilizzare il colore del tratto come colore di sfondo di riempimento. Si noti, quindi non è possibile utilizzare un colore di contorno separato per l'intero SVG.

Grazie a tutti voi. Ci sono alcuni ottimi consigli qui e mi hanno indicato la giusta direzione, ma nessuno ha affrontato il mio problema specifico, quindi aggiungerò quello che ho capito nel piatto. Dal momento che non sembra esserci una risposta giusta per ogni caso, vorrei prima offrire un suggerimento per testare i risultati il ​​più rapidamente possibile.

Test di modifica rapida

• Spostare temporaneamente tutte le icone svg dalla cartella svg di QGIS.
• Fai una copia del file svg su cui desideri lavorare di sola lettura in modo da non sovrascriverlo e metterne una versione modificabile nella cartella svg di QGIS.
• Apri QGIS, carica un layer punto con cui lavorare, apri le proprietà del layer e seleziona "marker SVG".
• È inoltre possibile fare clic con il pulsante destro del mouse su un file svg e impostare temporaneamente il programma "Apri con" predefinito su Blocco note in modo da poter fare doppio clic su di essi per modificarli in Blocco note.

Con questa configurazione puoi immediatamente vedere come QGIS risponde alle tue modifiche. Lascia il file svg aperto in Blocco note e il riquadro delle proprietà aperto in QGIS. Per testare i risultati di una modifica, basta premere Ctrl + S per salvarlo in Blocco note e passare a QGIS. Per ricaricare lo svg, cambia il tipo di layer simbolo in qualsiasi altra cosa, quindi ripristinalo in marker SVG. C'è anche solo uno lì dentro quindi non hai problemi a trovarlo. Ho testato dozzine di modifiche molto rapidamente in questo modo. Se hai qualche problema a riportare lo svg nel modulo sorgente dopo una modifica, puoi semplicemente cancellarlo ed effettuare un'altra copia.

Rendere l'icona SVG modificabile

Il problema che avevo era che l'icona specifica su cui stavo lavorando non aveva le parole "stile" o "riempimento" da nessuna parte, quindi ho avuto difficoltà a capire dove posizionare la riga dei parametri. Il trucco di Inkscape descritto da Martina ha risolto questo problema, ma ho un sacco di cose da fare e non volevo aprirle e salvarle in Inkscape, quindi ho deciso di tentare tentativi ed errori. Guardando il codice ho potuto vedere che le informazioni sulla versione e i metadati erano in alto e le istruzioni di forma erano in basso racchiuse tra virgolette che erano delimitate all'inizio <g><path d=(alcuni hanno <g><g><path d=) e alla fine da /></g></svg>. Dopo un po 'di esperimenti ho capito che mettere la linea di parametri tra pathed=ha funzionato ma l'icona era invisibile nel riquadro di selezione e l'icona nel riquadro di anteprima nella parte superiore era interamente riempita di nero. Il problema dell'icona invisibile sembra essere stato un bug. L'ho corretto aggiungendo un parametro di opacità che descriverò di seguito. Si è scoperto che il riempimento nero era solo perché l'icona era solo 4 mm ed era riempita solo dal contorno. Per risolvere questo problema ho aumentato le dimensioni dell'icona fino a 10 mm (in QGIS) e ho ridotto il contorno fino a 0,1 (in Blocco note).

Sommario

Se la tua icona non ha le parole "stile" o "riempi" da nessuna parte, ma ha questa linea <g><path d=(o <g><g><path d=) proprio prima delle istruzioni di forma, dovresti essere in grado di aggiungere i parametri di modifica sostituendo la linea sopra con<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

Se il bordo è troppo spesso, puoi ridurlo modificando l'ultimo numero in una frazione, ad es <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

Se desideri rendere semitrasparente la tua icona, puoi farlo modificando la riga sopra con questa <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=. Il valore di opacità può essere compreso tra 1 (completamente opaco) e 0 (completamente trasparente) e puoi usare centesimi o addirittura millesimi per una precisione aggiuntiva (ad es. 0,01). La stessa regola vale per lo spessore del bordo.

Se ne hai molti da modificare, puoi trovare file batch qui su StackExchange per automatizzare il processo di ricerca e sostituzione.