Adding SVG images to pages in concrete5 with a custom built block
We love SVG - it's a great format for using on the web for things like logos, as they look clear at any size (great for responsive designs) and on a retina devices they look fantastic.
We've started to use SVGs as much as we can in our site builds as browser support is excellent. It's only Internet Explorer 8 and a few other older browsers and platforms that require a fallback image in a more traditional graphics format.
When theming sites, we now use Modernizr to detect SVG support and simply use the extra .no-svg class it injects into the document to handle fallback images.
With a recent project we found that the design featured several nice graphics that would export beautifully as SVGs (they were vectors in Illustrator to begin with), but they were graphics intended for placement on the actual page, not just as part of the theme.
Adding on-page SVG images in concrete5
We realised at this point that we'd actually not ever used SVGs in this way before, we'd always used them as part of theming sites, so we needed to find the best way to do this using our preferred CMS, concrete5.
In concrete5, traditional images can be added using an 'Image Block' and this works great if you want to pick a file from the file manger, link it to a page, resize it, etc. However, the build in image block doesn't output SVG images - although you can select them, it doesn't recognise the format and link them in. We found that we could place SVG images using the content block, the editor treated them like any other graphic, except this approach was missing one critical point - we couldn't select a fallback image for the placed SVG.
So as the image block almost had the functionality we needed, we copied most of the code from it and created a new 'SVG Image' block. This block works in very much the same way as the built in image block, but it allows you to pick a fallback and outputs the required HTML.
The SVG fallback HTML
It was no real suprise that there are various different techniques to placing SVGs and having older browser fall back to an alternative image, perhaps there are half a dozen different ways, most of them summerised at css-tricks.
As we were building our own block and had control over the output, to keep things simple and avoid further downloads of scripts, we selected the following approach:
<img src="image.svg" onerror="this.src=image.png;this.onerror=null;">
We felt that this approach was the cleanest one to at least begin with. As we've built this as a block, if down the track we decide to change the technique, we can simply update or override the block template. In particular we may look to implement an approach outlined by David Goss.
Finally, we packaged it up in an easy installer. You can download this block below and use it for your own purposes. Unzip it to your concrete5's top level package folder and install via the dashboard.
If you don't select a fallback image, this block just cleanly outputs an image tag linking to your SVG. Perhaps in the future concrete5's built in image block could be adjusted to also handle SVGs, but for the time being this new block solves our problem.
-Ryan