Inline SVG als PNG

Zur Navigation springen Zur Suche springen
Inline SVG als Inline-PNG darstellen

Mittels PHP kann man eine SVG-Grafik interaktiv erzeugen und am Bildschirm anzeigen. Diese Grafik lässt sich schlecht speichern, zumindest für Uneingeweihte.

Die folgende Anleitung funktioniert nur, wenn der Webhoster ImageMagick installiert hat.

Beispiel

Das folgende Beispiel ergibt ein einfaches Rechteck. Die obere Anzeige erfolgt als Inline-SVG, die untere enthält die als PNG umgewandelte Grafik und lässt sich mittels rechter Maustaste speichern.

Hier kann man das Beispiel online ansehen (in einem Wiki ist das nicht möglich): Convert SVG to PNG

Eine allfällige Skalierung muss in SVG vorgenommen werden, da ansonsten die Qualität der erzeugten PNG-Grafik inakzeptabel ist.

HTML mit eingebettetem PHP-Code

<!DOCTYPE html><html><head><meta charset="utf-8"></head>
<body>
<h1>Convert SVG to PNG</h1>
<?php
$svg = '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <svg width="1200" height="600" viewbox="0 0 1200 600" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(6)"><rect width="200" height="100" stroke="green" stroke-width="4" fill="yellow"></rect></g>
</svg>';
$im = new Imagick();
$im->readImageBlob($svg);
$im->setImageBackgroundColor(new ImagickPixel('transparent'));
$im->setImageFormat("png24");
#echo '<img src="data:image/png;base64,'.base64_encode($im->getImageBlob()).'" alt="" />';
?> 
<h2>SVG Grafik</h2>
<?php echo $svg;?>
<h2>PNG Grafik (downloadbar)</h2>
<?php echo '<img src="data:image/png;base64,'.base64_encode($im->getImageBlob()).'" alt="" />';?>
</body>
</html>
Abgerufen von „https://lilypond.miraheze.org/wiki/Inline_SVG_als_PNG?oldid=7099“