Convert SVG image to PNG with PHP

Question

I m working on a web project that involves a dynamically generated map of the US coloring different states based on a set of data     This SVG file gives me a good blank map of the US and is very easy to change the color of each state   The difficulty is that IE browsers don t support SVG so in order for me to use the handy syntax the svg offers  I ll need to convert it to a JPG     Ideally  I d like to do this with only the GD2 library but could also use ImageMagick   I have absolutely no clue how to do this     Any solution that would allow me to dynamically change the colors of states on a map of the US will be considered   The key is that it is easy to change the colors on the fly and that it is cross browser   PHP Apache solutions only  please

User · Answer

When converting SVG to transparent PNG  don t forget to put this BEFORE  imagick- gt readImageBlob      imagick- gt setBackgroundColor new ImagickPixel  transparent

User · Answer

You can use Rapha  l   JavaScript Library and achieve it easily  It will work in IE also

User · Answer

You mention that you are doing this because IE doesn t support SVG   The good news is that IE does support vector graphics  Okay  so it s in the form of a language called VML which only IE supports  rather than SVG  but it is there  and you can use it   Google Maps  among others  will detect the browser capabilities to determine whether to serve SVG or VML   Then there s the Raphael library  which is a Javascript browswer-based graphics library  which supports either SVG or VML  again depending on the browser   Another one which may help  SVGWeb   All of which means that you can support your IE users without having to resort to bitmap graphics   See also the top answer to this question  for example  XSL Transform SVG to VML

User · Answer

This is v  easy  have been doing work on this for the past few weeks    You need the Batik SVG Toolkit  Download  and place the files in the same directory as the SVG you want to convert to a JPEG  also make sure you unzip it first   Open the terminal  and run this command   java -jar batik-rasterizer jar -m image jpeg -q 0 8 NAME OF SVG FILE svg   That should output a JPEG of the SVG file  Really easy   You can even just place it in a loop and convert loads of SVGs    import os  svgs     test1 svg    test2 svg    etc svg    for svg in svgs      os system  java -jar batik-rasterizer jar -m image jpeg -q 0 8   str svg    svg

User · Answer

That s funny you asked this  I just did this recently for my work s site and I was thinking I should write a tutorial    Here is how to do it with PHP Imagick  which uses 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    gt   339966        AK    gt   0099FF                WI    gt   FF4B00        WY    gt   A3609B      foreach  idColorArray as  state   gt   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- gt readImageBlob  svg      png settings    im- gt setImageFormat  png24     im- gt resizeImage 720  445  imagick  FILTER LANCZOS  1      Optional  if you need to resize      jpeg    im- gt setImageFormat  jpeg     im- gt adaptiveResizeImage 720  445     Optional  if you need to resize     im- gt writeImage   path to colored us-map png      or  jpg     im- gt clear     im- gt destroy      the steps regex color replacement may vary depending on the svg path xml and how you id  amp  color values are stored  If you don t want to store a file on the server  you can output the image as base 64 like   lt  php echo   lt img src  data image jpg base64     base64 encode  im          gt     gt     before you use clear destroy  but ie has issues with PNG as base64 so you d probably have to output base64 as jpeg  you can see an example here I did for a 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 the above  I ve come up with 2 improved techniques   1  instead of a regex loop to change the fill on state   use CSS to make style rules like    lt style type  text css  gt   CA  FL HI      fill blue     Al   NY   NM      fill  cc6699      etc      lt  style gt    and then you can do a single text replace to inject your css rules into the svg before proceeding with the imagick jpeg png creation  If the colors don t change  check to make sure you don t have any inline fill styles in your path tags overriding the css   2  If you don t have to actually create a jpeg png image file  and don t need to support outdated browsers   you can manipulate the svg directly with jQuery  You can t access the svg paths when embedding the svg using img or object tags  so you ll have to directly include the svg xml in your webpage html like    lt div gt   lt  php echo file get contents   path to blank us-map svg     gt   lt  div gt    then changing the colors is as easy as    lt script type  text javascript  src   path to jquery js  gt  lt  script gt   lt script type  text javascript  gt          CA   css  fill    blue            NY   css  fill     ff0000     lt  script gt

User · Answer

This is a method for converting a svg picture to a gif using standard php GD tools  1  You put the image into a canvas element in the browser    lt canvas id myCanvas gt  lt  canvas gt    lt script gt  var Key  picturename  var canvas   document getElementById  myCanvas    var context   canvas getContext  2d    base image   new Image    base image src   myimage svg  base image onload   function           get the image info as base64 text string      var dataURL   canvas toDataURL          Post the image  dataURL  to the server using jQuery post method       post  ProcessPicture php    TheKey  Key  image   dataURL   h   canvas height  w  canvas width  stemme  stemme    function data status   alert data     status         lt  script gt        And then convert it at the server  ProcessPicture php  from  default  png to gif and save it   you could have saved as png too then use imagepng instead of image gif      receive the posted data in php  pic   POST  image     Key   POST  TheKey     height   POST  h     width   POST  w     dir     gif    gifName  dir  Key   gif     pngName  dir  Key   png      split the generated base64 string before the comma  to remove the  data image png base64  header  created by and get the image data  data   explode       pic    base64img   base64 decode  data 1     dimg imagecreatefromstring  base64img       in order to avoid copying a black figure into a  default  black background you must create a white background   im out   ImageCreateTrueColor  width  height    bgfill   imagecolorallocate   im out  255  255  255    imagefill   im out  0 0   bgfill       Copy the uploaded picture in on the white background ImageCopyResampled  im out   dimg  0  0  0  0   width   height  width   height      Make the gif and png file  imagegif  im out   gifName   imagepng  im out   pngName

User · Answer

I do not know of a standalone PHP   Apache solution  as this would require a PHP library that can read and render SVG images  I m not sure such a library exists - I don t know any   ImageMagick is able to rasterize SVG files  either through the command line or the PHP binding  IMagick  but seems to have a number of quirks and external dependencies as shown e g  in this forum thread  I think it s still the most promising way to go  it s the first thing I would look into if I were you

User · Answer

command    convert -density 300                            if Input  Post  height        amp  amp  Input  Post  width                                      command   -resize   Input  Post  width    x  Input  Post  height                                                           command   svg      source                          exec  command                            unlink  svg     or using   potrace demo  Tool4dev com

[php] Convert SVG image to PNG with PHP

Examples related to php

Examples related to svg

Examples related to imagemagick

Examples related to jpeg

Examples related to gd2