[Résolu] Svg non valide pour IcoMoon

Bonjour,

suite au récent tutoriel Créer une police d’icônes facilement à partir d’illustrations vectorielles, j’ai essayé d’importer sur IcoMoon un svg provenant de cette page, dont le code est le suivant :

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200px" height="120px" 
     viewBox="0 0 200 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
<title>Symbol of clouds of type H1 - Filaments of Cirrus (Ci)</title>
<desc>Symbol of clouds of type H1 - Filaments of Cirrus (Ci)</desc>
<desc>Made by user AnyFile of Wikimedia Commons on 2007-Oct-28.
Licenced in Public Domain </desc>
<path stroke="black" stroke-width="5" fill="none"
  stroke-linecap="round" stroke-linejoin="round"
  d="M20,100 h130 a40,40 0 0 0 0,-80" />
</svg>

IcoMoon ne sait pas hélas gérer les strokes.

J’ai donc écrit avec l’aide de Inkscape le code suivant :

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="200px"
   height="120px"
   viewBox="0 0 200 120"
   version="1.1"
   id="svg2"
   inkscape:version="0.48.2 r9819"
   sodipodi:docname="Ci2.svg">
  <metadata
     id="metadata16">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>Symbol of clouds of type H1 - Filaments of Cirrus (Ci)</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs14" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview12"
     showgrid="false"
     inkscape:zoom="4.7800418"
     inkscape:cx="148.6626"
     inkscape:cy="31.365445"
     inkscape:window-x="512"
     inkscape:window-y="418"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2" />
  <title
     id="title4">Symbol of clouds of type H1 - Filaments of Cirrus (Ci)</title>
  <desc
     id="desc6">Symbol of clouds of type H1 - Filaments of Cirrus (Ci)</desc>
  <desc
     id="desc8">Made by user AnyFile of Wikimedia Commons on 2007-Oct-28.
Licenced in Public Domain </desc>
  <rect
     style="fill:#000000"
     id="rect2993"
     width="130"
     height="5"
     x="20"
     y="97.5" />
  <path
     d="M 150 57.5 L 150 62.5 C 159.66498 62.5 167.5 70.335017 167.5 80 C 167.5 89.664983 159.66498 97.5 150 97.5 L 135.84375 97.5 C 139.7099 100.63292 144.63613 102.5 150 102.5 C 162.42641 102.5 172.5 92.426407 172.5 80 C 172.5 67.573593 162.42641 57.5 150 57.5 z "
     id="circle10" style="fill:#000000"
     />
  <circle
     cx="20"
     cy="100"
     r="2.5"
     id="circle14" style="fill:#000000"
     />
  <circle
     cx="150"
     cy="60"
     r="2.5"
     id="circle16" style="fill:#000000"
     />
</svg>

Quand j’importe ce fichier IcoMoon gère mal les superpositions d’objets. Quand 2 objets noirs se superposent sous IcoMoon l’intersection devient blanche alors que sous Inkscape le rendu est bon. Du coup c’est moi qui devient vert.

Est-ce que je peux contourner ce problème ?

Hello

Je n'ai pas Inkscape sous la main, donc j'avoue ne pas savoir comment créer les "compositions" comme sur Illustrator. Du coup j'ai pris sont SVG, l'ai ouvert sous Illustrator et ai utilisé l'outil "réunion" du Pathfinder. Il faudrait voir pour trouver l'équivalent Inkscape. Voilà le code final :

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
	 id="svg2" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docname="Ci2.svg" inkscape:version="0.48.2 r9819"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="120px"
	 viewBox="0 0 200 120" enable-background="new 0 0 200 120" xml:space="preserve">
<path d="M150,57.5c-1.381,0-2.5,1.119-2.5,2.5s1.119,2.5,2.5,2.5c9.665,0,17.5,7.835,17.5,17.5s-7.835,17.5-17.5,17.5h-14.156H20
	c-1.381,0-2.5,1.119-2.5,2.5s1.119,2.5,2.5,2.5h130c12.426,0,22.5-10.074,22.5-22.5S162.426,57.5,150,57.5z"/>
</svg>