I have been working with SVG files more and more and wanted to share a couple of things that might be useful.
TL;DR
In your HTML use <object>
to display your image:
<object src="path/to/your.file.svg">fall back text (or img tag even)</object>
In your Kirby templates and snippets, you’ll want to separate SVGs from other image types and then build the HTML using the <object>
tag; for all other images go ahead and use <img>
.
To sort things out, you can use filterBy()
and even chain things together. In my case I am building a bunch of project tiles so I find the images in each project page and filter by filename and then filter that by extension. If it’s SVG, I write an object element, and if anything else I write an image element (mea culpa: designer not programmer):
<?php foreach (page()->image() as $image): ?>
<?php if(image = $project->images()->filterBy('filename', '*=', 'project-tile-image')->filterBy('extension', 'svg')->first()): ?>
<object data="<?php echo $image->url(); ?>" alt="<?php echo $project->title()->html(); ?>"></object>
<?php elseif($image = $project->images()->filterBy('filename', '*=', 'project-tile-image')->first()): ?>
<img src="<?php echo $image->url(); ?>" alt="<?php echo $project->title()->html(); ?>" />
<?php endif ?>
DISCUSSION
SVG is very handy and has good browser support. Graphics look great and, even better, are programmable and better still, can be made to be entirely self-contained and distributed as a single file that doesn’t require an HTML context or even a web server to be useful.
When you start doing clever things inside your SVG there are a few things to know:
Internet Explorer will not display animations and transformations using SMIL declarations within the file. There is no plan for IE to support SMIL ever. The other browsers are fine with this, although SMIL support may be dropped from them in the future.
IE8 & 9 will not support CSS animations or transitions applied to SVGs at all. Other browsers can show CSS animations and transforms on SVG.
Javascript can be used to animate and transform SVGs. You can use a convenience library such as raphael.js, snap.js, svg.js to help you do this.
You can include the Javascript within the SVG itself as long as there is a mechanism in the library to attach the javascript to the parent element (I tested using snap.js).
If you have a Javascript-enhanced SVG and want to place it in a web page, you must use the <object>
tag for the script code to be executed. See above for one way to do it. This also means that Javascript-enhanced SVGs will not execute their scripts when displayed in the Panel. I was stymied until I recalled that the HTML for image views in Kirby use the <img>
tag. (I’ve filed an issue for Panel: #519)
Lastly if you find your SVGs are getting scaled strangely in IE series browsers, set width and height the parent of the SVG. There are other techniques and things for handling this as well.
I found the following resources very useful for original information and for corroboration of facts and techniques:
Can I Use: SVG?
Styling And Animating SVGs With CSS
CSS Tricks: SVG
Hope you guys find this information useful.