dada-amater/latte-svg

Latte macro to embed SVG from file into HTML

Example init

<h1>
    Publications
    {svgFallback icon-group}
</h1>

Result HTML code IN IE may look like:, _(*1)

<h1>
    Publications
    <svg xmlns="..." class="..." ...>
        ... content of symbol-defs.svg file ...
    </svg>
</h1>

Example of icon

{svg bin, some-class, icon-group}

Result HTML code IN IE may look like:, _(*2)

<svg class="some-class" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-bin"></use>
</svg>

Result in Chrome, FF, Opera may look like:, _(*3)

<svg class="some-class" aria-hidden="true">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/svg/icon-group/symbol-defs.svg?v=1531909866#icon-bin"></use>
</svg>

Purpose

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., _(*4)

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">., _(*5)

Installation

Require library by Composer:, _(*6)

composer require dada-amater/latte-svg

Register extension in your config.neon and configure it:, _(*7)

extensions:
    latteSvg: DadaAmater\LatteSvg\Extension

latteSvg:
    baseDir: %wwwDir%
    wwwPathMask: 'images/svg/{group}/symbol-defs.svg'
    defaultGroup: base
    defaultIconClass: svg-icon
    iconNamePrefix: icon

Caveats & Limitations

Because svg 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., _(*8)