Inline SVG as KirbyTag

Kirby 3 Solved ✅
1

I need a KirbyTag that includes an SVG file with the specified name.
Let’s say I have the following kirbytext field:

Text: Some text … (svg: icon) … some more text.

And then the plugin:

<?php

Kirby::plugin('petecrighton/icons', [
  'tags' => [
    'svg' => [
      'html' => function($tag) {
        $icon__url = 'assets/svg/' . $tag->value . '.svg';
        echo svg($icon__url);
      }
    ]
  ]
]);

This

<?= $page->text()->kirbytext() ?>

now puts the SVG file in front of all the text:

<svg></svg>
<p></p>

Not in the middle of it as I had hoped for:

<p>
  <svg></svg>
</p>

Why is this and how do I solve it? Or is there a completely other way to include inline SVGs?

2

Try returning the svg, instead of echo:

Kirby::plugin('petecrighton/icons', [
  'tags' => [
    'svg' => [
      'html' => function($tag) {
        $icon__url = 'assets/svg/' . $tag->value . '.svg';
        return svg($icon__url);
      }
    ]
  ]
]);
3

I tried that initially. Instead of displaying the SVG image that prints out part of the file in text form like so:

Some text … <?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
class="svg-arrow"
version="1.1"
id="svg2"
width="72"
height="24"
viewBox="0 0 72 24"
sodipodi:docname="arrow.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">

image/svg+xml … some more text.
4

I wonder if it would work better if you include the svg inside an image tag?

5

Returning it works for me…

image

6

Then I would lose the option of controlling the SVG with CSS, I believe. I’ll probably need to be able to do that, though. (For example, altering the color of the SVG on the fly)

Huh, interesting. Could you post or link an SVG that works for you? Maybe something is wrong with my SVGs that I created in Inkscape.

7 
<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m0 8.78646h15.7552067l-6.2239567-6.22396 1.5625-1.5625 8.90625 8.88021-8.8802067 8.90625-1.5885433-1.5885417 6.2239567-6.1979183h-15.7552067z" fill="#222222" fill-rule="evenodd" transform="matrix(-1 0 0 1 20 0)"/></svg>

I run all my SVGs through SVGO. You can do this with ImageOptim on a mac if you also have SVGO installed globally. Or you can paste the code into https://jakearchibald.github.io/svgomg/

8

Thanks, that looks like a great tool! I’m relatively new to the world of SVG …

And it was indeed all the Inkscape-created extra tags that were the root of the problem. Now it almost works as it should, it only adds a <br> tag after the SVG, that I need to remove again. I’m investigating what causes that to appear …

Edit: Additional <br> tag was due to an empty last line at the end of the SVG file.

9

I usually use Sketch to make them, and then run them through SVGO to minify it.