如何在 Drupal7 中内嵌 SVG？

Question

我想将我的 svg 代码放在 Drupal7 的 html 中。但我不知道应该把它放在哪个文件中，或者到底放在哪一行。

我想在我的 superfish 菜单中放置一个 SVG 菜单图标（在移动模式下）。我如何知道应该搜索哪个文件？

这是我的 superfish 文件：

?>
<div <?php print $attributes; ?>>

  <nav id="main-menu" class="main-menu navigation block-content clearfix2" role="navigation">
    <?php print render($title_prefix); ?>
     <?php if (isset($title) && $title): ?>
      <h3<?php print $title_attributes; ?>><?php print $title; ?></h3>
    <?php endif; ?>
    <?php print render($title_suffix); ?>
    <?php print $content; ?>
  </nav>

</div><!-- /.block -->

这是我的 svg 文件：

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="menu" viewBox="0 0 32 32"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
</symbol>
</svg>

然后呢？我该怎么办？

Answer 1

将 svg 文件保存在主题中，即主题的

img

目录中：

/sites/all/themes/my_theme/img/image.svg

或者你所说的保存主题图像的目录。

然后将其用作常规图像：

<img src="/sites/all/themes/my_theme/img/image.svg" alt="" />

Answer 2

截至 2024 年，最简单的方法就是将 SVG 代码放在 HTML 中。

?>
<div <?php print $attributes; ?>>

  <svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="menu" viewBox="0 0 32 32"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/>
    </symbol>
  </svg>

  <nav id="main-menu" class="main-menu navigation block-content clearfix2" role="navigation">
    <?php print render($title_prefix); ?>
     <?php if (isset($title) && $title): ?>
      <h3<?php print $title_attributes; ?>><?php print $title; ?></h3>
    <?php endif; ?>
    <?php print render($title_suffix); ?>
    <?php print $content; ?>
  </nav>

</div><!-- /.block -->

参考https://css-tricks.com/pretty-good-svg-icon-system/

当然还有 Drupal 10。