È divertente che tu l'abbia chiesto, l'ho appena fatto di recente per il sito del mio lavoro e stavo pensando di scrivere un tutorial ... Ecco come farlo con PHP / Imagick, che usa 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();
i passaggi regex sostituzione del colore possono variare a seconda del percorso svg xml e di come vengono memorizzati i valori di id e colore. Se non vuoi memorizzare un file sul server, puoi produrre l'immagine come 64 base come
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(prima di usare cancella / distruggi) ma ha problemi con PNG come base64 quindi probabilmente dovresti generare base64 come jpeg
puoi vedere un esempio qui che ho fatto per la mappa del territorio di vendita di un ex datore di lavoro:
Inizio: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
.svg)
Finire: 
modificare
Da quando ho scritto quanto sopra, ho escogitato 2 tecniche migliorate:
1) invece di un ciclo regex per cambiare lo stato di riempimento, usa i CSS per creare regole di stile come
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
e poi puoi fare una singola sostituzione del testo per iniettare le tue regole CSS nell'SVG prima di procedere con la creazione di imagick jpeg / png. Se i colori non cambiano, assicurati di non avere stili di riempimento in linea nei tag del percorso che sovrascrivono il css.
2) Se non è necessario creare effettivamente un file immagine jpeg / png (e non è necessario supportare browser obsoleti), è possibile manipolare lo svg direttamente con jQuery. Non puoi accedere ai percorsi svg quando incorpori il file svg utilizzando i tag img o object, quindi dovrai includere direttamente l'xml svg nella tua pagina web html come:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
quindi cambiare i colori è facile come:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>