Es gracioso que hayas preguntado esto, acabo de hacer esto recientemente para el sitio de mi trabajo y estaba pensando que debería escribir un tutorial ... Así es como se hace con 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();
los pasos de reemplazo de color de expresiones regulares pueden variar según la ruta de svg xml y cómo se almacenan los valores de identificación y color. Si no desea almacenar un archivo en el servidor, puede generar la imagen como base 64 como
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(antes de usar borrar / destruir) pero es decir, tiene problemas con PNG como base64, por lo que probablemente tenga que generar base64 como jpeg
puede ver un ejemplo aquí que hice para el mapa del territorio de ventas de un antiguo empleador:
Inicio: https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_(states_only).svg
Terminar:
Editar
Desde que escribí lo anterior, se me ocurrieron 2 técnicas mejoradas:
1) en lugar de un bucle de expresiones regulares para cambiar el relleno en el estado, use CSS para hacer reglas de estilo como
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
y luego puede hacer un solo reemplazo de texto para inyectar sus reglas css en el svg antes de continuar con la creación de imagick jpeg / png. Si los colores no cambian, verifique que no tenga ningún estilo de relleno en línea en sus etiquetas de ruta que anulen el CSS.
2) Si no tiene que crear un archivo de imagen jpeg / png (y no necesita admitir navegadores obsoletos), puede manipular el svg directamente con jQuery. No puede acceder a las rutas de svg cuando incrusta el svg usando img o etiquetas de objeto, por lo que tendrá que incluir directamente el svg xml en su página web html como:
<div>
<?php echo file_get_contents('/path/to/blank/us-map.svg');?>
</div>
luego cambiar los colores es tan fácil como:
<script type="text/javascript" src="/path/to/jquery.js"></script>
<script type="text/javascript">
$('#CA').css('fill', 'blue');
$('#NY').css('fill', '#ff0000');
</script>