Wie erstelle ich SVG-Symbole mit veränderbarer Füllfarbe, Konturfarbe und Konturbreite?

Ich möchte mit Inkscape einige SVG-Symbole für QGIS erstellen. Diese Symbole müssen die in der Frage beschriebenen Attribute haben. In den letzten zwei Tagen habe ich experimentiert, wie von Sourcepole angewiesen, und einige Symbole imitiert, die mit QGIS gebündelt waren und die gewünschten Attribute hatten, ohne Erfolg.

Schließlich habe ich mit der einfachsten Symbolform experimentiert: Ich habe in Inkscape ein SVG erstellt, das nur einen Kreis enthält, und versucht, ihn zu ändern.

Die Originaldatei ( circle.svg ) enthält folgende Zeile:

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

Ich habe es geändert 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"

Als circle_modified.svg gespeichert und als Punktsymbol ausgewählt, aber Qgis konnte nicht alle drei Parameter gleichzeitig ändern.

Was habe ich falsch gemacht oder sollte ich anders machen?

Mein System: Qgis 1.8.0 unter Ubuntu 12.04 64 Bit, Inkscape 0.48, Gedit 3.4.1 Texteditor.

Um SVG-Symbole mit veränderbarer Füllfarbe , Strichfarbe und Strichbreite in QGIS zu erstellen , müssen Sie das style- Attribut aus dem path- Element durch diese drei Attribute ersetzen :

• fill = "param (fill) #FFF"
• stroke = "param (outline) # 000"
• Strichbreite = "param (Umrissbreite) 1"

Wenn Sie InkScape verwenden, bearbeiten Sie die Datei nach dem Schreiben der neuen SVG-Datei und ersetzen Sie die gesamte Zeile, die mit style beginnt:

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

mit der folgenden Zeile:

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

Ich wollte das auch tun, seit ich gestern herausgefunden habe, wie man SVG-Symbole hinzufügt , aber sie waren alle schwarz. Die Antwort von jgrocha funktioniert - ich wollte abstimmen, aber nachdem ich gerade dem GIS-Forum beigetreten bin, muss ich erst einen guten Ruf erlangen!

Ich habe auch diese Seite gefunden, die die Antwort bestätigt: SVG-SYMBOLE IN QGIS MIT MODIFIZIERBAREN FARBEN

Um die Farben des Markers ändern zu können, müssen die Platzhalter 'param (Füllung)' für die Füllfarbe, 'param (Umriss)' für die Umrissfarbe und 'param (Umrissbreite)' für die Strichbreite hinzugefügt werden. Auf diese Platzhalter kann optional ein Standardwert folgen:

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

Vielen Dank!

Es scheint sinnvoll zu sein, eine einfache Antwort auf die Grundlagen von SVGs zu geben, neben den Details, die hier über Besonderheiten in Bezug auf Software bereitgestellt werden ...

Eine SVG-Datei ist nur eine Textdatei. Die Dateiendung lautet .svg, kann jedoch in einem Texteditor wie eine Datei mit der Endung .txt geöffnet werden

Eine einfache SVG-Datei sieht ungefähr so ​​aus:

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

Hier können Sie sehen, dass die Farben durch die Parameter definiert werden (wobei die Punkte durch Zeichen zwischen 0-9 oder AF ersetzt werden):

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

Und die Strichbreite ist definiert durch

stroke-width="..."

Das Folgende kann mit dem Texteditor hinzugefügt werden, um alle definierten Werte zu ersetzen, die Sie in der SVG auswählen. Dadurch können die Werte von QGIS festgelegt werden. QGIS versteht einen Wert für 'param (fill)' - und die anderen 'param (...)' - Werte, da diese von QGIS selbst festgelegt werden.

Füllfarbe: fill="param(fill) #FFF"

Umriss- / Linienfarbe: stroke="param(outline) #000"

Umriss / Linienbreite: stroke-width="param(outline-width) 1"

Deckkraft auffüllen: fill-opacity="param(fill-opacity)"

Kontur- / Linienopazität: stroke-opacity="param(outline-opacity)"

Beachten Sie, dass Sie durch nichts daran gehindert werden können, die 'param (...)' - Werte an etwas ungeraden Stellen zu verwenden. Sie können also beispielsweise den 'param (Füllopazität)' - Wert verwenden, um eine Füllfarbe in einem Bit der zu definieren SVG-Datei, aber eine Strich- / Linienfarbe in einem anderen Bit der SVG.

