dada-amater/latte-svg

Latte macro to embed SVG from file into HTML

v1.4.1 2022-10-11 21:08 UTC

Requires

• php: >=7.1.0
• latte/latte: ^2.5.0
• milo/embedded-svg: ^1.0.0

MIT

• David Dvořák

• nette
• latte
• embedded
• svg
• macro

README

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

Result HTML code IN IE may look like:

<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:

<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:

<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.

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">.

Installation

Require library by Composer:

composer require dada-amater/latte-svg

Register extension in your config.neon and configure it:

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.