C'est drôle que vous ayez posé cette question, je viens de le faire récemment pour le site de mon travail et je pensais que je devrais écrire un tutoriel ... Voici comment le faire avec PHP / Imagick, qui utilise ImageMagick:
$usmap = '/path/to/blank/us-map.svg';
$im = new Imagick();
$svg = file_get_contents($usmap);
/*loop to color each state as needed, something like*/
$idColorArray = array(
"AL" => "339966"
,"AK" => "0099FF"
...
,"WI" => "FF4B00"
,"WY" => "A3609B"
);
foreach($idColorArray as $state => $color){
//Where $color is a RRGGBB hex value
$svg = preg_replace(
'/id="'.$state.'" style="fill:#([0-9a-f]{6})/'
, 'id="'.$state.'" style="fill:#'.$color
, $svg
);
}
$im->readImageBlob($svg);
/*png settings*/
$im->setImageFormat("png24");
$im->resizeImage(720, 445, imagick::FILTER_LANCZOS, 1); /*Optional, if you need to resize*/
/*jpeg*/
$im->setImageFormat("jpeg");
$im->adaptiveResizeImage(720, 445); /*Optional, if you need to resize*/
$im->writeImage('/path/to/colored/us-map.png');/*(or .jpg)*/
$im->clear();
$im->destroy();
les étapes de remplacement des couleurs regex peuvent varier en fonction du chemin svg xml et de la façon dont vos valeurs d'identifiant et de couleur sont stockées. Si vous ne souhaitez pas stocker de fichier sur le serveur, vous pouvez générer l'image en base 64 comme
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(avant d'utiliser clear / destroy) mais c'est-à-dire a des problèmes avec PNG comme base64 donc vous devrez probablement sortir base64 comme jpeg
vous pouvez voir un exemple ici que j'ai fait pour la carte du territoire de vente d'un ancien employeur:
Début: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
.svg)
Terminer: 
Éditer
Depuis l'écriture de ce qui précède, j'ai mis au point 2 techniques améliorées:
1) au lieu d'une boucle regex pour changer l'état de remplissage, utilisez CSS pour créer des règles de style comme
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
puis vous pouvez faire un seul remplacement de texte pour injecter vos règles css dans le svg avant de procéder à la création imagick jpeg / png. Si les couleurs ne changent pas, assurez-vous qu'aucun style de remplissage en ligne dans vos balises de chemin ne remplace le css.
2) Si vous n'avez pas à créer un fichier image jpeg / png (et que vous n'avez pas besoin de prendre en charge les navigateurs obsolètes), vous pouvez manipuler le svg directement avec jQuery. Vous ne pouvez pas accéder aux chemins svg lors de l'incorporation du svg à l'aide de balises img ou object, vous devrez donc inclure directement le svg xml dans votre page Web HTML comme:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
puis changer les couleurs est aussi simple que:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>