Comment créer des symboles svg ayant une couleur de remplissage, une couleur et une largeur de trait modifiables?

Je souhaite créer des symboles svg pour Qgis à l'aide d'Inkscape. Ces symboles doivent avoir les attributs décrits dans la question. Au cours des deux derniers jours, j'ai expérimenté selon les instructions de Sourcepole et imité certains symboles fournis avec des qgis qui ont des attributs souhaités sans succès.

Finalement, j'ai expérimenté la forme de symbole la plus simple: j'ai créé un svg qui ne contient qu'un cercle dans Inkscape et j'ai essayé de le modifier.

Le fichier d'origine ( circle.svg ) a cette ligne:

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

Je l'ai modifié 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"

Enregistré en tant que circle_modified.svg et sélectionné comme symbole de point, mais Qgis ne peut pas modifier les trois paramètres en même temps.

Qu'ai-je fait de mal ou devrais-je faire différemment?

Mon système: Qgis 1.8.0 sur Ubuntu 12.04 64 bits, Inkscape 0.48, l'éditeur de texte Gedit 3.4.1.

Pour créer des symboles SVG avec une couleur de remplissage , une couleur et une largeur de trait modifiables dans QGIS, vous devez remplacer l' attribut style de l' élément de chemin par ces 3 attributs:

• fill = "param (fill) #FFF"
• accident vasculaire cérébral = "param (contour) # 000"
• stroke-width = "param (contour-width) 1"

Si vous utilisez InkScape, après avoir écrit le nouveau fichier SVG, modifiez le fichier et remplacez toute la ligne commençant par le style:

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

avec la ligne suivante:

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

Il semble utile de fournir une réponse simple sur les bases des SVG pour aller aux côtés des détails fournis ici sur les spécificités des logiciels ...

Un fichier SVG est juste un fichier texte. Le fichier se terminant sera .svg mais il peut être ouvert dans un éditeur de texte de la même façon qu'un fichier avec l'extension .txt

Un simple fichier svg ressemble à ceci:

<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 cela, vous pouvez voir que les couleurs sont définies par les paramètres (où les points sont remplacés par des caractères compris entre 0 et 9 ou AF):

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

Et la largeur du trait est définie par

stroke-width="..."

Les éléments suivants peuvent être ajoutés, à l'aide de l'éditeur de texte, pour remplacer les valeurs définies de votre choix dans le fichier SVG ..., ce qui permet de définir les valeurs avec QGIS. QGIS comprend une valeur pour 'param (remplissage)' - et les autres valeurs 'param (...)' - telles qu'elles sont définies par QGIS lui-même.

Couleur de remplissage: fill="param(fill) #FFF"

Couleur de contour / ligne: stroke="param(outline) #000"

Contour / largeur de trait: stroke-width="param(outline-width) 1"

Remplir l'opacité: fill-opacity="param(fill-opacity)"

Opacité contour / ligne: stroke-opacity="param(outline-opacity)"

Notez que rien ne vous empêche d'utiliser les valeurs 'param (...)' dans des endroits légèrement bizarres - vous pouvez par exemple utiliser la valeur 'param (fill-opacity)' pour définir une couleur de remplissage dans un bit de la Fichier SVG, mais couleur de trait / ligne dans un autre bit du fichier SVG.

Dans le dialogue de composition QGIS ou de symbole de style, les réglages des couleurs SVG sont assez évidents. L'opacité du remplissage et des traits / lignes est définie dans les paramètres de couleur. Le paramètre de trait / largeur de trait est évident.

Enfin deux points

Tout d'abord, notez que dans un fichier SVG, il est valide de définir les couleurs comme une collection d'attributs, comme ceci:

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

Cela ne semble pas fonctionner correctement si vous incluez les paramètres décrits ici.

Deuxièmement, lorsque vous utilisez un logiciel comme Illustrator ou Inkscape, ce logiciel permet d'ajouter de nombreux attributs au texte SVG. Si vous savez ce que vous faites et comprenez les bases d'un SVG comme ci-dessus, vous simplifierez la vie si vous supprimez ce texte supplémentaire. En particulier, vous constaterez peut-être que les couleurs sont définies par la définition des styles plutôt que par élément.

