如何在Body标签中包含SVG精灵图标？

时间：2017-02-14 作者：Sajad

我想在body标记后包含一个SVG图标文件，我使用以下代码：

<?php include_once("assets/img/sprites.svg"); ?>
但我有一个错误：

分析错误：语法错误，在/home/ostadba1/public\\u html/wp content/themes/ostad/assets/img/sprites中出现意外的T\\u字符串。svg在线1

这样做的目的是我想将这些图标与一行代码一起使用：

<svg class="icon"><use xlink:href="#shopping-cart"></use></svg>
如何在WordPress中正确加载SVG文件？

2 个回复
最合适的回答,由SO网友:user6552940 整理而成

这是因为在PHP中不应该这样包含SVG，
include_once 用于包含PHP文件
此错误背后的原因：

PHP Parse error: syntax error, unexpected version (T_STRING)
是因为PHP无法在定义XML版本时解析SVG文件的开头：

<?xml version="1.0" encoding="utf-8"?>
Solution 1: 要解决这个问题，只需从SVG文件中完全删除XML头标记

Solution 2: 遵循这些教程。（推荐）

  1. The Perfect WordPress Inline SVG Workflow
  2. Using Inline SVG Sprites in WordPress Themes这些教程将帮助您了解如何在中的PHP中包含SVGWordPress.

    现在，如何在body标记之后包含它们例如，如果主题在index.php 您需要修改index.php 并包括那里的SVG。

    Solution 3:

    <?php echo file_get_contents("filename.svg"); ?>
    您只需在PHP文件的HTML部分的任何位置回显SVG文件的内容即可。


    然而，在某种程度上，使用主题文件需要PHP和WordPress知识。

SO网友:Johansson

命令include_once() 用于包含php文件。SVG只是一个图像文件，应该像对待图像文件一样对待它（大多数情况下）。

在您的情况下，如果要将其用作字体，应使用以下命令将其包含在CSS文件中：

@font-face{
    font-family:my-font;
    url(\'YOUR SVG URL HERE\') format(\'svg\');}
然后可以使用定义的字体代码调用精灵的不同部分。关于如何使用SVG作为字体，有很多指南。

另一种选择是使用<img> 标签，正如Brian在评论中所建议的。

您还可以使用SVG作为背景图像，就像使用jpg 文件为background-image CSS中的属性。

标签： theme-development   svg   小码农  

相关推荐

如何实现我自己的图标而不是使用SVG图标系统

在WordPress 4.9.2中，我为2017年创建了一个儿童主题。我注意到它在页面底部带有自己的SVG图标系统，用于社交媒体图标。我看到一些代码是在site-info.php 文件，在wp_nav_menu().<nav class=\"social-navigation\" role=\"navigation\" aria-label=\"<?php esc_attr_e( \'Footer Social Links Menu\', \'twentyseventeen\' ); ?>