README

示例

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

生成的 HTML 代码可能看起来像

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

目的

这是一个单一功能的辅助库，为 PHP 模板引擎 Latte 提供宏定义。它在编译时加载 SVG 源文件并将其嵌入到 HTML 代码中。

这样做的动机是，之后可以通过 CSS 来样式化 SVG。将 SVG 链接为图像（如 <img src="icons/help.svg">）是无法轻松做到这一点的。

安装

使用Composer 安装库

composer require polyweb-cz/embedded-svg

在您的 config.neon 中注册扩展并配置它

extensions:
    embeddedSvg: PolywebCz\EmbeddedSvg\Extension

embeddedSvg:
    baseDir: %wwwDir%/img

配置

还有一些其他可选的选项

embeddedSvg:
    # change name of the macro
    macroName: svgIcon

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

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

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

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

您可以多次加载该扩展。在这种情况下，通过 macroName 选项更改宏名称。

选项 defaultAttributes 是为生成的 <svg> 标签提供的 XML 属性列表。这些属性将被合并。优先级（从高到低）是：

• 宏标签属性
• 默认属性
• 从文件加载的 <svg> 标签的属性

如果属性值为 null，则不会渲染。您可以通过这种方式从 SVG 文件中取消设置属性。

添加到 onLoad 事件的回调函数在 SVG 内容成功加载到 DOM 时被调用。其签名是

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

注意事项与限制

因为 embeddedSvg 是一个宏，它只编译一次 PHP 并然后缓存。所以，当您更改宏配置（可能是在 NEON 中）时，您可能需要清除 Latte 缓存。