Recently I had the job to convert EPS files to SVG graphics. It has been done for a product configurator that had to be implemented. The whole implementation mentioned here was done for a Magento Online Shop. But the base-paradigms described here can be used in other PHP based applications too because I’ve implemented them with vanilla PHP techniques.

The user has the option to upload an EPS (Encapsulated PostScript) within the product configurator. That could be a file with the logo of his company, an icon or other graphics. These EPS files are used to print, engrave or emboss the given graphic on the configurable product. The EPS file format is a little bit old fashioned but commonly used in the “print sector”.  The customers uses this format for the machines, that apply the graphics on the products. That was the reason, why we had to upload and save EPS files at all.

But during the customization process the user should be able to see the results in form of a preview image.  The problem was, that nearly none of the currently modern Browsers supports EPS rendering for now.  SVG (Scalable Vector Graphics) on the other side are widely supported (see https://caniuse.com/#feat=svg). So I had to find a way to convert EPS files to SVG graphics. The Shop-Software is running on a Ubuntu  Linux machine.

My way to convert EPS files to SVG graphics

My first intention intention was to use Image- or Graphics-Magic (see https://www.imagemagick.org and http://www.graphicsmagick.org) for this job. But with a little bit of research I found out, that the results should be not that good. There are multiple articles available in the web but one of them is this one:

Fortunately the target application was hosted on a Linux machine. And fortunately I remembered Inkscape.  Inkscape is a professional open source  editor for vector graphics. It is available for Windows, Mac OS X and also Linux. I is an commonly used alternative for Adobe Illustrator. I used Inkscape before to create SVGs for a laser cutter. And Inkscape can be used on the commandline (see https://inkscape.org/en/doc/inkscape-man.html).

Install Inkscape

So my first step was to install Inkscape on my local environment (Vagrant) and on the hosting server as well.
Hence both environments where Ubuntu Linux machines, I created a small shell script that does the job for me.

#!/usr/bin/env bash
sudo add-apt-repository -y ppa:inkscape.dev/stable && sudo apt-get -y update
sudo apt-get -y install inkscape
echo "env[PATH] = /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin" | sudo tee --append /etc/php/5.6/fpm/pool.d/www.conf
sudo service php5.6-fpm restart
sudo service apache2 restart

Using Inkscape on shell

After running the setup script, I was able to use Inkscape to convert EPS files to SVG graphics via Commandline.
This could be done like that:

$> inkscape --export-plain-svg exportfile.svg --file inputfile.eps

Workaround for Internet-Explorer

Alternative approach to convert EPS files to SVG graphics

Another Idea one might get is the usage of a Online Image Converter such as https://cloudconvert.com/eps-to-svg or https://convertio.co/de/eps-svg/. But this way I would have been implemented a dependency to an external Service i can’t rely on.

 

Further information about how to convert EPS files to SVG graphics

• EPS (Encapsulated PostScript) file format on Wikipedia: https://en.wikipedia.org/wiki/Encapsulated_PostScript
• EPS-Viewer: http://epsviewer.org/
• SVG (Scaleable Vector Graphics ): https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
• Inkscape website: https://inkscape.org/en/
• Inkscape Commandline Reference: https://inkscape.org/en/doc/inkscape-man.html
• more PHP snippets: https://www.ask-sheldon.com/topics/php/