Задать вопрос
@lahomie93

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

Здравствуйте! У меня есть вопрос по SVG. Допустим у меня есть svg-код который полноценно работает на моей странице если я его вставляю прямо в разметку
<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>


Я не хочу дублировать svg-код каждый раз на странице, а хочу вынести в отдельный файл и импортировать с тэгом img. Когда я выношу разметку в отдельный svg файл (в том виде в котором я скопировал сюда) и пытаюсь импортировать картинку в img то ничего не отображается. Подскажите что я должен сделать?
  • Вопрос задан
  • 3984 просмотра
Подписаться 2 Простой Комментировать
Решения вопроса 1
RadCor
@RadCor
Если мой ответ вам помог, отмечайте его решением.
Если вы хотите сделать из SVG картинку и вызывать его чрез тег img, необходимо в тег SVG вставить атрибут xmlns="http://www.w3.org/2000/svg"

На выходе должно получить так

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


Демо: https://jsfiddle.net/pqLcfrt2/1/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Этого будет достаточно:
1) Создаешь файл example.svg
2) Вставляешь в него код ниже:
<?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>


У тебя не хватало атрибутов в тег svg
Ответ написан
Комментировать
LenovoId
@LenovoId Куратор тега SVG
svg, css,js
это и есть правильно - создаём чистый текстовый документ - помещаем этот код - переименовываем в название.svg и подключаем ....можно использовать преобразовав в base64 как url background ...так же можно подключать в html как simbol или как img или background или use

больше информации : svg-art.ru - автор этого сайта есть на ru.stackoverflow.com
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы