# How to add inject CSS class in inline SVG

**URL:** <https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273>\
**Category:** Questions\
**Tags:** v3\
**Created:** [May 18, 2019, 7:23am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273 "2019-05-18T07:23:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [May 18, 2019, 7:23am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/1 "2019-05-18T07:23:53Z")

</div>

Hello.

I’m using inline SVGs most on my current project and most of the time I have to add a CSS class on the SVG tag because I’m using Tailwindcss to style the app. This works for me but obviously, my code is now full of gibberish SVG codes.  
I’ve watched a video where the coder is using Laravel + Blade and he could easily include his SVGs like this

```auto
@include('logo.svg', ['class' => 'someclasshere'])

```

Is this a Blade feature? Can we do this with plain PHP or with some Kirby helpers?

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [May 18, 2019, 7:53am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/2 "2019-05-18T07:53:09Z")

</div>

Blade is the template language for Laraval. You can use it with Kirby but for that [you need a plugin](https://github.com/beebmx/kirby-blade), and to re-write all the temples and snippets.

You could put svg helper in a snippet with a DIV round it and the class attribute on it, and pass the class through as a parameter, as well as the URL.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 18, 2019, 9:00am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/3 "2019-05-18T09:00:54Z")

</div>

You can achieve the same as the blade helper with string replacement like this:

```auto
<?= str_replace(
    '<svg',
    sprintf('<svg %s', 'class="someclass"'),
    svg($page->file('logo.svg')->root()));
?>

```

(They do the same)

---

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [May 18, 2019, 9:31am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/4 "2019-05-18T09:31:05Z")

</div>

This would be the right solution for my needs. And I think it’s still possible to make it cleaner by making it as a snippet or something better on which I will just have to pass the filename, right?

As always, the fastest and most helpful person, thank you @texnixe

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 18, 2019, 9:32am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/5 "2019-05-18T09:32:34Z")

</div>

@sicnarf Yes, sure, you could hide it away in a function or snippet. You should check for a valid image, anyway, before calling `root()`

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [May 18, 2019, 9:34am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/6 "2019-05-18T09:34:21Z")

</div>

Depends where you want to store the SVG files as well, since the example above expects them to belong to the current page. You might need to make two snippets, one for pulling from the assets directory (useful for things like site footers & headers), and one specific page files.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 18, 2019, 9:35am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/7 "2019-05-18T09:35:03Z")

</div>