Im QGIS-Komponisten- oder Stilsymboldialog sind die Einstellungen für die SVG-Farben ziemlich offensichtlich. Die Deckkraft für Füllung und Kontur / Linie wird als Teil der Farbeinstellungen festgelegt. Die Strich- / Linienbreiteneinstellung ist offensichtlich.

Zum Schluss noch zwei Punkte

Beachten Sie zunächst, dass in einer SVG-Datei die Farben als eine Sammlung von Attributen wie folgt definiert werden können:

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

Dies scheint nicht richtig zu funktionieren, wenn Sie die hier beschriebenen Parameter einfügen.

Zweitens können bei Verwendung von Software wie Illustrator oder Inkscape dem SVG-Text mit dieser Software viele zusätzliche Attribute hinzugefügt werden. Wenn Sie wissen, was Sie tun, und die Grundlagen einer SVG wie oben verstehen, kann dies das Leben vereinfachen, wenn Sie diesen zusätzlichen Text entfernen. Insbesondere stellen Sie möglicherweise fest, dass Farben durch die Definition von Stilen und nicht von Artikel zu Artikel festgelegt werden.

Ich hatte auch das gleiche Problem, aber nach einigen Versuchen funktionierte es schließlich. Ich schreibe hier die Prozedur in der Hoffnung, dass sie hilfreich sein wird. Ich habe eine einfache Spirale in inkscape erstellt und sie als svg gespeichert. Dann habe ich es in einem Texteditor (zB Notepad ++) geöffnet und der Eintrag "style" kam zweimal in meinem SVG-Code vor. Zuerst in diesem Block:

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

Und dann hier:

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

Damit der Code funktioniert, um eine bearbeitbare SVG-Spirale in QGIS zu haben, habe ich den ersten "Style" -Eintrag vollständig aus dem ersten Codeblock entfernt:

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

Und ersetzen Sie den zweiten "style" -Eintrag im zweiten Codeabschnitt wie folgt:

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

"# 000" und "#FFF" sind zwei Standardfarben für die Füllung und den Umriss, während "1" die Standardumrissbreite ist, sofern nicht anders angegeben. Nachdem Sie diese Änderungen gespeichert haben, können Sie das SVG im richtigen, von QGis festgelegten Pfad speichern (abhängig von der Version unter Einstellungen -> Optionen -> SVG-Pfade). Schließlich wird Ihr neues SVG-Objekt unter den anderen Standardobjekten angezeigt und kann bearbeitet werden.

Hoffe es kann helfen

Ich werde darauf näher eingehen, weil ich eine Weile gebraucht habe, um es zum Laufen zu bringen. Erstellen Sie Ihr Symbol, speichern Sie es als Inkscape-SVG und öffnen Sie es im Texteditor. Im unteren Codeblock sehen Sie; style = "fill: # 00a000; fill-opacity: 1; stroke: # 000000; stroke-width: 1; (...)" Ersetzen Sie diese Zeile durch; fill = "param (Füllung) #FFF" stroke = "param (Umriss) # 000" stroke-width = "param (Umrissbreite) 1" In meinen SVG-Dateien wird die Stillinie für jedes Objekt oder jede Form im SVG und angezeigt Das Ersetzen dieser Zeilen hat bei mir nicht funktioniert. Aber es unten in einer Inkscape-SVG zu machen, hat funktioniert. Ich habe meine Lösung und die Anweisungen hier für optimierte und einfache SVG-Formate ausprobiert, aber es hat nicht funktioniert. Ich hoffe, dies hilft. Inkscape 0.48, QGIS 2.12.0, NotePad ++

Es scheint ein Problem zu sein, wenn wir einen genauen Wert verwenden. Jedes Mal, wenn wir die Optionen öffnen, wird ein individueller Wert für Farbe oder Strich auf die Werte in der SVG zurückgesetzt. Dies kann durch Festlegen eines Wertes in den erweiterten Optionen behoben werden. Meine Tests haben mir gezeigt, dass es besser wäre, fill="param(fill)"statt fill="param(fill) #FFF"und so weiter in der SVG zu verwenden.

Eine weitere interessante Problemumgehung: Wenn Sie über eine SVG-Datei mit Vordergrund- und Hintergrundfarbe verfügen, können Sie die Konturfarbe als Füllhintergrundfarbe verwenden. Beachten Sie, dass Sie keine separate Umrissfarbe für die gesamte SVG-Datei verwenden können.

Danke euch allen. Es gibt hier einige großartige Tipps, die mich in die richtige Richtung weisen, aber keine hat mein spezielles Problem angesprochen, sodass ich dem Pot hinzufügen werde, was ich herausgefunden habe. Da es nicht für jeden Fall eine richtige Antwort zu geben scheint, möchte ich zunächst einen Vorschlag machen, um Ihre Ergebnisse so schnell wie möglich zu testen.

