как вставить svg через тег <img>?

272

22 ноября 2021, 21:50

пробую вставить svg таким образом: <img src="/assets/menu/menubutton.svg"> но при этом ничего не работает (файл assets находится в корне, всё остальное тоже верно). возможно у меня присутствует ошибка в самом файле svg, что в нём должно быть?

код внутри файла svg выглядит так:

    <svg width="60" height="60"> 
<line x1="20" y1="30" x2="50" y2="30" stroke="black" stroke-width="5" stroke-linecap="round"/> 
<line x1="20" y1="40" x2="50" y2="40" stroke="black" stroke-width="5" stroke-linecap="round"/> 
<line x1="20" y1="50" x2="50" y2="50" stroke="black" stroke-width="5" stroke-linecap="round"/> 
</svg>

Answer 1

Как комментировал @Stranger in the Q необходимо добавить namespace svg

xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"

Второй параметр необходим, если вы будете использовать <use> и другие теги, которые ссылаются на источник по ID Так что лучше сразу привыкать писать оба атрибута, чтобы потом не мучиться в поисках ошибки SVG.

  <svg width="60" height="60"  xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
<line x1="20" y1="30" x2="50" y2="30" stroke="black" stroke-width="5" stroke-linecap="round"/> 
<line x1="20" y1="40" x2="50" y2="40" stroke="black" stroke-width="5" stroke-linecap="round"/> 
<line x1="20" y1="50" x2="50" y2="50" stroke="black" stroke-width="5" stroke-linecap="round"/> 
</svg>

Я сохранил этот код в отдельный файл menubutton.svg и залил его на сервер.

Далее вызываю его, как вы хотели с помощью <img>

<img src="https://svg-art.ru/files/menubutton.svg" />

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Нужно ли закрывать локальныеIO-потоки в Java

Если поток был создан локально, обязательно ли его закрывать в конце метода?

227

Java

Как передать в метод дополнительный параметр?

Имеется массив строк:

267

Java

Почему не устанавливаются поля объекту через SELECT запрос к MySQL в Java

Ошибок никаких не выдаёт, просто возвращает nullQuery, посылаемый в базу данных, предполагается в виде Query = "SELECT * FROM users WHERE Login = "Login" AND Password = 12345;

140

Java

Обрабатывать открываемый файл в Android Java

Я разрабатываю свой редактор Web-кода и хочу чтобы при нажатии на определённый файл (а именно html, js, css и txt) открывался редактор (MainActivity) и в EditText...

131