how to resize an SVG with Imagick/ImageMagick

Question

I am sending a string representation of an SVG file to the server and using Imagick to turn this into a jpeg in the following manner:

$image = stripslashes($         


        

Answer 1

You don't need imagick to complete this task. For example you wont to resize your svg (w: 60px, h: 70px) => (w: 36px, h: 36px) to get an icon for a button.

$svg = file_get_contents($your_svg_file);

// I prefer to use DOM, because it's safer and easier as to use preg_match
$svg_dom = new DOMDocument();

libxml_use_internal_errors(true);
$svg_dom->loadXML($svg);
libxml_use_internal_errors(false);

//get width and height values from your svg
$tmp_obj = $svg_dom->getElementsByTagName('svg')->item(0);
$svg_width = floatval($tmp_obj->getAttribute('width'));
$svg_height = floatval($tmp_obj->getAttribute('height'));

// set width and height of your svg to preferred dimensions
$tmp_obj->setAttribute('width', 36);
$tmp_obj->setAttribute('height', 36);

// check if width and height of your svg is smaller than the width and 
// height you set above => no down scaling is needed
if ($svg_width < 36 && $svg_height < 36) {
    //center your svg content in new box
    $x = abs($svg_width - 36) / 2;
    $y = abs($svg_height - 36) / 2;
    $tmp_obj->getElementsByTagName('g')->item(0)->setAttribute('transform', "translate($x,$y)");
} else {
    // scale down your svg content and center it in new box
    $scale = 1;

    // set padding to 0 if no gaps are desired
    $padding = 2;

    // get scale factor
    if ($svg_width > $svg_height) {
        $scale = (36 - $padding) / $svg_width;
    } else {
        $scale = (36 - $padding) / $svg_height;
    }

    $x = abs(($scale * $svg_width) - 36) / 2;
    $y = abs(($scale * $svg_height) - 36) / 2;
    $tmp_obj->getElementsByTagName('g')->item(0)->setAttribute('transform', "translate($x,$y) scale($scale,$scale)");

    file_put_contents('your_new_svg.svg', $svg_dom->saveXML());
}

Be careful by setting translate(x,y), because it may happen that your svg content can be set outside of the box and you will see nothing except the background.

My script above works proper only if your initial translate is set to (0,0). You can use this

$svg_path = $svg_dom->getElementsByTagName('path')->item(0);
$svg_g = $svg_dom->getElementsByTagName('g')->item(0);
$transform = $svg_g->getAttribute('transform');

// get x and y of translate
$transform = substr($transform, strlen('translate('));
$transform = substr($transform, 0, strlen($transform)-1);
$transform_data = explode(',', $transform);

// get path data
$d = $svg_path->getAttribute('d');
$d_data = explode(' ', $d);
$tmp = explode(',', $d_data[1]);
$d_data[1] = ($tmp[0] + $transform_data[0]).','.($tmp[1]+$transform_data[1]);
$svg_path->setAttribute('d', implode(' ', $d_data));
$svg_g->setAttribute('transform','translate(0,0)');
file_put_contents('your_new_svg.svg',$svg_dom->saveXML());

to set translate to (0,0) and adapt path data to new settings because path data depends on translate and vice versa.

I use this two scripts to generate png icons by resizing my svg icons to dimension I need and converting them to png without loss of quality.

I hope it's clear what I mean.