यह मजेदार है कि आपने यह पूछा, मैंने अभी हाल ही में अपने काम की साइट के लिए यह किया था और मैं सोच रहा था कि मुझे एक ट्यूटोरियल लिखना चाहिए ... यहां बताया गया है कि इसे PHP / इमेजिक के साथ कैसे करना है, जो 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();
चरण रेगेक्स रंग प्रतिस्थापन svg पथ xml के आधार पर भिन्न हो सकता है और आप आईडी और रंग मूल्यों को कैसे संग्रहीत करते हैं। यदि आप सर्वर पर फाइल स्टोर नहीं करना चाहते हैं, तो आप इमेज को बेस 64 की तरह आउटपुट कर सकते हैं
<?php echo '<img src="data:image/jpg;base64,' . base64_encode($im) . '" />';?>
(इससे पहले कि आप स्पष्ट / नष्ट का उपयोग करें), लेकिन आधार के रूप में PNG के साथ मुद्दों है तो आप शायद jpeg के रूप में base64 उत्पादन करना होगा
आप यहां एक उदाहरण देख सकते हैं जो मैंने पूर्व नियोक्ता के बिक्री क्षेत्र के नक्शे के लिए किया था:
प्रारंभ: 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>
और फिर आप काल्पनिक jpeg / png निर्माण के साथ आगे बढ़ने से पहले अपने css नियमों को svg में इंजेक्ट करने के लिए एक एकल पाठ कर सकते हैं। यदि रंग नहीं बदलते हैं, तो यह सुनिश्चित करने के लिए जांचें कि आपके पास अपने रास्ते के टैग में कोई भी इनलाइन भरने की शैली नहीं है, सीएसएस को ओवरराइड करें।
2) यदि आपको वास्तव में jpeg / png इमेज फ़ाइल नहीं बनानी है (और आउटडेटेड ब्राउज़र को सपोर्ट करने की आवश्यकता नहीं है), तो आप सीधे jQuery के साथ svg में हेरफेर कर सकते हैं। जब आप img या ऑब्जेक्ट टैग का उपयोग करके svg को एम्बेड कर रहे हैं, तो आप svg पथों तक नहीं पहुँच सकते, इसलिए आपको सीधे अपने वेबपेज html में svg xml को शामिल करना होगा:
<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>