{"id":794,"date":"2025-06-11T23:51:20","date_gmt":"2025-06-11T15:51:20","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/php\/php-application-manual\/laravel\/794.html"},"modified":"2025-06-11T23:51:20","modified_gmt":"2025-06-11T15:51:20","slug":"laravel%ef%bc%9a%e5%a6%82%e4%bd%95%e5%9c%a8-blade-%e6%a8%a1%e6%9d%bf%e4%b8%ad%e6%98%be%e7%a4%ba-svg-%e5%9b%be%e7%89%87","status":"publish","type":"my1js","link":"https:\/\/www.zhaozhao123.cn\/php\/my1js\/794.html","title":{"rendered":"Laravel\uff1a\u5982\u4f55\u5728 Blade \u6a21\u677f\u4e2d\u663e\u793a SVG \u56fe\u7247"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n

在 Laravel 中，你可以通过多种方式在 Blade 模板中显示 SVG 图片。以下是几种常见的方法：<\/p>\n

方法一：使用 <img><\/code> 标签<\/h3>\n

直接在 Blade 模板中使用 <img><\/code> 标签来加载 SVG 文件。<\/p>\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Display SVG in Blade<\/title>\n<\/head>\n<body>\n    <img src=\"{{ asset('path\/to\/your\/image.svg') }}\" alt=\"SVG Image\">\n<\/body>\n<\/html><\/code><\/pre>\n
在这个例子中，asset()<\/code> 函数用于生成正确的 URL，以便在生产环境中正确引用资源文件。<\/p>\n
方法二：使用 url()<\/code> 和 asset()<\/code> 组合<\/h3>\n
如果你需要动态生成 SVG 的 URL，可以使用 url()<\/code> 和 asset()<\/code> 组合。<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Dynamic SVG in Blade<\/title>\n<\/head>\n<body>\n    <img src=\"{{ url('\/path\/to\/your\/image.svg') }}\" alt=\"Dynamic SVG Image\">\n<\/body>\n<\/html><\/code><\/pre>\n
方法三：使用 file_get_contents<\/code> 和 response()->streamAsBlob<\/code><\/h3>\n
如果你有权限访问 SVG 文件的本地路径，可以使用 file_get_contents<\/code> 来读取文件内容，并将其作为 Blob 对象返回，然后在 Blade 模板中使用 response()->streamAsBlob<\/code>。<\/p>\n
\/\/ 控制器方法\npublic function displaySvg()\n{\n    $svgContent = file_get_contents(public_path('path\/to\/your\/image.svg'));\n    return response()->streamAsBlob($svgContent, 'image.svg');\n}<\/code><\/pre>\n
然后在 Blade 模板中使用 response()->streamAsBlob<\/code> 返回的 Blob 对象。<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Stream As Blob SVG in Blade<\/title>\n<\/head>\n<body>\n    <script>\n        fetch('{{ route('display-svg') }}')\n            .then(response => response.blob())\n            .then(blob => {\n                const img = document.createElement('img');\n                img.src = URL.createObjectURL(blob);\n                document.body.appendChild(img);\n            });\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
示例代码<\/h3>\n
以下是一个完整的示例，展示了如何在 Blade 模板中使用 file_get_contents<\/code> 和 response()->streamAsBlob<\/code> 来显示 SVG 图片。<\/p>\n
控制器<\/strong><\/p>\n
use IlluminateHttpResponse;\n\npublic function displaySvg()\n{\n    $svgContent = file_get_contents(public_path('path\/to\/your\/image.svg'));\n    return response()->streamAsBlob($svgContent, 'image.svg');\n}<\/code><\/pre>\n
Blade 模板<\/strong><\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Stream As Blob SVG in Blade<\/title>\n<\/head>\n<body>\n    <script>\n        fetch('{{ route('display-svg') }}')\n            .then(response => response.blob())\n            .then(blob => {\n                const img = document.createElement('img');\n                img.src = URL.createObjectURL(blob);\n                document.body.appendChild(img);\n            });\n    <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
通过这些方法，你可以在 Laravel 中灵活地显示 SVG 图片。选择哪种方法取决于你的具体需求和项目结构。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
\r\n
\r\n
\r\n
\r\n
\r\n
\"黑板Bug讲师\"<\/figure>\r\n\r\n\r\n\r\n
黑板Bug讲师<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
介绍<\/h2>
SVG（可缩放矢量图形），通常被称为SVG，是一种基于XML的图像格式，用于创建二维图形，这些图形可以无限缩放而不会失真，使其成为响应式网页设计的理想选择。在本教程中，我们将探讨如何在Laravel框架中的Blade模板中高效地使用SVG图像。<\/p>
为什么使用SVGs？<\/h3>
在网页开发中，SVGs（矢量图形）承担着多种角色，从标志到复杂插图，得益于其可缩放性和通常比JPEG或PNG等位图图像更小的文件大小。此外，由于它们基于XML，因此可以使用CSS或JavaScript进行操作，从而实现交互式和动态的图形内容。<\/p>
在Blade模板中使用基本的SVG用法。<\/h2>
要开始使用SVG图像，请参考以下步骤：\n\n在Dreamweaver CC中，点击“插入”菜单，然后选择“图片”，在弹出的窗口中选择“自定义大小”或“自动调整大小”。\n\n点击“自定义大小”，在弹出的窗口中输入SVG文件的URL地址。\n\n保存并关闭文件后，在网页上就可以看到添加的SVG图像了。<\/p>
<!-- resources\/views\/your_view.blade.php -->\n<div>\n    {!! file_get_contents(public_path('images\/logo.svg')) !!}\n<\/div>\n<\/code><\/pre>
您可以用。file_get_contents<\/code>在 PHP 中，可以使用 file_get_contents() 函数来读取 SVG 文件的内容。以下是一个示例：\n$svgContent = file_get_contents(‘path\/to\/your\/svg\/file.svg’);\n然后，你可以根据需要处理这个 SVG 内容。例如，你可以将其转换为 HTML 或者进行其他操作。\n请注意，这只是一个基本的示例，实际使用时可能还需要考虑更多的因素，比如文件路径是否正确、SVG 文件是否存在等。{!! !!}<\/code>在Blade模板中输出未转义的注释。<\/p>
SVG Blade Component 是一个 SVG 图形组件，用于在网页上创建和显示叶片形状的图标或图形元素。<\/h2>
对于频繁使用的情况，封装SVG加载逻辑为一个可重用的Blade组件会非常有帮助。<\/p>
<!-- resources\/views\/components\/svg.blade.php -->\n@php\n    $svg = file_get_contents(public_path($name . '.svg'));\n@endphp\n{!! $svg !!}\n<\/code><\/pre>
在《刀锋战士》中，你可以像这样使用这个组件：<\/p>
<x-svg name=\"logo\" \/><\/code><\/pre>
该组件通过名称读取指定的SVG文件并将其嵌入到HTML中。<\/p>
控制SVG样式<\/h2>
嵌入式的SVG可以使用CSS类似地进行样式化。<\/p>
<style>\n    .svg-logo {\n        height: 50px;\n        width: auto;\n        fill: #3490dc;\n    }\n<\/style>\n\n<!-- In Blade -->\n<div class=\"svg-logo\">\n    {!! file_get_contents(public_path('images\/logo.svg')) !!}\n<\/div>\n<\/code><\/pre>
这种方法将允许对SVG元素进行统一流畅的样式控制。<\/p>
缓存SVG输出<\/h2>
每请求都返回原始文件内容会导致性能下降。更好的做法是在服务端缓存SVG输出。你可以通过在服务端包装SVG来实现这一点。file_get_contents<\/code>在Laravel的缓存Facade中调用它来做到这一点：<\/p>
<!-- resources\/views\/your_view.blade.php -->\n{!! Cache::remember('svg.logo', 60*24, function() {\n    return file_get_contents(public_path('images\/logo.svg'));\n}) !!}\n<\/code><\/pre>
这将把文件的输出存储在缓存中，在后续请求时从那里提供。<\/p>
在Laravel中进行SVG渲染的包。<\/h2>
如果你想获得更高级的特性，比如在行SVG渲染和操作，你可以考虑使用Blade Icons这样的包。<\/p>
composer require blade-ui-kit\/blade-icons<\/code><\/pre>
安装后，您可以将自定义的SVG文件添加到专用文件夹中，并通过包指令引用它们：<\/p>
<x-icon name=\"logo\" \/><\/code><\/pre>
这为SVG提供了干净简洁的语法。<\/p>
高级SVG操作<\/h2>
在更复杂的场景下，比如需要动态修改SVG的一部分时，可以结合Laravel的视图装饰器和Blade组件来实现。<\/p>
<!-- resources\/views\/components\/dynamic-svg.blade.php -->\n@php\n    $svgContents = file_get_contents(public_path($name . '.svg'));\n    $svgContents = preg_replace('\/#originalColor\/', $color, $svgContents);\n@endphp\n{!! $svgContents !!}\n<\/code><\/pre>
正在使用。preg_replace<\/code>我们可以在渲染之前动态更改SVG中的某些方面，例如填充颜色、大小或XML中的任何属性。<\/p>
保护SVG内容<\/h2>
在加载SVG或其他用户提供的内容时，安全性应该是首要考虑的。始终确保SVG被安全处理以防止潜在的XSS攻击。对于安全化，您可以使用客户端的DOMPurify包或选择PHP解决方案：<\/p>
composer require enshrined\/svg-sanitize<\/code><\/pre>
然后在输出前进行消毒：<\/p>
$safeSVG = SVG::sanitize($dirtySVG); \n{!! $safeSVG !!}<\/code><\/pre>
结论<\/h2>
使用SVG在Blade模板中嵌入可以增强应用程序的可扩展性和响应性。无论是直接嵌入、通过组件、进行高级操作还是配套包，关键是要明智地使用它们以优化性能和安全性。始终牢记可扩展性和安全性，并且您的图形将在所有设备上闪耀。<\/p><\/body>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
\r\n
\r\n
\r\n
\r\n
\r\n
\"长工码奴1523\"<\/figure>\r\n\r\n\r\n\r\n
长工码奴1523<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
要在 Laravel 的 Blade 模板中显示 SVG 图片，你需要使用 PHP 的 GD 库来加载和渲染 SVG 文件。以下是如何在 Blade 模板中显示 SVG 图片的步骤：<\/p>\n
步骤 1: 加载 SVG 文件<\/h3>\n
首先，确保你的服务器上安装了 PHP GD 库，并且已经将它添加到项目的依赖库中。如果没有，你可以通过 Composer 安装。<\/p>\n
composer require php-fig\/php-fig-standalone<\/code><\/pre>\n
然后，创建一个名为 images<\/code> 的文件夹，用于存放 SVG 文件。例如，你可以为你的项目创建一个名为 example.svg<\/code> 的文件。<\/p>\n
步骤 2: 在 Blade 模板中引入 SVG 文件<\/h3>\n
在你的 HTML 页面中，使用 <img><\/code> 标签插入 SVG 图像：<\/p>\n
<img src=\"{{ asset('images\/example.svg') }}\" alt=\"SVG Image\"><\/code><\/pre>\n
在这个例子中，{{ asset('images\/example.svg') }}<\/code> 是一个 URL 包含 SVG 文件路径的表达式。你需要确保这个路径指向你的服务器上保存的 SVG 文件。<\/p>\n
步骤 3: 使用 GD 库渲染 SVG 图像<\/h3>\n
要从 SVG 图像中提取元素并将其插入到 HTML 中，请使用 PHP 的 GD 库。这是一个简单的示例，展示如何从 SVG 图像中提取文本和图像：<\/p>\n
<?php\n\/\/ 首先，我们需要导入 GD 库。\nrequire 'vendor\/autoload.php';\n\nuse Imagick;\n\n$im = new Imagick('path_to_your_svg_file.jpg');\n$text = $im->getLayerByName('text_layer')->getText();\n\necho \"<div><h1>$text<\/h1><\/div>\";\n?><\/code><\/pre>\n
这段代码会输出 SVG 图形中的文本内容。<\/p>\n
示例代码<\/h3>\n
如果你想要更复杂地处理 SVG，比如从 SVG 图像中提取特定区域（如边框），可以使用 Imagick 类的 extractImage()<\/code> 方法。下面是一个例子：<\/p>\n
<?php\nuse Imagick;\nuse ImagickInterface;\n\n$im = new Imagick('path_to_your_svg_file.jpg');\n\n\/\/ 获取 SVG 文本层\n$textLayer = $im->getImageLayerByName('text_layer');\n\n\/\/ 创建一个新的 Imagick 对象来处理 SVG 内容\n$svgContent = new Imagick($textLayer);\n\n\/\/ 提取 SVG 文本\n$text = $svgContent->getText();\n\n\/\/ 将文本内容转换为 HTML\n$htmlText = '<pre>' . htmlspecialchars($text, ENT_QUOTES) . '<\/pre>';\n\necho \"<div>\" . $htmlText . \"<\/div>\";\n\n\/\/ 关闭 SVG 内容\n$svgContent->close();\n?><\/code><\/pre>\n
这将输出类似如下的内容：<\/p>\n
<pre>\n    Hello World\n<\/pre><\/code><\/pre>\n
这就是如何在 Laravel 的 Blade 模板中显示 SVG 图片的基本过程。根据你的具体需求，你可以扩展这部分代码以满足更多复杂的图形处理需求。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Bug编译狮 在 Laravel 中，你可以通过多种方式在 Blade 模&#26..<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false},"tags":[],"my1js2nav":[44],"tuisongtax":[],"class_list":["post-794","my1js","type-my1js","status-publish","hentry","my1js2nav-laravel"],"acf":{"qian_art_seotitle":"","qian_art_seotitle_source":{"label":"SEO\u6807\u9898","type":"text","formatted_value":""},"qian_art_seokws":"","qian_art_seokws_source":{"label":"SEO\u5173\u952e\u8bcd","type":"text","formatted_value":""},"qian_art_stzhong":"","qian_art_stzhong_source":{"label":"\u4e2d | \u77ed\u6807\u9898","type":"text","formatted_value":""}},"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js\/794","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/types\/my1js"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/media?parent=794"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tags?post=794"},{"taxonomy":"my1js2nav","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js2nav?post=794"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tuisongtax?post=794"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}