PHPackages                             scottboms/kirbytag-svg - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. scottboms/kirbytag-svg

ActiveKirby-plugin

scottboms/kirbytag-svg
======================

Kirbytag SVG Plugin

1.1.5(1mo ago)49[1 issues](https://github.com/scottboms/kirbytag-svg/issues)MITPHPPHP >8.1.0 <8.4.0

Since Dec 24Pushed 1mo ago2 watchersCompare

[ Source](https://github.com/scottboms/kirbytag-svg)[ Packagist](https://packagist.org/packages/scottboms/kirbytag-svg)[ Docs](https://github.com/scottboms/kirbytag-svg)[ RSS](/packages/scottboms-kirbytag-svg/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (7)Dependencies (4)Versions (11)Used By (0)

SVG Kirbytag
============

[](#svg-kirbytag)

[![Plugin Preview](src/assets/svg-tag-plugin.jpg)](src/assets/svg-tag-plugin.jpg)

A kirbytag for outputting SVG images inline with a number of customizable attributes.

Requirements
------------

[](#requirements)

- [**Kirby**](https://getkirby.com/)

Installation
------------

[](#installation)

### [Kirby CLI](https://github.com/getkirby/cli)

[](#kirby-cli)

```
kirby plugin:install scottboms/kirbytag-svg

```

### Git Submodule

[](#git-submodule)

```
$ git submodule add https://github.com/scottboms/kirbytag-svg.git site/plugins/kirbytag-svg

```

### Copy and Paste

[](#copy-and-paste)

1. [Download](https://github.com/scottboms/kirbytag-svg/archive/master.zip) the contents of this repository as a Zip file.
2. Rename the extracted folder to `kirbytag-svg` and copy it into the `site/plugins/` directory in your Kirby project.

Usage
-----

[](#usage)

`(svg: yourfile.svg)`

Optionally, you can specify a custom `wrapper` element to wrap the SVG along with class and role attributes that will be applied to that element. If `class` or `role` attributes are included but no `wrapper` element, a 'figure' element will be used.

The tag now supports all of these value types while preserving the existing path-based behavior:

- page-local filenames, like `icon.svg`
- Kirby file IDs/paths, like `projects/example/icon.svg`
- Kirby file UUIDs, like `file://abc123...`
- existing root-relative or filesystem-style SVG paths, like `/assets/icons/icon.svg`

### Optional Tag Attributes

[](#optional-tag-attributes)

- `wrapper`: A wrapper element to surround the SVG when output in your template \[optional\]
- `class`: A CSS class/classes to append to the wrapper element \[optional\]
- `role`: A role attribute appended to the wrapper element \[optional\]

#### Example usage:

[](#example-usage)

```
(svg: /img/deke.svg)
(svg: lerxst.svg wrapper: figure class: svg role: img)
(svg: /assets/icons/pratt.svg wrapper: div class: icon)
(svg: projects/example/logo.svg)
(svg: file://your-file-uuid)

```

Configuration Options
---------------------

[](#configuration-options)

You can add a default wrapper element to SVGs using the provided config option that can be added to your `config.php` file as shown.

```