How do I convert an SVG image to a standard image format such as PNG or JPEG?

Question

 <svg width="360" height="180">
     <circle class="little" cx="234.14618999697268" cy="13.068148791790009" r="12" fill="#e7d59e"></circle>
     <circle class="little" cx="315.8937894925475" cy="12.226657052524388" r="12" fill="#c85768"></circle>
     <circle class="little" cx="320.8564972691238" cy="133.00350899342448" r="12" fill="#bc63de"></circle>
 </svg>

Let’s say I have SVG data like the above. Is there any way to convert it to an image format like JPEG or PNG? Can I do this in PHP or Javascript in a way that works in IE8?

just a short google request... http://stackoverflow.com/questions/4809194/convert-svg-image-to-png-with-php — Julian Berger, Jul 28 '15 at 09:35

score 1 · Answer 1 · answered Jul 28 '15 at 09:39

1

You can use https://github.com/gabelerner/canvg or similar library to draw the svg to a canvas, then use canvas.getImageData() or canvas.toDataURL() to get the actual image as pixel array or base64 string respectively. No need for PHP, but you can forget IE8 (everybody should forget it).

answered Jul 28 '15 at 09:39

Szabolcs Páll

1,402
6
25
31

i really want to forget IE8 but my client needs this to run in IE8 so i have no choice – knives22 Jul 28 '15 at 09:53
then you pretty much have no choice but to do it on server side (see @JulianBerger's comment above) – Szabolcs Páll Jul 28 '15 at 09:55

How do I convert an SVG image to a standard image format such as PNG or JPEG?

1 Answers1