Display svg file in HTML-CodePudding

I have this code:

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

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

CodePudding user response：

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"/>

CodePudding user response：

You can directly add the SVG code (code in the link) to the HTML file

<!DOCTYPE html>
<html>
<body>


<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>
 
</body>
</html>