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

Question

[lahomie93]

Здравствуйте! У меня есть вопрос по 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 то ничего не отображается. Подскажите что я должен сделать?

Answer 1

[Капитан Какао]

Если вы хотите сделать из 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/

Comments

[lahomie93]

У меня потребность возникла вынести еще один элемент в блок use. Что мне в таком случае сделать?

Мой код svg

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="logo" viewBox="0 0 170.1 62.4">
    <path d="M122.5,5.7h1l1.1,2.1h0.9l-1-2c-0.1-0.2-0.2-0.3-0.2-0.3v0c0.5-0.1,1-0.6,1-1.4c0-0.9-0.6-1.6-1.6-1.6h-1.9
	v5.3h0.8V5.7z M122.5,3.2h1c0.6,0,0.9,0.3,0.9,0.9c0,0.6-0.4,1-0.9,1h-1V3.2z"/>
    <path d="M123.4,10.2c2.7,0,4.8-2.2,4.8-4.9c0-2.7-2.1-4.9-4.8-4.9c-2.6,0-4.8,2.2-4.8,4.9
	C118.6,8,120.7,10.2,123.4,10.2z M123.4,1c2.3,0,4.1,1.8,4.1,4.2c0,2.4-1.8,4.2-4.1,4.2c-2.3,0-4-1.8-4-4.2
	C119.4,2.9,121.1,1,123.4,1z"/>
    <path d="M168.2,32.6c-0.8-1.3-3.4-5.4-3.5-5.5c-0.1-0.1-0.1-0.3-0.3-0.1c-0.1,0.1-0.4,1,0,2.2c0.3,1.3,0.5,1.7,0.7,2.4
	c0.2,0.5,0,0.8-0.8,0.8h-64.1c0,0,0-8.3,0-16.5c0-7.7,0-15.2,0-15.3c0-0.3,0-0.4-0.3-0.4h-3.4c-0.2,0-0.4,0.2-0.5,0.4
	C88.9,14,81.2,24.4,73.6,32.3c-9.6,0-19,0-19.1,0c-0.3,0-0.3,0.1-0.5,0.4c-0.1,0.3-2.1,4.1-2.3,4.7c-0.2,0.3-0.1,0.5,0.3,0.5
	c6.4,0,11.5,0.4,14.9,0.8C49.2,54.1,32.2,57.6,22.6,57.6c-22.9,0-21.6-20.4-6-23.3c0.7-0.1,1.5-1.5,1.2-1.4
	c-25.3,4-21.5,29.4,4.2,29.4c12.1,0,31.1-3.6,51.1-22.7c6.1,1.3,10.5,3.2,12.4,4.5c0,0-0.1,0.1-0.1,0.1c-4.5-0.4-12.4,1.7-15,5.6
	c-1,1.6-1.3,4-0.4,5.7c2.8,4.9,11.2,4,15.7,2.6c2.6-0.8,6.2-2.4,8.6-5.7v7.9c0,0.9,0.8,1,1.2,0.7c0.8-0.6,3.5-2.5,4.5-3.2
	c0.1-0.1,0.3-0.2,0.3-0.5c0-0.1,0-2,0-4.8c3.1,1.5,11.2,5.5,12.1,5.9c1.2,0.5,1.4,0.4,1.7,0.2c1.2-0.8,1.2-0.8,3.5-2.5
	c0.2-0.1,0.1-0.3-0.1-0.4c-0.2-0.1-11.3-5.7-11.3-5.7s5.6-4.1,6.9-5.1c1-0.8,0.3-1.6-0.2-1.6c-3.2,0-3.2,0-7.5,0
	c-0.3,0-0.3,0.1-0.2,0.2c1,1.7-0.8,2.4-1.9,3.4c-3.8,2.8-1.1,0.9-3,2.3c0-5.3,0-11.2,0-11.2s64.9,0,65.2,0c0.3,0,0.4-0.2,0.6-0.5
	c0.2-0.2,2-3.4,2.2-3.9C168.5,33.2,168.4,32.9,168.2,32.6z M88.6,50.5c-0.6,2.1-4.4,3.6-6.4,4.1c-2.2,0.5-7.4,1-6.5-2.4
	c1.1-3.8,8.2-5.2,11.5-4.2C88.6,48.4,88.9,49.4,88.6,50.5z M94.3,46.4c-1.2-3-4.9-6.3-12.2-8.5c8.7,0,12.2,0,12.2,0
	S94.3,41.9,94.3,46.4z M94.3,32.3c0,0-6.5,0-14.3,0c4.8-5.4,9.6-11.7,14.3-19.2v2.7V32.3z"/>
