Как вставить svg в html?

Question

[Артур Кудашев]

Здравствуйте, есть файл mountain.svg:

<svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.83269 4.29038L8.55 4.90962L6.42692 3.40577L7.975 0.663462C8.46154 -0.221154 10.2308 -0.221154 10.7173 0.663462L13.1058 4.90962L10.4519 4.24615C10.2469 4.18561 10.027 4.20132 9.83269 4.29038ZM10.3192 6.01538L14.3 7.03269L18.1923 13.8885H0.5L5.49808 4.95385L7.93077 6.67885C8.1984 6.88249 8.55836 6.91678 8.85962 6.76731L10.3192 6.01538ZM19.7993 13.9327L14.8967 5.44116L15.7154 3.80385C16.1135 3.14038 17.4846 3.14038 17.8385 3.80385L23.5 13.9327H19.7993Z" fill="#5C2DAE"/>
</svg>

Как вставить его в html файл с помощью тега svg?

Answer 1

[Ankhena]

ctrl+c ctrl+v
https://jsfiddle.net/4ed5xjw7/

Comments

[Ankhena]

Артур Кудашев либо опишите, что именно у вас не получилось

[Артур Кудашев]

Ankhena, мне нужно чтобы эта картинка был отдельным файлом. Мне нужно что-то типо:

<svg src="mountain.svg"></svg>

[Артур Кудашев]

Ankhena, я с svg не разу не работал, поэтому не совсем могу понять как это сделать.

[Артур Кудашев]

Ankhena, я хочу это картинку вставить чтобы менять ей цвет. Я делаю меню с иконками. Обычно использую font awesome, но в данном проекте не могу этого сделать.

[Dima Polos]

Артур Кудашев, <img src="mountain.svg">

[Dima Polos]

Артур Кудашев, если Вам не надо менять ее через js/css, то так пойдет, если надо менять, то только ctrl+c -> ctrl+v, как описали выше.

[Ankhena]

Артур Кудашев,

мне нужно чтобы эта картинка был отдельным файлом. Мне нужно что-то типо:

<img src="flile-name.svg">

я хочу это картинку вставить чтобы меня ей цвет. Я делаю меню с иконками. Обычно использую font awesome, но в данном проекте не могу этого сделать.

Доступ к цвету (и другим css свойствам) только у тега svg, как в ответе.
Ну либо фильтрами.

[Артур Кудашев]

Dima Polos, я знаю, что можно копировать и вставить, но у меня много таких иконок и если я буду каждую вставлять, половина кода будет занимать svg.

[Артур Кудашев]

Dima Polos, разве в svg нельзя ссылаться на другой файл, чтобы использовать его?

[Ankhena]

Артур Кудашев, тогда svg собирается в спрайт, можно внешний css.yoksel.ru/svg-groups-use

[Rustam Bainazarov]

Артур Кудашев, можно. Изучайте спрайты из symbol и #use со ссылкой на внешний файл.

Ну ещё про полифил svg4everybody не забудьте, если нужна поддержка старых браузеров.

Answer 2

[wisgest]

<object id="svg1" type="image/svg+xml" data="mountain.svg"></object>

Можно менять через JS. Если не изменяет память к корневому элементу SVG можно добраться с помощью

document.getElementById("svg1").contentDocument.documentElement

.