在Laravel 5 Blade模板中包含SVG内容

Question

在Laravel 5刀片模板中包含SVG文件(位于assets文件夹中)的内容的最佳方法是什么？

我不想使用image/object/embed标签,出于速度原因,这应该是内联SVG.

我知道我可以使用<?php file_get_contents("file.svg") ?>但是有更好的方法特定于Laravel/Blade吗？

编辑:澄清一下,该方法应该适用于所有 SVG文件,包括下面的文件.

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path stroke="red" fill="#00f" d="M10 10h100v100H10z"/>
</svg>

Answer 1

这是有效的,这是我能想到的最简单的方法:

{!! file_get_contents(asset('images/icon.svg')) !!}

Answer 2

类似于接受的答案,但有点清洁(imo).

使用laravel指令扩展刀片,像这样(在你的应用程序服务提供商,所概述这里):

    \Blade::directive('svg', function($arguments) {
        // Funky madness to accept multiple arguments into the directive
        list($path, $class) = array_pad(explode(',', trim($arguments, "() ")), 2, '');
        $path = trim($path, "' ");
        $class = trim($class, "' ");

        // Create the dom document as per the other answers
        $svg = new \DOMDocument();
        $svg->load(public_path($path));
        $svg->documentElement->setAttribute("class", $class);
        $output = $svg->saveXML($svg->documentElement);

        return $output;
    });

然后在你的刀片中使用它,如下所示:

        <div class="Login__image Login__cloud">
            @svg('cloud.svg', 'Cloud')
        </div>

Answer 3

为什么不将svg放入刀片模板？

resources/views/icons/dashboard.blade.php

然后使用刀片语法添加您的视图？

@include('icons.dashboard')

Answer 4

View Composer方法

我最终在服务提供商中使用了一个视图编辑器.

在服务提供商的boot()方法中:

// Wildcard view composer
view()->composer('*', function($view) {
    // Instantiate new DOMDocument object
    $svg = new DOMDocument();
    // Load SVG file from public folder
    $svg->load(public_path('images/logo.svg'));
    // Add CSS class (you can omit this line)
    $svg->documentElement->setAttribute("class", "logo");
    // Get XML without version element
    $logo = $svg->saveXML($svg->documentElement);
    // Attach data to view
    $view->with('logo', $logo);
});

在我看来:

<!-- Echo unescaped SVG content -->
{!! $logo !!}

我正在使用,DOMDocument因为它允许我删除不应该在HTML中的XML版本元素.

CSS类不是必需的,但可以节省我用另一个HTML元素包装徽标以进行样式设置.

如果您只需要特定刀片部分中的徽标,例如标题,则可以编写

view()->composer('header', function($view) {});

http://laravel.com/docs/5.0/views#view-composers
https://laracasts.com/series/laravel-5-fundamentals/episodes/25

刀片局部方法

这种方法不是最佳实践,因为这种代码实际上不应该在视图中.然而,它比在每个视图中添加PHP代码更简单,也更好.

使用以下代码创建一个新的部分(让我们说logo.blade.php):

<?php
// Instantiate new DOMDocument object
$svg = new DOMDocument();
// Load SVG file from public folder
$svg->load(public_path('images/logo.svg'));
// Add CSS class (you can omit this line)
$svg->documentElement->setAttribute("class", "logo");
// Echo XML without version element
echo $svg->saveXML($svg->documentElement);
?>

您现在可以通过包含部分内容来在刀​​片模板中使用SVG图像:

@include('logo')