</svg>

Код страницы где вставляется логотип. В дальнейшем я хочу менять цвет логотипа в различных местах

<svg>
<use xlink:href="#logo"></use>
</svg>

Вышеуказанный код не работает. Что мне исправить тут?

[Капитан Какао]

lahomie93, если ответ на заданный вопрос вам помог, отметьте пожалуйста его решением.
Касательно второго вопроса, для использования так называемых SVG спрайтов, необходимую иконку в начале оборачиваем в тег <symbol/> и прописываем в неге атрибуты из тега <svg/>
А далее вызываем через use как вы это и делали ранее.

Демо: https://jsfiddle.net/7wgby2rk/2/

[lahomie93]

<?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  xmlns="http://www.w3.org/2000/svg" >
    <symbol id="logo" viewBox="0 0 170.1 62.4">
        <path d="M122.5,5.7h1l1.1,2.1h0.9l-1-2c-0.1-0.2-0.2-0.3-0.2-0.3v0c0.5-0.1,1-0.6,1-1.4c0-0.9-0.6-1.6-1.6-1.6h-1.9
             v5.3h0.8V5.7z M122.5,3.2h1c0.6,0,0.9,0.3,0.9,0.9c0,0.6-0.4,1-0.9,1h-1V3.2z"/>
        <path d="M123.4,10.2c2.7,0,4.8-2.2,4.8-4.9c0-2.7-2.1-4.9-4.8-4.9c-2.6,0-4.8,2.2-4.8,4.9
             C118.6,8,120.7,10.2,123.4,10.2z M123.4,1c2.3,0,4.1,1.8,4.1,4.2c0,2.4-1.8,4.2-4.1,4.2c-2.3,0-4-1.8-4-4.2
             C119.4,2.9,121.1,1,123.4,1z"/>
        <path d="M168.2,32.6c-0.8-1.3-3.4-5.4-3.5-5.5c-0.1-0.1-0.1-0.3-0.3-0.1c-0.1,0.1-0.4,1,0,2.2c0.3,1.3,0.5,1.7,0.7,2.4
             c0.2,0.5,0,0.8-0.8,0.8h-64.1c0,0,0-8.3,0-16.5c0-7.7,0-15.2,0-15.3c0-0.3,0-0.4-0.3-0.4h-3.4c-0.2,0-0.4,0.2-0.5,0.4
             C88.9,14,81.2,24.4,73.6,32.3c-9.6,0-19,0-19.1,0c-0.3,0-0.3,0.1-0.5,0.4c-0.1,0.3-2.1,4.1-2.3,4.7c-0.2,0.3-0.1,0.5,0.3,0.5
             c6.4,0,11.5,0.4,14.9,0.8C49.2,54.1,32.2,57.6,22.6,57.6c-22.9,0-21.6-20.4-6-23.3c0.7-0.1,1.5-1.5,1.2-1.4
             c-25.3,4-21.5,29.4,4.2,29.4c12.1,0,31.1-3.6,51.1-22.7c6.1,1.3,10.5,3.2,12.4,4.5c0,0-0.1,0.1-0.1,0.1c-4.5-0.4-12.4,1.7-15,5.6
             c-1,1.6-1.3,4-0.4,5.7c2.8,4.9,11.2,4,15.7,2.6c2.6-0.8,6.2-2.4,8.6-5.7v7.9c0,0.9,0.8,1,1.2,0.7c0.8-0.6,3.5-2.5,4.5-3.2
             c0.1-0.1,0.3-0.2,0.3-0.5c0-0.1,0-2,0-4.8c3.1,1.5,11.2,5.5,12.1,5.9c1.2,0.5,1.4,0.4,1.7,0.2c1.2-0.8,1.2-0.8,3.5-2.5
             c0.2-0.1,0.1-0.3-0.1-0.4c-0.2-0.1-11.3-5.7-11.3-5.7s5.6-4.1,6.9-5.1c1-0.8,0.3-1.6-0.2-1.6c-3.2,0-3.2,0-7.5,0
             c-0.3,0-0.3,0.1-0.2,0.2c1,1.7-0.8,2.4-1.9,3.4c-3.8,2.8-1.1,0.9-3,2.3c0-5.3,0-11.2,0-11.2s64.9,0,65.2,0c0.3,0,0.4-0.2,0.6-0.5
             c0.2-0.2,2-3.4,2.2-3.9C168.5,33.2,168.4,32.9,168.2,32.6z M88.6,50.5c-0.6,2.1-4.4,3.6-6.4,4.1c-2.2,0.5-7.4,1-6.5-2.4
             c1.1-3.8,8.2-5.2,11.5-4.2C88.6,48.4,88.9,49.4,88.6,50.5z M94.3,46.4c-1.2-3-4.9-6.3-12.2-8.5c8.7,0,12.2,0,12.2,0
             S94.3,41.9,94.3,46.4z M94.3,32.3c0,0-6.5,0-14.3,0c4.8-5.4,9.6-11.7,14.3-19.2v2.7V32.3z"/>
    </symbol>
