création d'une map

[@lucard]

rien n'empèche de mettre un bitmap en "fond" de svg...

<svg height="100%" width="100%">

 <pattern id="pattern1" patternUnits="userSpaceOnUse" viewBox="0 0 256 256" width="256" height="256">

   <image xlink:href="http://www.tutorialsforblender3d.com/Textures/Wood-Boards/Textured/DryCrackedBoards.png" width="256" height="256"/>

  </pattern><g transform="scale (1 .5), translate (256 256)"><g transform="rotate(-45 256 256)">

  <rect x="0" y="0" width="256" height="256" fill="url(#pattern1)" stroke="YELLOW" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="-256" y="0" width="256" height="256" fill="url(#pattern1)" stroke="YELLOW" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="256" y="0" width="256" height="256" fill="url(#pattern1)" stroke="RED" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="0" y="256" width="256" height="256" fill="url(#pattern1)" stroke="GREEN" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="0" y="512" width="256" height="256" fill="url(#pattern1)" stroke="GREEN" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="-256" y="512" width="256" height="256" fill="url(#pattern1)" stroke="GREEN" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="-256" y="256" width="256" height="256" fill="url(#pattern1)" stroke="GREEN" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="256" y="256" width="256" height="256" fill="url(#pattern1)" stroke="BLUE" stroke-width="5px" stroke-dasharray="5,5"></rect>

  <rect x="256" y="512" width="256" height="256" fill="url(#pattern1)" stroke="BLUE" stroke-width="5px" stroke-dasharray="5,5"></rect></g></g>

</svg>

result : http://codepen.io/anon/pen/wtvAo