<svg height='100' width='100' viewBox='0 0 100 100'> <style> .polylogobox { fill: #ef402a; transition: .2s; } .polylogobox:hover { fill: #fff; stroke: #ef402a; stroke-width: 3px; } .polylogobox:hover + text { fill: #ef402a; } .logoletter { font-size: 26px; fill: white; font-family: Arial, sans-serif; transition: .2s; } .logoname { font-size: 32px; fill: white; } </style> <polygon class='polylogobox' points='22,0 44,0 48,6 72,6 72,46 22,46' /> <text class='logoletter' x='38' y='36'>E</text> <text class='logoname' x='6' y='94'>Expire</text> </svg>

Made such a logo using SVG

I saved it in .svg format, and then I tried to add it to the page using the img tag like this:

 <img src="img/logo.svg" alt="asd">

For some reason, the logo does not want to be added, the path is 100% correct, the file name is also 100% correct.
If you add the same code to the page without saving to the SVG file, then everything works.

    1 answer 1

    The thing is that you are trapped in the difference between the work of the Html parsers and xml
    The first does not give an error message about the absence of the Namespaces indication. And the svg file will not work without specifying Namespaces

    For verification, try saving your logo code to a file with * .svg extension.

    The code will not be executed and the xml parser will display an error message.

    • Therefore, always add in the header svg Namespaces

    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" height='100' width='100' viewBox='0 0 100 100'>

    • Now the svg file call will work:

      <img src="img/logo.svg" width="200" height="200" alt="image description">

    • Specifying the width and height, you can further adjust the size of the logo.

    Your next question will be why the hover animation does not work.

    Because you call the svg file via <img src... In this case, your file is treated as a picture and therefore the animation will not be executed - ( transition: .2s;)

    To perform the animation, you need to connect the file using the command <object>

    <object type="image/svg+xml" data="img/logo.svg" width="200" height="200"> </object>

    Learn more about other ways to connect svg files here.

    • one
      Sasha, as always ... a great answer ... detailed and detailed! The plus sign from me is user33274