用PHP将SVG图像转换为PNG格式
我正在做一个网络项目，它涉及到一个动态生成的美国地图，根据一组数据给不同的州着色。
这个SVG文件为我提供了一个很好的空白美国地图，并且很容易更改每个州的颜色。困难在于IE浏览器不支持SVG，所以为了让我使用svg提供的方便的语法，我需要将其转换为JPG。
理想情况下，我希望只使用GD2库，但也可以使用ImageMagick。我完全不知道该怎么做。
任何允许我在美国地图上动态更改州颜色的解决方案都将被考虑。关键是很容易动态更改颜色，而且它是跨浏览器的。请仅使用PHP/Apache解决方案。
回答 8
Stack Overflow用户
发布于 2011-01-27 04:17:16
你问这个问题很有趣，我最近刚为我的工作网站做了这个，我在想我应该写一个教程……下面是如何使用使用ImageMagick的PHP/Imagick完成此操作：
$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) . '" />';?>(在你使用clear/destroy之前)，但是ie把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>Stack Overflow用户
发布于 2012-11-21 05:25:38
在将SVG转换为透明PNG时，不要忘记将其放在$imagick->readImageBlob()之前
$imagick->setBackgroundColor(new ImagickPixel('transparent'));Stack Overflow用户
发布于 2011-01-27 04:01:49
你提到你这样做是因为IE不支持SVG。
好消息是IE确实支持矢量图形。好的，它的形式是一种叫做VML的语言，只有IE支持，而不是SVG，但是它确实存在，你可以使用它。
除其他功能外，Google Maps将检测浏览器功能，以确定是提供SVG还是VML。
然后是Raphael library，这是一个基于Javascript浏览器的图形库，它支持SVG或VML，同样取决于浏览器。
另一个可能有帮助的网站是：SVGWeb。
所有这些都意味着您可以支持您的IE用户，而不必求助于位图图形。
另请参阅此问题的顶部答案，例如：XSL Transform SVG to VML
https://stackoverflow.com/questions/4809194
复制相似问题
腾讯云开发者
