Skip to content
Macro for embeding SVG into HTML.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


    {embeddedSvg 'icons/help.svg',
        class => 'help-icon',
        data-toggle => 'popover',
        data-content => 'This is a list of your publications for last 5 years.'

Result HTML code may look like:

    <svg xmlns="..." class="help-icon" ...>
        ... content of help.svg file ...


This is a single purpose helper library with a macro definition for Latte, the PHP templating engine. It loads SVG source file and embed it into HTML code in compile time.

Motivation for this is possibility to stylize SVG by CSS then. It is not (easily) possible with SVG linked as an image like <img src="icons/help.svg">.


Require library by Composer:

composer require milo/embedded-svg

Register extension in your config.neon and configure it:

    embeddedSvg: Milo\EmbeddedSvg\Extension

    baseDir: %wwwDir%/img


There are some other optional options:

    # change name of the macro
    macroName: svgIcon

    # pretty format SVG content (indent tags)
    prettyOutput: yes

    # default <svg> tag attributes, for example
        class: embedded
        height: 30px
        width: null

    # callbacks called when SVG loaded from file
        - [SVGSanitizer, sanitize]

    # bitmask of LIBXML_* flags for DOMDocument::load() method
    libXmlOptions: (integer)

You can load the extension more then once. In this case, change macro name by macroName option.

Option defaultAttributes is a XML attributes list for generated <svg> tag. These are merged. The precedence is (higher to lower):

  • macro tag attributes
  • default attributes
  • attributes of <svg> tag loaded from file

If the attribute value is null, it is not rendered. You can unset attributes from SVG file in that way.

Callback added into onLoad event is called when SVG contents is successfully loaded into DOM. Its signature is:

function (DOMDocument $dom, Milo\EmbeddedSvg\MacroSetting $setting) {

Caveats & Limitations

Because embeddedSvg is a macro, it is compiled into PHP only once and then is cached. So, when you change the macro configuration, probably in NEON, you have to purge Latte cache.

You can’t perform that action at this time.