</svg>

вот у меня сейчас такой код лежит в отдельном файле logo.svg в папке img. Но вставка снова не работает. Я должен как то подключать файл на основную страницу?

<svg>
<use xlink:href="#logo"></use>
</svg>

[Капитан Какао]

lahomie93, данная схема работает только в том случае, если весь SVG код находиться в теле а не в отдельных svg файлах.

Но, если вы не хотите вставлять SVG код в html код а хотите его хранить в отдельных svg файлах.
Можно вставлять через тег img а при загрузке страниц доставать их от туда. К тому же этот способ позволит добавлять CSS стили вашим svg изображениям.

То есть берёте любую свг иконку (одиночную иконку а не спрайт) вставляете в тег img
<img src="test.svg">
подключаете jquery и вставляете этот код

$(document).ready(function(){

        jQuery('img[src*=".svg"]').each(function(){
            var $img = jQuery(this);
            var imgID = $img.attr('id');
            var imgClass = $img.attr('class');
            var imgURL = $img.attr('src');

            jQuery.get(imgURL, function(data) {
                // Get the SVG tag, ignore the rest
                var $svg = jQuery(data).find('svg');

                // Add replaced image ID to the new SVG
                if(typeof imgID !== 'undefined') {
                    $svg = $svg.attr('id', imgID);
                }
                // Add replaced image classes to the new SVG
                if(typeof imgClass !== 'undefined') {
                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                }

                // Remove any invalid XML tags as per http://validator.w3.org
                $svg = $svg.removeAttr('xmlns:a');

                // Replace image with new SVG
                $img.replaceWith($svg);

            }, 'xml');

        });

});

Этот код сработает на все svg изображения с расширением svg
И теперь мы может добавлять им css стили, в примере по наведению меняется цвет иконок

Демо: https://jsfiddle.net/demLrjvw/13/

Answer 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

Answer 3

[Максим]

это и есть правильно - создаём чистый текстовый документ - помещаем этот код - переименовываем в название.svg и подключаем ....можно использовать преобразовав в base64 как url background ...так же можно подключать в html как simbol или как img или background или use

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