Це смішно, що ви це запитували, я недавно це робив для сайту своєї роботи, і я думав, що слід написати підручник ... Ось як це зробити за допомогою PHP / Imagick, який використовує 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();
кроки заміни регулярного вирівнювання можуть змінюватись залежно від шляху xml до svg та того, як зберігаються значення id & color. Якщо ви не хочете зберігати файл на сервері, ви можете вивести зображення як базове 64
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(перед тим, як використовувати очистити / знищити), але тобто є проблеми з PNG як base64, тому вам, ймовірно, доведеться виводити base64 як jpeg
ви можете побачити приклад, який я зробив для карти території колишнього роботодавця:
Початок: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
.svg)
Фініш: 
Редагувати
З моменту написання вищесказаного я придумав 2 вдосконалених методики:
1) замість циклу регулярних виразів, щоб змінити стан заливки, використовуйте CSS для створення стильових правил
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
і тоді ви можете зробити заміну одного тексту, щоб вставити свої правила css в svg, перш ніж приступити до створення imagick jpeg / png. Якщо кольори не змінюються, переконайтеся, що у ваших тегах шляху, що перекривають css, у вас немає стилів вбудованого вбудованого стилю.
2) Якщо вам не потрібно створювати файл зображення jpeg / png (і не потрібно підтримувати застарілі браузери), ви можете маніпулювати svg безпосередньо за допомогою jQuery. Ви не можете отримати доступ до шляхів до svg під час вбудовування svg за допомогою тегів img або об’єкта, тому вам доведеться безпосередньо включити svg xml у свій html-сторінку веб-сторінки, наприклад:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
то змінити кольори так просто, як:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>