Das ist lustig, dass du das gefragt hast. Ich habe das erst kürzlich für die Website meiner Arbeit gemacht und dachte, ich sollte ein Tutorial schreiben ... So geht's mit PHP / Imagick, das ImageMagick verwendet:
$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();
Die Schritte zum Ersetzen von Regex-Farben können abhängig vom SVG-Pfad xml und der Art und Weise, wie Ihre ID- und Farbwerte gespeichert werden, variieren. Wenn Sie keine Datei auf dem Server speichern möchten, können Sie das Image als Basis 64 ausgeben
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(bevor Sie clear / destroy verwenden), hat aber Probleme mit PNG als base64, sodass Sie base64 wahrscheinlich als JPEG ausgeben müssten
Sie können hier ein Beispiel sehen, das ich für die Verkaufsgebietskarte eines ehemaligen Arbeitgebers gemacht habe:
Start: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
.svg)
Fertig: 
Bearbeiten
Seit ich das Obige geschrieben habe, habe ich mir zwei verbesserte Techniken ausgedacht:
1) Verwenden Sie anstelle einer Regex-Schleife, um den Füllstatus zu ändern, CSS, um Stilregeln wie zu erstellen
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
und dann können Sie einen einzelnen Text ersetzen, um Ihre CSS-Regeln in das SVG einzufügen, bevor Sie mit der Erstellung des Imagick-JPEG / PNG fortfahren. Wenn sich die Farben nicht ändern, stellen Sie sicher, dass Ihre Pfad-Tags keine Inline-Füllstile enthalten, die das CSS überschreiben.
2) Wenn Sie keine JPEG- / PNG-Bilddatei erstellen müssen (und keine veralteten Browser unterstützen müssen), können Sie das SVG direkt mit jQuery bearbeiten. Sie können nicht auf die SVG-Pfade zugreifen, wenn Sie die SVG mithilfe von IMG- oder Objekt-Tags einbetten. Daher müssen Sie die SVG-XML direkt in Ihre HTML-Webseite aufnehmen, z.
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
Dann ist das Ändern der Farben so einfach wie:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>