Convert SVG image to PNG with PHP -

i'm working on web project involves dynamically generated map of coloring different states based on set of data.

this svg file gives me blank map of , easy change color of each state. difficulty ie browsers don't support svg in order me use handy syntax svg offers, i'll need convert jpg.

ideally, i'd gd2 library use imagemagick. have absolutely no clue how this.

any solution allow me dynamically change colors of states on map of considered. key is easy change colors on fly , cross browser. php/apache solutions only, please.

that's funny asked this, did work's site , thinking should write tutorial... here how imagemagick:

$usmap = '/path/to/blank/us-map.svg'; $im = new imagick(); $svg = file_get_contents($usmap);  /*loop color each state needed, like*/  $idcolorarray = array(      "al" => "339966"     ,"ak" => "0099ff"     ...     ,"wi" => "ff4b00"     ,"wy" => "a3609b" );  foreach($idcolorarray $state => $color){ //where $color 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 need resize*/  /*jpeg*/ $im->setimageformat("jpeg"); $im->adaptiveresizeimage(720, 445); /*optional, if need resize*/  $im->writeimage('/path/to/colored/us-map.png');/*(or .jpg)*/ $im->clear(); $im->destroy(); 

the steps regex color replacement may vary depending on svg path xml , how id & color values stored. if don't want store file on server, can output image base 64 like

<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '"  />';?> 

(before use clear/destroy) ie has issues png base64 you'd have output base64 jpeg

you can see example here did former employer's sales territory map:

start: https://upload.wikimedia.org/wikipedia/commons/1/1a/blank_us_map_(states_only).svg

finish:

edit

since writing above, i've come 2 improved techniques:

1) instead of regex loop change fill on state , use css make style rules

<style type="text/css"> #ca,#fl,hi{     fill:blue; } #al, #ny, #nm{     fill:#cc6699; } /*etc..*/ </style> 

and can single text replace inject css rules svg before proceeding imagick jpeg/png creation. if colors don't change, check make sure don't have inline fill styles in path tags overriding css.

2) if don't have create jpeg/png image file (and don't need support outdated browsers), can manipulate svg directly jquery. can't access svg paths when embedding svg using img or object tags, you'll have directly include svg xml in webpage html like:

<div> <?php echo file_get_contents('/path/to/blank/us-map.svg');?> </div> 

then changing colors easy as:

<script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript">     $('#ca').css('fill', 'blue');     $('#ny').css('fill', '#ff0000'); </script>