A kirbytag for outputting SVG images inline with a number of customizable attributes.
kirby plugin:install scottboms/kirbytag-svg
$ git submodule add https://github.com/scottboms/kirbytag-svg.git site/plugins/kirbytag-svg
- Download the contents of this repository as a Zip file.
- Rename the extracted folder to
kirbytag-svgand copy it into thesite/plugins/directory in your Kirby project.
(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
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]
(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)
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.
<?php
return [
'scottboms.kirbytag-svg.wrapper' => 'div',
]- Kirby 3.5+
- Kirby 4.x
- Kirby 5.x
This plugin is provided "as is" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. If you find any issues, please create a new issue.
You are prohibited from using this plugin in any project that promotes racism, sexism, homophobia, animal abuse, violence or any other form of hate speech.