SVG tag does not show up in the rendered HTML

Support
1

I am adding SVG tag to my custom theme, so it is pure hardcoded svg code (not a media upload).
My code looks like this at this point (there are also css styles attached)

<div class="seven">
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 375 519">
    <defs>
      <linearGradient id="linear-gradient" x1="0" y1="259.5" x2="375" y2="259.5" gradientUnits="userSpaceOnUse">
        <stop offset=".26" stop-color="#38c2d7" />
        <stop offset=".4" stop-color="#47bfac" />
        <stop offset=".65" stop-color="#5fbd6a" />
        <stop offset=".76" stop-color="#6abe4e" />
      </linearGradient>
    </defs>
    <path class="cls-1" d="M59.5,507.5L242.5,134.5H11.5V11.5h352M126.5,507.5L331.5,72.5H63.5" />
  </svg>
</div>

However, the rendered page has this:

<div class="seven">
" "
</div>

Nothing shows up and I am not even sure where to look for this. I have a feeling that something in Local strips svg tag out. It’s not like the code is there but nothing shows up. The tag is not there at all.

System Details

  • Local Version: 7.1.2+6410

  • Operating System (OS) and OS version: Windows 10 Pro

Local Logs

local logs have no info when searching for ‘svg’

2

Hi @rilel

Does your theme or any plugins have cache or CSS that needs to be cleared/regenerated?

When you open up the dev console on the page do you see any errors?

3

CSS files are regenerated and the styles applied are there. At least I see the block with class seven and assigned styles. No other caching happens, I moved the block .seven to a different location on the page and it was moved but it’s still empty like so:

<div class="seven">
" "
</div>

No errors in the console, no issues (related to it) seen in debug.log

4

Some other things worth checking:

Do you have any security plugins on the site? These can sometimes block certain file types including SVGs.

Can you replicate the issue with a different theme? That would at least isolate it to something with the custom theme being an issue.

Check if there’s any CSS styling applied to the SVG that might be hiding it. Look for display: none; or visibility: hidden; in your CSS styles.

5

I also tried adding the simplest svg found from w3schools

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

the code remains the same

<div class="seven">
" "
</div>
6

I can not test with a different theme because the page is custom post type.

I tried switching to 2020 and inserting it right after the <header> tag, test svgs showed up. I’ll keep looking what’s different in out theme then.
Sorry for bothering!

1 Like
7

Not a bother at @rilel! I was just hoping to help get you pointed in a direction. If you have any other questions or concerns don’t hesitate to reach back out. We are always happy to help!

8

I found the issue. Maybe it will help someone else at some point. We have wp_kses stripping the content. That’s why svg show up in the header but not the content. Adding svg to wp_kses_allowed_html helped, since it is custom theme and I’m not too worried about SVGs

1 Like
9

Thank you for coming back and sharing that @rilel!