SVG Graphics – What a Pleasant Surprise
I’ve spent the past few weeks updating a motorcycle site. First I converted the forum from IPBoards (previously PHPBB, and before that something else) This time I’ve settled on PHPBB for Wordpress. It has seemed something of a waste of time, as the forum is technically dead, killed off by my disenchantment with Invision and my disinclination to convert the forum yet again. However, the conversion turned out to be an absolute doddle with the exception of the Invision image galleries, a plugin which turned out to have hidden costs. Delighted with the outcome, I gave Invision Power Boards a virtual but heartfelt middle finger.
I then went on with converting large sections of the static site to a medley of PHP includes, with the aim of making it fully responsive and reasonably compatible with WordPress. One of the glaring errors on the site included flags from the many countries represented, collected over years in assorted formats, sizes and styles. A bloody mess. Starting with a reasonable collection of quality gifs, I converted them all to jpg, made two sets in two sizes, ran through the several thousand pages with a search & replace adding css to them as I went, and then began installing them. Towards the end of the task I went looking for replacement flags as a couple were not up to par. One was the Greek flag which I found on Wikipedia. I downloaded and opened it in an image viewer*. Nothing happened. WTF? It was an SVG file of about 800 pixels. But the filesize was tiny. Itsy bitsy teensy weeny tiny.
I had heard of SVG files, but as I had never worked with them and had certainly never noticed one in action on the web before; they had gone under the radar. So I googled them, and oh my what a surprise. For the flags job, they are absolutely ideal.
So I created a new notes page about SVG files and Vector Graphics. As I was doing so, I happened upon an orphaned notes page which mentioned them in some detail. It was a letter from a chap back in 2009 who had said “forget about gifs and jpgs and pngs, these things are the way of the future”, and attached some SVG’s. As I had nothing to view them with, the images were filed away in the too hard basket and the conversation forgotten. Until just now.
Most browsers handle SVG graphics perfectly. You can even add code within the files giving them instructions on how you’d like them to appear, and CSS can resize them seamlessly.
Apparently there are SVG files and SVG files. Some, like the Greek flag from Wikipedia, contain just a few lines of legible CSS-like code. Others contain binary code and are much much larger. These ones possibly have some sort of copyright protection within and may only be converted with difficultly.
Faststone will view “some” SVG files but does not handle them well. There are various other viewers which do, apparently.
Wordpress Uploader cannot handle SVG files without a suitable plugin or script. See below.
SVG File Contents
There are many other formats, but this is the contents of the Greek Flag. 335 bytes.
<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no”?>
<svg width=”600″ height=”400″ viewBox=”0 0 27 18″ xmlns=”http://www.w3.org/2000/svg”>
<desc>Flag of Greece</desc>
<rect width=”27″ height=”18″ fill=”#0d5eaf”/>
<path fill=”none” stroke-width=”2″ stroke=”white” d=”M5,0V11 M0,5H10 M10,3H27 M10,7H27 M0,11H27 M0,15H27″/>
The code can be modified with a text editor.
Converting SVG to other formats.
Quick ‘n dirty: view the image in Faststone, screenshot with Greenshot (or one of your choice), and save as.
Online Conversion Tools
This one worked very nicely, however output size appears to be limited.
This one worked fine when I chose PNG as the output format. Make sure you use the Click Here button when the download screen pops up, and not the green OK button.
These converters may well work:
http://www.zamzar.com says they can convert SVG. They will email the result.
“ImageMagick works everywhere and with (practically) every format”
As ImageMagick won’t work on Windows, the site is horribly antique and there is no GUI so I gave it a miss, but it is actually quite highly ranked. The same forum post on Stackoverflow says: “If you prefer a tool to a library, Inkscape has a batch export feature.”
GIMP can import SVGs
Inkscape is a free tool which handles SVGs and appears to be well supported. It has been in development for quite some time.
SVG in WordPress
Add several lines of code to functions.php or create a simple plugin with code provided, as suggested in CSS Tricks
Compatible up to: 4.2.1
5 out of 5 stars
5 stars 8
This plugin not only provides SVG Support like the name says, it also allows you to easily embed your full SVG file’s code using a simple IMG tag.
By adding the class “style-svg” to your IMG elements, this plugin dynamically replaces any IMG elements containing the “style-svg” class with your complete SVG.
There is an informative article on SVG vector graphics at Wikipedia
Featured image and several flags from Wikipedia