Notes about handling SVGs in Kirby and your sites

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.

4 Likes

Good notes, especially about js and animation, thanks. Will come in handy!

For static svg icons, so far I’ve been using svg sprite sheets. (This was a great article)

A sprite sheet with <symbol> elements and something like this in the content.

<svg viewBox="0 0 36 36">
  <use xlink:href="sprites.svg#icon-name"></use>';
</svg>';

Then made an icon tag so I could easily use those icons.

2 Likes

A few notes:

  • if your fallback is an image, SVG capable browsers will initiate a download for both the SVG and the fallback when you use an object. You can find a workaround on CSS-tricks though.

  • if you don’t need to target something inside your SVG via css, nor need to animate it, using a basic img element is simple and has very large browser support. Image fallback is a bit more difficult (again, see CSS-tricks), but text fallback is done simply with the alt attribute.

1 Like

@sakamies That SVG sprite sheet looks great!

@Malvese Those details are very useful for making decisions about handling SVGs. Maybe my short form above was too short?

@jwhipple Oh no it’s great as it is! If you wanted to explain every aspect of SVG you’d need a epic-length article :wink:
Perhaps just add that there are many ways to use SVG, and object is a (very good) way to use it, but not the only one. For simple needs there are easier approaches.

Good news! There is an epic-length article about using SVG on the web.

Check this out: https://svgontheweb.com/

It was published only 2 days ago.

2 Likes

@PaulMorel That is freaking awesome. Thanks for the link!

I’m hoping we can get SVG wrapped in an <object> tag in the Panel so we can see js animations etc.when looking at files. Recently was making graphics that appeared identical even though one had js animation in it. Maybe there’s a way to extend the Panel with a plugin or something…I’m not a programmer enough to work something like that out.