CODEWITHSUNDEEP
htmlsvg
Piuksu
Piuksu

Reputation: 137

Display svg file in HTML

I have this code:

<img src="https://piuksu.github.io/svg.svg" width="100">

It does not work.
What do I have to do?

Upvotes: 2

Views: 8456

Answers (1)

chrwahl
chrwahl

Reputation: 13110

An SVG image (like your https://piuksu.github.io/svg.svg) is an XML document. XML is a general markup language that can be used for a number of different purposes. The browser that is going to display the SVG image need to know what kind of XML document it is going to display. Therefor your must set the namespace (the xmlns="http://www.w3.org/2000/svg" attribute on <svg>) of the SVG image (and preferably also the XML declaration (the first line)).

So, the content of https://piuksu.github.io/svg.svg must be:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
  <path d="M0 50 L25 50 L25 97 L75 97 L75 50 L97 50" stroke="black" stroke-width="3" fill="none"/>
</svg>

Inline example (there the URL is replaced by a data URI, but it works the same):

<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIj4KICA8cGF0aCBkPSJNMCA1MCBMMjUgNTAgTDI1IDk3IEw3NSA5NyBMNzUgNTAgTDk3IDUwIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiLz4KPC9zdmc+" width="100"/>

Upvotes: 5

Related Questions