> [@jimbobrjames](#):
>
> You might need to make two snippets,

@jimbobrjames That is not necessary if you pass a path to the snippet or function, then it doesn’t matter where the file comes from.

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [May 18, 2019, 9:36am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/8 "2019-05-18T09:36:27Z")

</div>

> [@texnixe](#):
>
> $page-\>file(‘logo.svg’)

You can pass a path to another page with that?? Oh boy! I didnt know 🙂

---

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [May 18, 2019, 9:37am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/9 "2019-05-18T09:37:19Z")

</div>

You beat me with this. I was about to ask as well coz’ I saw it was using the `$page->`

> [@jimbobrjames](#):
>
> You can pass a path to another page with that?? Oh boy! I didnt know 🙂

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 18, 2019, 9:37am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/10 "2019-05-18T09:37:58Z")

</div>

> [@jimbobrjames](#):
>
> You can pass a path to another page with that?? Oh boy! I didnt know 🙂

That’s not what I said, `$page->file('somefile')->root()` is a path to a file that you can pass on just the same line `assets/images/logo.svg`.

```auto
function renderSvgWithClass($filepath, $class) {
  return str_replace(
    '<svg',
    sprintf('<svg %s', 'class="' . $class . '"'),
    svg($filepath));
}

```

Then in template:

```auto
if ($file = $page->file('some.svg')) {
  echo renderSvgWithClass($file->root(), 'someclass');
}

```

Or with asset:

```auto
echo renderSvgWithClass('assets/images/some.svg', 'someclass');

```

---

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [May 18, 2019, 9:39am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/11 "2019-05-18T09:39:35Z")

</div>

> [@texnixe](#):
>
> That’s not what I said, `$page->file('somefile')->root()` is a path to a file that you can pass on just the same line `assets/images/logo.svg` .

Did you mean like this?

```auto
<?= str_replace(
    '<svg',
    sprintf('<svg %s', 'class="someclass"'),
    svg('./assets/images/svg/file.svg'));
?>

```

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [May 18, 2019, 9:41am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/12 "2019-05-18T09:41:52Z")

</div>

Ah… now i see what you mean.

---

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [May 18, 2019, 9:47am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/13 "2019-05-18T09:47:56Z")

</div>

> [@texnixe](#):
>
> function renderSvgWithClass($filepath, $class) { return str\_replace( ‘\<svg’, sprintf(‘\<svg %s’, ‘class=’ . $class), svg($filepath)); }

Can I do this? I’m pretty sure all my SVG will be on the same folder. I think I can save finger strains by typing less 😀

```auto
svg('assets/images/svg/' . $filename));

```

Template

```auto
echo renderSvgWithClass('filename.svg', 'someclass');

```

Sorry I’m not able to test all of this now so I just keep asking.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 18, 2019, 9:50am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/14 "2019-05-18T09:50:31Z")

</div>

Yes, you can do that, makes it less versatile, though.

---

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [May 18, 2019, 9:54am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/15 "2019-05-18T09:54:03Z")

</div>

Appreciate it.

Noob question: I will put the function inside the site/controllers, is it?

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 18, 2019, 9:54am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/16 "2019-05-18T09:54:34Z")

</div>

I’d put it in a plugin, you can put it into a controller, yes.

e.g. `/site/plugins/helpers/index.php`

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [May 18, 2019, 9:54am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/17 "2019-05-18T09:54:40Z")

</div>

Better to put it in a plugin, since controllers belong to a named template, so you can only get at it from pages using that template.

---

<div class="post-metadata">

**Author:** ![sicnarf](https://avatars.discourse-cdn.com/v4/letter/s/3ec8ea/32.png) [@sicnarf](https://forum.getkirby.com/u/sicnarf)\
**Post date:** [May 18, 2019, 9:55am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/18 "2019-05-18T09:55:37Z")

</div>

Alright, I’ll put it in a plugin. Thank you guys!

**EDIT:**  
@texnixe @jimbobrjames

Sorry to reopen the thread. I did try the solution and it works great. One issue I have though is I cannot add multiple CSS classes. It only accepts a single $class value.

So doing this doesn’t work.

```auto
<?= renderSvgWithClass('assets/images/logo.svg', 'class-1 class-2'); ?>

```

Output

```auto
<svg class="class-1" class-2 xmlns... />

```

Btw, I put the function in my index.php as suggested in the Docs. I do think this is a simple plugin and thus belongs there.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 18, 2019, 10:30am UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/19 "2019-05-18T10:30:25Z")

</div>

There were the closing quotes missing above, but you can extend the above and pass an array of classes like this instead.

```auto

    function renderSvgWithClass(string $filepath, array $classes = []) {
      return str_replace(
        '<svg',
        sprintf('<svg %s', 'class="' . implode(' ', $classes) . '"'),
        svg($filepath));
    }

    if ($file = $page->file('logo.svg')) {
     echo renderSvgWithClass($file->root(), ['someclass', 'extraclass']);
}

```

Passing a string with multiple classes should have worked as well, though, at least with the modified solution above.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [May 18, 2019, 2:56pm UTC](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273/20 "2019-05-18T14:56:17Z")

</div>

And to finish this off, here is a more solid, Kirby-style version of the function:

```auto
function renderSvgWithClass(string $filepath, string $class) {
  if ($svg = svg($filepath)) {
    return Str::replace(
      $svg,
      '<svg',
      Str::template('<svg {{ class }}', ['class' => Html::attr('class', $class)])
    );
  }
  return false;
}

```

[Next page](https://forum.getkirby.com/t/how-to-add-inject-css-class-in-inline-svg/14273.md?page=2)