Je voulais aussi faire cela depuis que j'ai découvert comment ajouter des symboles SVG hier , mais ils étaient tous noirs. La réponse donnée par jgrocha fonctionne - je voulais voter, mais juste après avoir rejoint le forum GIS, je dois d'abord obtenir une certaine réputation!

J'ai aussi trouvé cette page qui confirme la réponse: SYMBOLES SVG DANS QGIS AVEC COULEURS MODIFIABLES

Pour avoir la possibilité de changer les couleurs du marqueur, nous devons ajouter les espaces réservés 'param (remplissage)' pour la couleur de remplissage, 'param (contour)' pour la couleur de contour et 'param (contour-largeur)' pour la largeur du trait. Ces espaces réservés peuvent éventuellement être suivis d'une valeur par défaut:

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

Merci!

J'ai également eu le même problème, mais après quelques tentatives, cela a finalement fonctionné. J'écris ici la procédure en espérant qu'elle vous sera utile. J'ai créé une simple spirale dans inkscape et l'ai enregistrée au format svg. Ensuite, je l'ai ouvert dans un éditeur de texte (par exemple, Notepad ++) et l'entrée "style" est apparue deux fois dans mon code svg. D'abord dans ce morceau:

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

Et puis ici:

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

Pour que le code fonctionne afin d'avoir une spirale de svg éditable dans qgis, j'ai complètement supprimé la première entrée "style" du premier morceau de code:

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

Et remplacez la deuxième entrée "style" dans le deuxième bloc de code comme suit:

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

"# 000" et "#FFF" sont deux couleurs par défaut pour le remplissage et le contour, tandis que "1" est la largeur du contour par défaut, à moins d'indication contraire. Après avoir enregistré ces modifications, vous pouvez stocker le fichier svg dans le chemin correct, spécifié par QGis (selon la version, disponible dans Paramètres -> Options -> Chemins SVG). Enfin, votre nouvel objet svg apparaîtra parmi les autres objets par défaut et sera éditable.

J'espère que ça peut aider

Je vais développer cela car il m'a fallu un certain temps pour que cela fonctionne. Créez votre symbole, enregistrez-le sous Inkscape SVG et ouvrez-le dans l’éditeur de texte. Dans le bloc de code inférieur, vous verrez; style = "fill: # 00a000; fill-opacity: 1; stroke: # 000000; stroke-width: 1; (...)" Remplace cette ligne par; fill = "param (fill) #FFF" stroke = "param (contour) # 000" stroke-width = "param (width-width) 1" Dans mes fichiers SVG, la ligne de style apparaît pour chaque entité ou forme du svg et le remplacement de ces lignes n'a pas fonctionné pour moi; mais le faire en bas sur un Inkscape SVG a fonctionné. J'ai essayé ma solution et les instructions ici sur les formats SVG optimisé et standard, mais cela n'a pas fonctionné. J'espère que cela aidera. Inkscape 0.48, QGIS 2.12.0, Bloc-notes ++

Cela semble être un problème si nous utilisons une valeur exacte. Chaque fois que nous ouvrons les options, une valeur individuelle pour la couleur ou le trait est réinitialisée sur celles du SVG. Cela peut être corrigé en définissant une valeur dans les options avancées. Mes tests m'ont montré qu'il serait préférable d'utiliser à la fill="param(fill)"place fill="param(fill) #FFF"et ainsi de suite dans le SVG.

Autre solution intéressante: si vous avez un fichier SVG avec une couleur de premier plan et d’arrière-plan, vous pouvez utiliser la couleur de trait comme couleur de fond de remplissage. Notez que vous ne pouvez pas utiliser une couleur de contour distincte pour l'ensemble du fichier SVG.

Merci à tous. Il y a quelques bons conseils ici et ils m'ont orienté dans la bonne direction mais aucun d'entre eux n'a abordé mon problème spécifique, alors j'ajouterai ce que j'ai calculé au pot. Comme il ne semble pas y avoir une seule bonne réponse pour chaque cas, je voudrais tout d'abord suggérer de tester vos résultats le plus rapidement possible.

