Como criar símbolos svg que possuem cor de preenchimento modificável, cor e largura do traçado?

Eu quero criar alguns símbolos svg para o Qgis usando o Inkscape, esses símbolos devem ter atributos conforme descrito na pergunta. Nos últimos dois dias, tenho experimentado as instruções do Sourcepole e imitamos alguns símbolos que vêm com qgis que possuem atributos desejados sem sucesso.

Finalmente, experimentei a forma mais simples de símbolo: criei um svg que contém apenas um círculo no Inkscape e tentei modificá-lo.

O arquivo original ( circle.svg ) tem esta linha:

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

Eu modifiquei para:

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

Salvei como circle_modified.svg e o selecionei como símbolo de ponto, mas o Qgis não pôde alterar os três parâmetros ao mesmo tempo.

O que fiz de errado ou devo fazer de diferente?

Meu sistema: Qgis 1.8.0 no Ubuntu 12.04 64 bits, Inkscape 0.48, editor de texto Gedit 3.4.1.

Para criar símbolos SVG com cor de preenchimento modificável , cor do traçado e largura do traçado no QGIS, você deve substituir o atributo de estilo do elemento path com esses 3 atributos:

• fill = "param (preenchimento) #FFF"
• stroke = "param (estrutura de tópicos) # 000"
• stroke-width = "param (largura do contorno) 1"

Se você estiver usando o InkScape, depois de escrever o novo arquivo SVG, edite o arquivo e substitua toda a linha que começa com estilo:

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

com a seguinte linha:

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

Eu também queria fazer isso desde que descobri como adicionar símbolos SVG ontem , mas todos eram pretos. A resposta dada pelo jgrocha funciona - eu queria votar, mas, depois de entrar no fórum GIS, preciso primeiro obter alguma reputação!

Também encontrei esta página que confirma a resposta: SÍMBOLOS SVG EM QGIS COM CORES MODIFICÁVEIS

Para ter a possibilidade de alterar as cores do marcador, precisamos adicionar os espaços reservados 'param (fill)' para a cor do preenchimento, 'param (outline)' para a cor do contorno e 'param (width do contorno)' para a largura do traçado. Esses espaços reservados podem opcionalmente ser seguidos por um valor padrão:

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

Obrigado!

Parece valer a pena fornecer uma resposta simples sobre os conceitos básicos de SVGs para acompanhar os detalhes fornecidos aqui sobre detalhes sobre software ...

Um arquivo SVG é apenas um arquivo de texto. O final do arquivo será .svg, mas pode ser aberto em um editor de texto o mesmo que um arquivo com o final .txt

Um simples arquivo svg se parece com isso:

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

Neste, você pode ver que as cores são definidas pelos parâmetros (onde os pontos são substituídos por caracteres entre 0-9 ou AF):

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

E a largura do traço é definida por

stroke-width="..."

É possível adicionar o seguinte, usando o editor de texto, para substituir os valores definidos que você escolher no SVG ..., possibilitando que os valores sejam definidos pelo QGIS. O QGIS entende um valor para 'param (fill)' - e os outros valores 'param (...)' - pois esses são definidos pelo próprio QGIS.

Cor de preenchimento: fill="param(fill) #FFF"

Cor do contorno / linha: stroke="param(outline) #000"

Estrutura de tópicos / largura da linha: stroke-width="param(outline-width) 1"

Opacidade de preenchimento: fill-opacity="param(fill-opacity)"

Esboço / opacidade da linha: stroke-opacity="param(outline-opacity)"

Observe que não há nada que o impeça de usar os valores 'param (...)' em locais um pouco estranhos - por exemplo, você pode usar o valor 'param (opacidade de preenchimento)' para definir uma cor de preenchimento em um bit do Arquivo SVG, mas uma cor de traço / linha em outro bit do SVG.

Na caixa de diálogo QGIS compositor ou símbolo de estilo, as configurações das cores SVG são bastante óbvias. A opacidade de preenchimento e traçado / linha é definida como parte das configurações de cores. A configuração do traço / largura da linha é óbvia.

Por fim, dois pontos

Primeiro, observe que enquanto estiver em um SVG, é válido definir as cores como uma coleção de atributos da seguinte forma:

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

Isso parece não funcionar corretamente se você estiver incluindo parâmetros conforme descrito aqui.

Segundo, ao usar software como o Illustrator ou o Inkscape, muitos atributos adicionais podem ser adicionados ao texto SVG por este software. Se você sabe o que está fazendo e entende os conceitos básicos de um SVG, como acima, ele pode tornar a vida mais simples se você se livrar desse texto adicional. Em particular, você pode achar que as cores são definidas através da definição de estilos, em vez de item por item.

Eu também tive o mesmo problema, mas depois de algumas tentativas, finalmente funcionou. Estou escrevendo aqui o procedimento esperando que seja de alguma ajuda. Eu criei uma espiral simples no inkscape e salvei como svg. Então eu abri em um editor de texto (por exemplo, Notepad ++) e a entrada "style" ocorreu duas vezes no meu código svg. Primeiro neste pedaço:

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

E então aqui:

<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 fazer o código funcionar para ter uma espiral svg editável no qgis, removi completamente a primeira entrada "style" do primeiro bloco de código:

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

E substitua a segunda entrada "estilo" no segundo pedaço de código da seguinte maneira:

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

