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
without seeing the code, we can not tell unfortunatly
Hello,@MarkBoots thanks for the feedback, here's the html
is there some not-closed comments in the svg file maybe?
I didn't apply any style to the svg, but if you need the css I can add it here.
no there aren't
it happens with all the icons? are there more in that file?
only with the hamburger icon. Im not sure if they are conflicting somehow.
i guess the issue lays within the file itself. are you able to share it?
ah, got it (i think).
That symbol is inside another <defs> tag.
all symbols are allready in defs, you can remove that
oh, and also the <svg>
I will give it a try
Did I understand you correctly ? I should remove the svg tag as well right?
yep
the svg
so all icons are a symbol inside a single <defs> tag and a single <svg> tag
Should I delete as instructed here ?
delete line 32,33,39,40
I delete these line however the issue persists
thanks for trying to help. well appreciated!
can you send the code / file itself
@MarkBoots thats file
this will be your svg
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 propertieshttps://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
also, you can throw all the paths into a single element
using an example, instead of this:
you can do this:
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
@ἔρως 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.
it's not
it means you forgot to close a tag