用PHP将SVG图像转换为PNG
我正在开发一个Web项目，该项目涉及一个动态生成的美国地图，它根据一组数据为不同的国家着色。
这个SVG文件给了我一个美国的空白地图，并且很容易改变每个州的颜色。 难点在于IE浏览器不支持SVG，所以为了让我使用svg提供的便捷语法，我需要将它转换为JPG格式。
理想情况下，我想只用GD2库来做到这一点，但也可以使用ImageMagick。 我完全不知道如何做到这一点。
我们将考虑任何能够动态改变美国地图上的州的颜色的解决方案。 关键是，它很容易改变颜色，它是跨浏览器。 请仅使用PHP / Apache解决方案。
这很有趣，你问这个问题，我刚刚为我的工作网站做了这个，我想我应该写一个教程...下面是如何使用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以及如何存储id和颜色值。 如果你不想在服务器上存储一个文件，你可以输出图像作为基础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
完： 
编辑
自写上述以来，我提出了两项改进的技术：
1）而不是正则表达式循环来改变填充状态，使用CSS来制作样式规则
<style type="text/css">
#CA,#FL,HI{
fill:blue;
}
#Al, #NY, #NM{
fill:#cc6699;
}
/*etc..*/
</style>
然后在进行imagick jpeg / png创建之前，您可以执行单个文本替换以将CSS规则注入到svg中。 如果颜色没有改变，请检查以确保您的路径标记中没有任何内联填充样式来覆盖css。
2）如果您不必实际创建一个jpeg / png图像文件（并且不需要支持过时的浏览器），则可以使用jQuery直接操作svg。 使用img或object标签嵌入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>
另一个非常快速和准确的选项是无头浏览器PhantomJS（webkit）
http://phantomjs.org/
你提到你这样做是因为IE不支持SVG。
好消息是IE确实支持矢量图形。 好吧，所以它的形式是一种叫做VML的语言，它只支持IE，而不是SVG，但它在那里，你可以使用它。
谷歌地图等，将检测浏览器的功能，以确定是否提供SVG或VML。
然后是Raphael库，这是一个基于Javascript browswer的图形库，它支持SVG或VML，这取决于浏览器。
另一个可能有助于：SVGWeb。
所有这些意味着您可以支持您的IE用户，而不必诉诸位图图形。
另请参阅此问题的最佳答案，例如：XSL将SVG转换为VML
链接地址: http://www.djcxy.com/p/77327.html