"# 000" e "#FFF" são duas cores padrão para o preenchimento e o contorno, enquanto "1" é a largura padrão do contorno, se não for especificado de maneira diferente. Após salvar essas alterações, você pode armazenar o svg no caminho correto, o especificado pelo QGis (dependendo da versão, pode ser encontrado em Configurações -> Opções -> caminhos SVG). Finalmente, seu novo objeto svg aparecerá entre os outros objetos padrão e será editável.

Espero que possa ajudar

Vou expandir isso porque levei um tempo para fazê-lo funcionar. Crie seu símbolo e salve-o como um Inkscape SVG e abra no editor de texto. No bloco de código inferior, você verá; style = "fill: # 00a000; opacidade de preenchimento: 1; traço: # 000000; largura do traçado: 1; (...)" Substitua esta linha por; fill = "param (fill) #FFF" stroke = "param (estrutura) # 000" stroke-width = "param (estrutura de tópicos) 1" Nos meus arquivos SVG, a linha de estilo aparece para cada entidade ou forma no svg e substituir essas linhas não funcionou para mim; mas fazê-lo na parte inferior de um Inkscape SVG funcionou. Tentei minha solução e as instruções aqui nos formatos SVG otimizado e simples, mas não funcionou, espero que ajude. Inkscape 0.48, QGIS 2.12.0, NotePad ++

Parece ser um problema, se usarmos um valor exato. Sempre que abrimos as opções, um valor individual para cor ou traçado é redefinido para os valores no SVG. Isso pode ser corrigido definindo um valor nas opções avançadas. Meus testes mostraram-me, seria melhor usar fill="param(fill)"em vez de fill="param(fill) #FFF"e assim por diante no SVG.

Outra solução interessante: se você tiver um SVG com cor de primeiro plano e plano de fundo, poderá usar a cor do traçado como cor de fundo do preenchimento. Observe que você não pode usar uma cor de contorno separada para todo o SVG.

Obrigado a todos. Há algumas ótimas dicas aqui e elas me apontaram na direção certa, mas nenhuma abordou meu problema específico, então adicionarei o que descobri ao pote. Como não parece haver uma resposta certa para todos os casos, gostaria de oferecer uma sugestão para testar seus resultados o mais rápido possível.

Teste de edição rápida

• Mova temporariamente todos os seus ícones svg para fora da pasta svg QGIS.
• Faça uma cópia do arquivo svg no qual deseja trabalhar somente leitura, para não substituí-lo e coloque uma versão editável na pasta QGIS svg.
• Abra o QGIS, carregue uma camada de ponto para trabalhar, abra as propriedades da camada e selecione "Marcador SVG".
• Além disso, você pode clicar com o botão direito do mouse em um arquivo svg e definir temporariamente o programa "Abrir com" padrão para o Bloco de Notas para que você possa apenas clicar duas vezes neles para editá-los no Bloco de Notas.

Com essa configuração, você pode ver imediatamente como o QGIS responde às suas edições. Deixe o arquivo svg aberto no Bloco de Notas e o painel de propriedades aberto no QGIS. Para testar os resultados de uma edição, basta pressionar Ctrl + S para salvá-lo no Bloco de Notas e passar para QGIS. Para recarregar o svg, altere o tipo de camada de símbolo para qualquer outra coisa e, em seguida, altere-o novamente para o marcador SVG. Também há apenas um lá, então você não terá problemas para encontrá-lo. Testei dezenas de edições muito rapidamente assim. Se você tiver algum problema para obter o svg de volta ao formulário de origem após uma edição, basta excluí-lo e fazer outra cópia.

Tornando o ícone SVG editável

O problema que tive foi que o ícone específico em que eu estava trabalhando não tinha as palavras "estilo" ou "preenchimento" em nenhum lugar, por isso tive problemas para descobrir onde colocar a linha de parâmetro. O truque do Inkscape descrito por Martina resolveu esse problema, mas tenho um monte deles para fazer e não queria abrir e salvar cada um no Inkscape, por isso decidi tentar tentativa e erro. Observando o código, pude ver que as informações e os metadados da versão estavam na parte superior e as instruções de forma na parte inferior, entre aspas, delimitadas no início por <g><path d=(algumas têm <g><g><path d=) e no final por /></g></svg>. Depois de algumas experiências, descobri que colocar a linha de parâmetro entre pathed=funcionou, mas o ícone estava invisível no painel seletor e o ícone no painel de visualização na parte superior foi totalmente preenchido em preto. O problema do ícone invisível parece ter sido um bug. Corrigi-o adicionando um parâmetro de opacidade que descreverei abaixo. Verificou-se que o preenchimento preto era apenas porque o ícone tinha apenas 4 mm e foi preenchido apenas pelo contorno. Para corrigir isso, aumentamos o tamanho do ícone em até 10 mm (no QGIS) e aumentamos o contorno para 0,1 (no bloco de notas).

Sumário

Se o seu ícone não tiver as palavras "estilo" ou "preenchimento" em nenhum lugar, mas tiver esta linha <g><path d=(ou <g><g><path d=) logo antes das instruções de forma, você poderá adicionar os parâmetros de edição substituindo a linha acima por<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

Se a borda for muito grossa, você pode encolher alterando o último número para uma fração, por exemplo <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

Se você deseja tornar seu ícone semitransparente, faça isso alterando a linha acima para esta <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=. O valor da opacidade pode ser de 1 (totalmente opaco) a 0 (totalmente transparente) e você pode usar centésimos ou até milésimos para precisão adicional (por exemplo, 0,01). A mesma regra vale para a espessura da borda.

Se você tiver muitos deles para editar, poderá encontrar arquivos em lote aqui no StackExchange para automatizar o processo de pesquisa e substituição.