Test d'édition rapide

• Déplacez temporairement toutes vos icônes svg du dossier svg de QGIS.
• Faites une copie du fichier svg sur lequel vous souhaitez travailler en lecture seule afin de ne pas l'écraser et mettez une version éditable de celui-ci dans le dossier QGIS svg.
• Ouvrez QGIS, chargez un calque de points à utiliser, ouvrez les propriétés du calque et sélectionnez "Marqueur SVG".
• Vous pouvez également cliquer avec le bouton droit de la souris sur un fichier svg et définir temporairement le programme "Ouvrir avec" par défaut sur Notepad afin que vous puissiez simplement double-cliquer dessus pour les éditer dans le Bloc-notes.

Avec cette configuration, vous pouvez immédiatement voir comment QGIS répond à vos modifications. Laissez le fichier svg ouvert dans le Bloc-notes et le volet de propriétés ouvert dans QGIS. Pour tester les résultats d'une édition, appuyez simplement sur Ctrl + S pour l'enregistrer dans le Bloc-notes et basculez vers QGIS. Pour recharger le svg, changez le type de couche de symbole en autre chose, puis redéfinissez-le en marqueur SVG. Il y en a aussi un seul là-bas, vous n'avez donc aucun mal à le trouver. J'ai testé des dizaines de modifications très rapidement comme ça. Si vous ne parvenez pas à récupérer le fichier svg dans le formulaire source après une modification, vous pouvez simplement le supprimer et en effectuer une autre copie.

Rendre l'icône SVG modifiable

Le problème que j'ai eu est que l'icône spécifique sur laquelle je travaillais ne portait les mots "style" ou "remplissage" nulle part, donc j'ai eu du mal à savoir où placer la ligne de paramètre. L'astuce d'Inkscape décrite par Martina a résolu ce problème, mais j'en ai un bon nombre à faire et je ne voulais pas ouvrir et sauvegarder chacun dans Inkscape, alors j'ai décidé d'essayer par essais. En regardant le code, j'ai pu constater que les informations de version et les métadonnées se trouvaient en haut et que les instructions de forme se trouvaient en bas entre guillemets qui étaient délimités au début par <g><path d=(certains ont <g><g><path d=) et à la fin par /></g></svg>. Après un peu d’expérimentation, j’ai compris que mettre la ligne de paramètre entre pathetd=mais l’icône était invisible dans le volet de sélection et l’icône du volet de prévisualisation en haut était entièrement remplie en noir. Le problème de l'icône invisible semble avoir été un bug. Je l'ai corrigé en ajoutant un paramètre d'opacité que je décrirai ci-dessous. Il s’est avéré que le remplissage noir était dû au fait que l’icône n’était que de 4 mm et qu’elle était remplie uniquement par le contour. Pour résoudre ce problème, j'ai modifié la taille de l'icône jusqu'à 10 mm (dans QGIS), puis le contour à 0,1 (dans le bloc-notes).

Sommaire

Si votre icône ne contient pas les mots "style" ou "remplissage", mais qu'elle comporte cette ligne <g><path d=(ou <g><g><path d=) juste avant les instructions de forme, vous devriez pouvoir ajouter les paramètres d'édition en remplaçant la ligne ci-dessus par<g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=

Si la bordure est trop épaisse, vous pouvez la réduire en remplaçant le dernier chiffre par une fraction, par exemple <g><path fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 0.5" d=

Si vous souhaitez rendre votre icône semi-transparente, vous pouvez le faire en remplaçant la ligne ci-dessus par celle-ci <g><path style="opacity:0.5;fill:param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1" d=. La valeur d'opacité peut aller de 1 (totalement opaque) à 0 (totalement transparent) et vous pouvez utiliser des centièmes, voire des millièmes, pour une précision supplémentaire (par exemple, 0,01). La même règle s'applique à l'épaisseur de la bordure.

Si vous en avez beaucoup à modifier, vous pouvez trouver des fichiers de commandes ici sur StackExchange pour automatiser le processus de recherche et de remplacement.