Analysis on the method of transforming SVG into PNG format with PHP


This paper describes the method of transforming SVG into PNG format by PHP. Share with you for your reference, as follows:

Implementation of SVG to png

1. PHP imagick extension

a. Study the method of imagick plug-in

$im = new Imagick($upload_path . $file_name);
$svg = file_get_contents($upload_path . $file_name);
$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>'.$svg;
// png settings
$srcImage = $im->getImageGeometry(); // Gets the width and height of the source picture
$im->resizeImage($srcImage['width'], $srcImage['height'], imagick::FILTER_LANCZOS, 1, false);

b. Problems encountered

Svg pictures can be successfully converted to PNG format pictures, but PNG pictures have problems:

1) Line segment missing;

2) The font is not displayed;

3) The style tag style in the SVG file cannot be resolved;

2. Discard the imagick plug-in and change SVG to canvas to PNG

a. SVG to canvas

function drawInlineSVG($svg, callback) {
  var svg = $svg;
  var parser = new DOMParser();
  var doc = parser.parseFromString(svg, "text/xml");
  svg = doc.getElementsByTagName('svg');
  svg = svg[0];
  svg.innerHTML = '<rect width="100%" height="100%" fill="#ffffff"></rect>' + svg.innerHTML;
  var svgData = new XMLSerializer().serializeToString( svg );
  var img = document.createElement( "img" );
  img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( unescape(encodeURIComponent(svgData)) ) );
  img.onload = function () {
    var canvas = document.createElement( "canvas" );
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext( "2d" ); // Gets the 2D drawing context of the canvas
    ctx.drawImage( img, 0, 0 );
    canvas.toDataURL( "image/png" );
    var base64Src = canvas.toDataURL( "image/png" );
    callback && callback(base64Src); //  Call back function

b. Convert canvas to PNG (base64src to PNG)

/*Base64 format encoding is converted into pictures and saved in the corresponding folder*/
function base64_image_content($base64_image_content,$path, $file_name = ''){
  //Match the format of the picture
  if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
      //Path does not exist
     return false;
    $new_file = $path . $file_name;
    if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){
      return '/'.$new_file;
      return false;
    return false;

c. Effect example

1) Svg format

2) PNG format

PS: here are some more practical Base64 online encoding and decoding tools for you to use:

Base64 codec tool:

Base64 tool for online picture conversion:

Base64 online encoding and decoding UTF-8 version:

Base64 online encoding and decoding GB2312 version:

For more information about PHP, readers who are interested can see the topics on this site: summary of PHP graphics and picture operation skills, summary of PHP file operation skills, summary of PHP coding and transcoding operation skills, summary of JSON format data operation skills in PHP, complete collection of PHP array operation skills, summary of PHP operation and operator usage, and PHP string Usage Summary

I hope this article will help you in PHP programming.