Genesis Custom Block not allowing SVG’s

  • Hello,
    I’ve created a custom button with the Custom block plugin and the button uses a couple of SVG’s for background graphics and an icon. The background graphics are completely fine, it’s only the icon I am having the issue with. The icon never seems to appear and in the inspector HTML, it’s like the code for the SVG has been deleted.

    I’ve tried to WordPress custom HTML Block and added the same HTML there and all of the SVG’s render perfectly. it’s only on the custom block that the icon doesn’t appear.

    Any Help with fixing this is greatly appreciated.

    Thanks.

    (Here is the HTML for the button if that helps)

    <div class="dbtb-button-wrap">
  <a href="#" class="dbtb-button">
    <div class="dbtb-button-swirl-wrap">
      <div class="dbtb-button-swirl bottom-swirl">
        <img src="/wp-content/uploads/2022/01/Website-Button-swirl-bottom.svg" alt="Bottom Swirl">
      </div>
      <div class="dbtb-button-swirl middle-swirl">
        <img src="/wp-content/uploads/2022/01/Website-Button-swirl-middle.svg" alt="Middle Swirl">
      </div>
      <div class="dbtb-button-swirl top-swirl">
         <img src="/wp-content/uploads/2022/01/Website-Button-swirl-top.svg" alt="Top Swirl">
      </div>
    </div>
    <span class="dbtb-button-text"> Click Me
    </span>
    <div class="dbtb-button-icon">
      <svg style="display:inline-block;vertical-align:middle" viewBox="0 0 24 24" height="1em" width="1em" fill="none" stroke="currentColor" xmlns="https://www.w3.org/2000/svg" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="9 18 15 12 9 6">
        </polyline>
      </svg>
    </div>
  </a>
</div>
Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    Hi @jasoncracknell,
    Hm, that might require using PHP templates and block_value().

    block_value() doesn’t escape the value, where it looks like the <svg> is getting escaped from your snippet above.

    Thread Starter jasoncracknell

    (@jasoncracknell)

    Hi @ryankienstra I only really know CSS and HTML so I’m not sure what I’m meant to do with the block_value you’re talking about. could you explain how I am meant to use it/add it to it my site?

    Thanks for the help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Genesis Custom Block not allowing SVG’s’ is closed to new replies.