Schnelle Bearbeitungstests

• Verschieben Sie alle Ihre SVG-Symbole vorübergehend aus dem QGIS-SVG-Ordner.
• Erstellen Sie eine Kopie der SVG-Datei, an der Sie nur lesen möchten, damit Sie sie nicht überschreiben und eine bearbeitbare Version davon in den SVG-Ordner von QGIS legen.
• Öffne QGIS, lade eine Punktebene zum Arbeiten, öffne die Ebeneneigenschaften und wähle "SVG marker".
• Sie können auch mit der rechten Maustaste auf eine SVG-Datei klicken und das Standardprogramm "Öffnen mit" vorübergehend auf "Editor" setzen, damit Sie sie im Editor bearbeiten können, indem Sie darauf doppelklicken.

Mit diesem Setup können Sie sofort sehen, wie QGIS auf Ihre Änderungen reagiert. Lassen Sie die SVG-Datei im Editor und den Eigenschaftenbereich in QGIS geöffnet. Um die Ergebnisse einer Bearbeitung zu testen, drücken Sie einfach Strg + S, um sie im Editor zu speichern und zu QGIS zu wechseln. Ändern Sie zum erneuten Laden der SVG-Datei den Symbolebenentyp in einen anderen, und ändern Sie ihn dann wieder in SVG-Markierung. Es gibt auch nur einen, so dass Sie keine Probleme haben, ihn zu finden. Ich habe Dutzende von Bearbeitungen auf diese Weise sehr schnell getestet. Wenn Sie Probleme haben, das SVG nach einer Bearbeitung wieder in das Quellformular zu bringen, können Sie es einfach löschen und eine weitere Kopie erstellen.

SVG-Symbol bearbeitbar machen

Das Problem, das ich hatte, war, dass das spezifische Symbol, an dem ich arbeitete, nirgends die Wörter "style" oder "fill" enthielt, so dass ich Probleme hatte, herauszufinden, wo die Parameterzeile platziert werden sollte. Der von Martina beschriebene Inkscape-Trick hat dieses Problem gelöst, aber ich habe eine Reihe von Aufgaben zu erledigen, und ich wollte nicht jede in Inkscape öffnen und speichern, also habe ich mich für einen Versuch entschieden. Anhand des Codes konnte ich erkennen, dass sich die Versionsinformationen und Metadaten oben befanden und die Formanweisungen unten in Anführungszeichen standen, die am Anfang von <g><path d=(einige haben <g><g><path d=) und am Ende von begrenzt waren /></g></svg>. Nach ein wenig Experimentieren habe ich herausgefunden, dass die Parameterzeile zwischen pathund stehtd=funktionierte, aber das Symbol war im Auswahlfenster nicht sichtbar und das Symbol im Vorschaufenster oben war vollständig schwarz ausgefüllt. Das Problem mit den unsichtbaren Symbolen scheint ein Fehler gewesen zu sein. Ich habe es behoben, indem ich einen Opazitätsparameter hinzugefügt habe, den ich unten beschreiben werde. Es stellte sich heraus, dass die schwarze Füllung nur deshalb bestand, weil das Symbol nur 4 mm groß war und nur von der Kontur ausgefüllt wurde. Um dies zu beheben, habe ich die Symbolgröße auf 10 mm (in QGIS) und die Kontur auf 0,1 (in Notepad) erhöht.

Zusammenfassung

Wenn Ihr Symbol nirgendwo die Wörter "Stil" oder "Füllung" enthält, diese Zeile <g><path d=(oder <g><g><path d=) jedoch direkt vor den Formanweisungen, sollten Sie die Bearbeitungsparameter hinzufügen können, indem Sie die obige Zeile durch ersetzen<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

Wenn der Rand zu dick ist, können Sie ihn verkleinern, indem Sie die letzte Zahl in einen Bruchteil ändern, z <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

Wenn Sie Ihr Symbol halbtransparent machen möchten, können Sie dies tun, indem Sie die obige Zeile in diese Zeile ändern <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=. Der Opazitätswert kann zwischen 1 (vollständig undurchsichtig) und 0 (vollständig transparent) liegen, und Sie können Hundertstel oder sogar Tausendstel für zusätzliche Genauigkeit verwenden (z. B. 0,01). Die gleiche Regel gilt für die Randdicke.

Wenn Sie viele davon bearbeiten müssen, finden Sie Batch-Dateien hier in StackExchange, um den Such- und Ersetzungsprozess zu automatisieren.