Kevin Powell - Community•9mo ago

SVG hambuger icon preventing content on the page to display

When I comment out the svg from the html file it still prevents the content from display. The content only displays when I delete it from the html, file. There are no specific styles applied to the svg. I'm wondering what the issue might be.

27 Replies

MarkBoots•9mo ago

without seeing the code, we can not tell unfortunatly

sacarima (Class - 50)•9mo ago

sacarima (Class - 50)•9mo ago

Hello,@MarkBoots thanks for the feedback, here's the html

MarkBoots•9mo ago

is there some not-closed comments in the svg file maybe?

sacarima (Class - 50)•9mo ago

I didn't apply any style to the svg, but if you need the css I can add it here. no there aren't

MarkBoots•9mo ago

it happens with all the icons? are there more in that file?

sacarima (Class - 50)•9mo ago

only with the hamburger icon. Im not sure if they are conflicting somehow.

MarkBoots•9mo ago

i guess the issue lays within the file itself. are you able to share it?

sacarima (Class - 50)•9mo ago

MarkBoots•9mo ago

ah, got it (i think). That symbol is inside another <defs> tag. all symbols are allready in defs, you can remove that

MarkBoots•9mo ago

oh, and also the <svg>

sacarima (Class - 50)•9mo ago

I will give it a try Did I understand you correctly ? I should remove the svg tag as well right?

MarkBoots•9mo ago

yep the svg

<svg>
  <defs>
    <symbol>....</symbol>
    <symbol>....</symbol>
    <symbol>....</symbol>
    <symbol>....</symbol>
  </defs>
</svg>

<svg>
  <defs>
    <symbol>....</symbol>
    <symbol>....</symbol>
    <symbol>....</symbol>
    <symbol>....</symbol>
  </defs>
</svg>

so all icons are a symbol inside a single <defs> tag and a single <svg> tag

sacarima (Class - 50)•9mo ago

Should I delete as instructed here ?

MarkBoots•9mo ago

delete line 32,33,39,40

sacarima (Class - 50)•9mo ago

I delete these line however the issue persists

sacarima (Class - 50)•9mo ago

thanks for trying to help. well appreciated!

MarkBoots•9mo ago

can you send the code / file itself

sacarima (Class - 50)•9mo ago

my-project-main.zip

sacarima (Class - 50)•9mo ago

@MarkBoots thats file

MarkBoots•9mo ago

this will be your svg

symbol-defs.svg

ἔρως•9mo ago

by the way, instead of using variables and properties, just use currentColor everywhere then, when you <use href="...">, you can just use color on it repeated stuff can be put inside a single <g> with the repeated properties

ἔρως•9mo ago

https://yqnn.github.io/svg-path-editor/ <-- you can use this to minify the size of your paths

SvgPathEditor

Online editor to create and manipulate SVG paths

ἔρως•9mo ago

also, you can throw all the paths into a single element using an example, instead of this:

<symbol id="icon-arrow-narrow-up-right" viewBox="0 0 32 32">
  <path fill="none" stroke="#777" style="stroke: var(--color3, #777)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.0800" d="M8 24l16-16"></path>
  <path fill="none" stroke="#777" style="stroke: var(--color3, #777)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.0800" d="M13.333 8h10.667v10.667"></path>
</symbol>

<symbol id="icon-arrow-narrow-up-right" viewBox="0 0 32 32">
  <path fill="none" stroke="#777" style="stroke: var(--color3, #777)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.0800" d="M8 24l16-16"></path>
  <path fill="none" stroke="#777" style="stroke: var(--color3, #777)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.0800" d="M13.333 8h10.667v10.667"></path>
</symbol>

you can do this:

<symbol id="icon-arrow-narrow-up-right" viewBox="0 0 32 32">
  <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2" d="M8 24l16-16M13 8h11v11"/>
</symbol>

<symbol id="icon-arrow-narrow-up-right" viewBox="0 0 32 32">
  <path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2" d="M8 24l16-16M13 8h11v11"/>
</symbol>

you will see very very very tiny differences, but it will be so microscopic that nobody else will notice returning to the main question, how do you know it is the svg causing this? maybe it's something else

sacarima (Class - 50)•9mo ago

@ἔρως Thank you for your help, I will try it. I think they are conflicting because when I removed one of the svg from the header the the content is displayed. I have two SVG tags in the header. On eSVG is for the logo and the other one is for the hamburger menu icon. When I remove either of the two then it works, the content appear,. What I did as solution, delete the hamburger menu icon tag and replaced it with a png image and its working. I'm not sure whether this is a solution or not.

ἔρως•9mo ago

it's not it means you forgot to close a tag

Gaming

Programming

SVG hambuger icon preventing content on the page to display