CODEWITHSUNDEEP
javascripthtmlcssxmlsvg
alphaleonis
alphaleonis

Reputation: 1349

Why would SVG sprite XML file display as text string on server, but not locally?

I am trying to implement custom svg icons using an <object> tag, and everything works fine locally. When I push to the server, however, I get the text string of the xml file in place of my svg image.

index.html

<object type="image/svg+xml" data="sprite.svg#iconA" class="icon icon-iconA"></object>

sprite.svg

<?xml version="1.0"?>
  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <defs>
    <style><![CDATA[
      .sprite { display: none; }
      .sprite:target { display: inline; }
      ]]></style>
  </defs>

   <g class="sprite" id="iconA">
   <path fill="#000000" d="..."></path>
  </g>

  <g class="sprite" id="iconB">
    <path fill="#000000" d="..."></path>
  </g>

</svg>

style.css

.icon {
  display: inline-block;
  text-indent: 100%;
  fill: currentColor;
}

.icon-iconA {
  width: 6.5em;
  height: 6.5em;
}

Furthermore, if I navigate to the absolute path of the sprite.svg file locally in the browser, I can see the contents of the file as svg images, but if I do the same on the server I get a tiny text box with a scroll bar that outputs the XML file <?xml version="1.0" encoding="utf-8"?><svg ...".

What am I doing wrong?

Upvotes: 0

Views: 456

Answers (1)

thoughtrepo
thoughtrepo

Reputation: 8383

My guess is that your server is sending the incorrect mime-type and the browser thinks it's plain text or XML. If so, the correct mime-type is image/svg+xml like in your object tag.

Upvotes: 1

Related Questions