Engraçado você ter perguntado isso, acabei de fazer isso recentemente para o site do meu trabalho e estava pensando em escrever um tutorial ... Veja como fazer isso com PHP / Imagick, que 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();
as etapas de substituição de cor regex podem variar dependendo do caminho svg xml e como os valores de id e cor são armazenados. Se você não quiser armazenar um arquivo no servidor, pode produzir a imagem como base 64, como
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(antes de usar limpar / destruir), mas ou seja, tem problemas com PNG como base64, então você provavelmente terá que imprimir base64 como jpeg
você pode ver um exemplo que fiz aqui para um mapa do território de vendas de um ex-empregador:
Iniciar: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
Terminar:
Editar
Desde que escrevi acima, criei 2 técnicas aprimoradas:
1) em vez de um loop regex para alterar o estado de preenchimento, use CSS para fazer regras de estilo como
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
e então você pode fazer uma única substituição de texto para injetar suas regras de css no svg antes de prosseguir com a criação de imagick jpeg / png. Se as cores não mudarem, certifique-se de que não haja nenhum estilo de preenchimento embutido nas tags de caminho substituindo o css.
2) Se você não precisa realmente criar um arquivo de imagem jpeg / png (e não precisa suportar navegadores desatualizados), você pode manipular o svg diretamente com jQuery. Você não pode acessar os caminhos svg ao incorporar o svg usando tags img ou object, então você terá que incluir diretamente o svg xml no html da sua página da web como:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
então mudar as cores é tão fácil quanto:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>