How to put svg into a separate file?

Question

HTML

Hello! I have a question about SVG. Let's say I have an svg code that fully works on my page if I insert it directly into the markup

<svg width="42" height="32" viewBox="0 0 42 32">
<path d="M17 32h19c0.345 0 0.665-0.178 0.848-0.47l5-8c0.287-0.459 0.157-1.062-0.293-1.362l-3-2c-0.425-0.284-0.996-0.201-1.323 0.192l-3.232 3.878v-15.238c0-0.552-0.448-1-1-1h-4c-0.552 0-1 0.448-1 1v6.219l-11.243 2.811c-0.445 0.111-0.757 0.511-0.757 0.97v12c0 0.552 0.448 1 1 1zM35.446 30h-17.446v-10.219l2-0.5v5.719c0 0.552 0.448 1 1 1s1-0.448 1-1v-6.219l2-0.5v4.719c0 0.552 0.448 1 1 1s1-0.448 1-1v-5.219l2-0.5v7.719c0 0.552 0.448 1 1 1s1-0.448 1-1v-15h2v17c0 0.421 0.264 0.797 0.66 0.94s0.839 0.023 1.109-0.3l4.425-5.31 1.444 0.963-4.192 6.707z" fill="#444444"></path>
<path d="M24.001 13.876c0.164 0 0.331-0.040 0.484-0.126 0.483-0.268 0.657-0.877 0.389-1.36-0.572-1.031-0.875-2.203-0.875-3.391 0-3.86 3.14-7 7-7s7 3.14 7 7c0 1.187-0.302 2.36-0.874 3.391-0.268 0.483-0.094 1.092 0.389 1.36s1.092 0.094 1.36-0.389c0.736-1.327 1.126-2.835 1.126-4.361 0-4.963-4.037-9-9-9s-9 4.037-9 9c0 1.526 0.389 3.034 1.126 4.361 0.183 0.329 0.524 0.515 0.875 0.515z" fill="#444444"></path>
<path d="M1 8l7-7v5h12v4h-12v5z" fill="#444444"></path>
</svg>

I do not want to duplicate the svg code every time on the page, but I want to put it in a separate file and import it with the img tag. When I put the markup in a separate svg file (in the form in which I copied it here) and try to import the image into img, nothing is displayed. Tell me what should I do?

Answer 1

If you want to make a picture out of SVG and call it through the img tag, you need to insert an attribute into the SVG tag xmlns="http://www.w3.org/2000/svg"
. The output should look like this

<svg xmlns="http://www.w3.org/2000/svg" width="42" height="32" viewBox="0 0 42 32">
<path d="M17 32h19c0.345 0 0.665-0.178 0.848-0.47l5-8c0.287-0.459 0.157-1.062-0.293-1.362l-3-2c-0.425-0.284-0.996-0.201-1.323 0.192l-3.232 3.878v-15.238c0-0.552-0.448-1-1-1h-4c-0.552 0-1 0.448-1 1v6.219l-11.243 2.811c-0.445 0.111-0.757 0.511-0.757 0.97v12c0 0.552 0.448 1 1 1zM35.446 30h-17.446v-10.219l2-0.5v5.719c0 0.552 0.448 1 1 1s1-0.448 1-1v-6.219l2-0.5v4.719c0 0.552 0.448 1 1 1s1-0.448 1-1v-5.219l2-0.5v7.719c0 0.552 0.448 1 1 1s1-0.448 1-1v-15h2v17c0 0.421 0.264 0.797 0.66 0.94s0.839 0.023 1.109-0.3l4.425-5.31 1.444 0.963-4.192 6.707z" fill="#444444"></path>
<path d="M24.001 13.876c0.164 0 0.331-0.040 0.484-0.126 0.483-0.268 0.657-0.877 0.389-1.36-0.572-1.031-0.875-2.203-0.875-3.391 0-3.86 3.14-7 7-7s7 3.14 7 7c0 1.187-0.302 2.36-0.874 3.391-0.268 0.483-0.094 1.092 0.389 1.36s1.092 0.094 1.36-0.389c0.736-1.327 1.126-2.835 1.126-4.361 0-4.963-4.037-9-9-9s-9 4.037-9 9c0 1.526 0.389 3.034 1.126 4.361 0.183 0.329 0.524 0.515 0.875 0.515z" fill="#444444"></path>
<path d="M1 8l7-7v5h12v4h-12v5z" fill="#444444"></path>
</svg>

Demo: https://jsfiddle.net/pqLcfrt2/1/

Answer 2

This will be enough:
1) Create an example.svg file
2) Paste the code below into it:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="42" height="32" viewBox="0 0 42 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<path d="M17 32h19c0.345 0 0.665-0.178 0.848-0.47l5-8c0.287-0.459 0.157-1.062-0.293-1.362l-3-2c-0.425-0.284-0.996-0.201-1.323 0.192l-3.232 3.878v-15.238c0-0.552-0.448-1-1-1h-4c-0.552 0-1 0.448-1 1v6.219l-11.243 2.811c-0.445 0.111-0.757 0.511-0.757 0.97v12c0 0.552 0.448 1 1 1zM35.446 30h-17.446v-10.219l2-0.5v5.719c0 0.552 0.448 1 1 1s1-0.448 1-1v-6.219l2-0.5v4.719c0 0.552 0.448 1 1 1s1-0.448 1-1v-5.219l2-0.5v7.719c0 0.552 0.448 1 1 1s1-0.448 1-1v-15h2v17c0 0.421 0.264 0.797 0.66 0.94s0.839 0.023 1.109-0.3l4.425-5.31 1.444 0.963-4.192 6.707z" fill="#444444"></path>
<path d="M24.001 13.876c0.164 0 0.331-0.040 0.484-0.126 0.483-0.268 0.657-0.877 0.389-1.36-0.572-1.031-0.875-2.203-0.875-3.391 0-3.86 3.14-7 7-7s7 3.14 7 7c0 1.187-0.302 2.36-0.874 3.391-0.268 0.483-0.094 1.092 0.389 1.36s1.092 0.094 1.36-0.389c0.736-1.327 1.126-2.835 1.126-4.361 0-4.963-4.037-9-9-9s-9 4.037-9 9c0 1.526 0.389 3.034 1.126 4.361 0.183 0.329 0.524 0.515 0.875 0.515z" fill="#444444"></path>
<path d="M1 8l7-7v5h12v4h-12v5z" fill="#444444"></path>
</svg>

You were missing attributes in the svg tag

Answer 3

this is correct - create a clean text document - put this code - rename it to .svg title and include .... can be used by converting to base64 as url background ... you can also include in html as simbol or as img or background or use
more information : svg-art.ru - the author of this site is on ru.stackoverflow.com