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

[vud1k]

и с какого праздника вес станет меньше?)))) размер кода один в один, хоть в тег вставляй,хоть в стилевой файл. ВЫОЧЕМ вообще?

О преимуществе SVG перед PNG и JPG

 

[xasler]

Попробуй так

<svg xmlns="http://www.w3.org/2000/svg" width="9.4" height="6.1" viewBox="0 0 9.4 6.1">
<symbol id="si-twitter" viewBox="0 0 341.117 341.117">
<path d="M115.394,304.407c-33.085,0-65.862-9.158-94.777-26.479L0,265.582l24.024,0.405c0.778,0.039,2.031,0.103,4.004,0.103 c9.145,0,38.278-1.472,68.15-18.329c-22.455-6.677-41.01-24.036-48.651-46.762l-3.785-11.253l10.309,2.68 c-16.523-12.693-27.333-32.205-28.516-53.953l-0.566-10.411l9.557,4.171c1.742,0.765,3.515,1.44,5.315,2.024 c-13.573-18.998-21.787-48.355-4.659-79.538l4.717-8.593l5.996,7.757c28.728,37.141,71.325,59.789,117.778,62.899 c-0.283-2.886-0.482-5.54-0.482-6.369c0-34.474,26.234-70.13,70.13-70.13c18.426,0,36.164,7.32,49.23,20.206 c17.513-4.113,34.249-14.325,34.429-14.435l15.18-9.345l-5.733,16.883c-2.751,8.085-6.941,15.534-12.314,22.038 c2.931-0.958,5.81-2.057,8.773-3.348l18.233-8.908l-7.661,16.453c-6.324,13.593-16.87,24.808-29.968,31.98 c2.879,44.994-15.624,95.194-48.908,132.059c-24.705,27.372-68.703,60.084-138.016,60.528L115.394,304.407z M47.841,277.472 c21.427,9.248,44.409,14.075,67.546,14.075l1.099-0.006c64.628-0.411,105.586-30.836,128.556-56.286 c32.031-35.483,49.397-83.999,45.309-126.621l-0.431-4.524l4.113-1.915c6.523-3.04,12.365-7.262,17.269-12.397 c-5.488,1.388-11.343,2.423-18.092,3.239l-4.929,0.598l-3.843-9.743l4.473-3.445c6.266-3.67,11.729-8.451,16.144-14.049 c-6.986,2.976-15.232,5.887-23.477,7.423l-3.522,0.656l-2.41-2.648c-10.836-11.89-26.254-18.702-42.321-18.702 c-35.849,0-57.276,29.12-57.276,57.276c0,1.703,0.848,9.454,1.15,11.446l2.918,8.297l-9.28-0.199 c-49.744-1.073-96.023-22.873-128.511-60.181c-12.854,33.754,8.728,60.721,19.036,68.799l15.071,11.819l-19.146-0.334 c-5.996-0.103-11.864-0.919-17.552-2.436c5.058,22.558,22.886,40.682,46.048,45.656l25.354,5.45l-24.962,7.025 c-4.351,1.221-9.287,1.838-14.672,1.838c-2.519,0-4.929-0.135-7.153-0.341c10.039,17.674,28.734,29.551,49.416,30.56l18.072,0.887 L117.264,249.4C92.283,267.774,66.37,274.85,47.841,277.472z"/>
</symbol>
</svg>

либо без symbol

<svg xmlns="http://www.w3.org/2000/svg" width="9.4" height="6.1" viewBox="0 0 9.4 6.1">
<path d="M115.394,304.407c-33.085,0-65.862-9.158-94.777-26.479L0,265.582l24.024,0.405c0.778,0.039,2.031,0.103,4.004,0.103 c9.145,0,38.278-1.472,68.15-18.329c-22.455-6.677-41.01-24.036-48.651-46.762l-3.785-11.253l10.309,2.68 c-16.523-12.693-27.333-32.205-28.516-53.953l-0.566-10.411l9.557,4.171c1.742,0.765,3.515,1.44,5.315,2.024 c-13.573-18.998-21.787-48.355-4.659-79.538l4.717-8.593l5.996,7.757c28.728,37.141,71.325,59.789,117.778,62.899 c-0.283-2.886-0.482-5.54-0.482-6.369c0-34.474,26.234-70.13,70.13-70.13c18.426,0,36.164,7.32,49.23,20.206 c17.513-4.113,34.249-14.325,34.429-14.435l15.18-9.345l-5.733,16.883c-2.751,8.085-6.941,15.534-12.314,22.038 c2.931-0.958,5.81-2.057,8.773-3.348l18.233-8.908l-7.661,16.453c-6.324,13.593-16.87,24.808-29.968,31.98 c2.879,44.994-15.624,95.194-48.908,132.059c-24.705,27.372-68.703,60.084-138.016,60.528L115.394,304.407z M47.841,277.472 c21.427,9.248,44.409,14.075,67.546,14.075l1.099-0.006c64.628-0.411,105.586-30.836,128.556-56.286 c32.031-35.483,49.397-83.999,45.309-126.621l-0.431-4.524l4.113-1.915c6.523-3.04,12.365-7.262,17.269-12.397 c-5.488,1.388-11.343,2.423-18.092,3.239l-4.929,0.598l-3.843-9.743l4.473-3.445c6.266-3.67,11.729-8.451,16.144-14.049 c-6.986,2.976-15.232,5.887-23.477,7.423l-3.522,0.656l-2.41-2.648c-10.836-11.89-26.254-18.702-42.321-18.702 c-35.849,0-57.276,29.12-57.276,57.276c0,1.703,0.848,9.454,1.15,11.446l2.918,8.297l-9.28-0.199 c-49.744-1.073-96.023-22.873-128.511-60.181c-12.854,33.754,8.728,60.721,19.036,68.799l15.071,11.819l-19.146-0.334 c-5.996-0.103-11.864-0.919-17.552-2.436c5.058,22.558,22.886,40.682,46.048,45.656l25.354,5.45l-24.962,7.025 c-4.351,1.221-9.287,1.838-14.672,1.838c-2.519,0-4.929-0.135-7.153-0.341c10.039,17.674,28.734,29.551,49.416,30.56l18.072,0.887 L117.264,249.4C92.283,267.774,66.37,274.85,47.841,277.472z"/>
</svg>

и сохранить это все это дело в icon.svg. Открываешь обычный txt документ и втыкаешь один из вариантов потом вместо txt пишешь .svg. и потом подключаешь типо в формате <img src="/img/icon.svg"> если не срабатывает попробуй задать размеры принудительно <img src="/img/icon.svg" style="width:9.4pxl; height:6.1"> ну или бэгранудом короче вариантов масса.

 

[FED{or}OFF]

Попробуй так

<svg xmlns="http://www.w3.org/2000/svg" width="9.4" height="6.1" viewBox="0 0 9.4 6.1">
<symbol id="si-twitter" viewBox="0 0 341.117 341.117">
<path d="M115.394,304.407c-33.085,0-65.862-9.158-94.777-26.479L0,265.582l24.024,0.405c0.778,0.039,2.031,0.103,4.004,0.103 c9.145,0,38.278-1.472,68.15-18.329c-22.455-6.677-41.01-24.036-48.651-46.762l-3.785-11.253l10.309,2.68 c-16.523-12.693-27.333-32.205-28.516-53.953l-0.566-10.411l9.557,4.171c1.742,0.765,3.515,1.44,5.315,2.024 c-13.573-18.998-21.787-48.355-4.659-79.538l4.717-8.593l5.996,7.757c28.728,37.141,71.325,59.789,117.778,62.899 c-0.283-2.886-0.482-5.54-0.482-6.369c0-34.474,26.234-70.13,70.13-70.13c18.426,0,36.164,7.32,49.23,20.206 c17.513-4.113,34.249-14.325,34.429-14.435l15.18-9.345l-5.733,16.883c-2.751,8.085-6.941,15.534-12.314,22.038 c2.931-0.958,5.81-2.057,8.773-3.348l18.233-8.908l-7.661,16.453c-6.324,13.593-16.87,24.808-29.968,31.98 c2.879,44.994-15.624,95.194-48.908,132.059c-24.705,27.372-68.703,60.084-138.016,60.528L115.394,304.407z M47.841,277.472 c21.427,9.248,44.409,14.075,67.546,14.075l1.099-0.006c64.628-0.411,105.586-30.836,128.556-56.286 c32.031-35.483,49.397-83.999,45.309-126.621l-0.431-4.524l4.113-1.915c6.523-3.04,12.365-7.262,17.269-12.397 c-5.488,1.388-11.343,2.423-18.092,3.239l-4.929,0.598l-3.843-9.743l4.473-3.445c6.266-3.67,11.729-8.451,16.144-14.049 c-6.986,2.976-15.232,5.887-23.477,7.423l-3.522,0.656l-2.41-2.648c-10.836-11.89-26.254-18.702-42.321-18.702 c-35.849,0-57.276,29.12-57.276,57.276c0,1.703,0.848,9.454,1.15,11.446l2.918,8.297l-9.28-0.199 c-49.744-1.073-96.023-22.873-128.511-60.181c-12.854,33.754,8.728,60.721,19.036,68.799l15.071,11.819l-19.146-0.334 c-5.996-0.103-11.864-0.919-17.552-2.436c5.058,22.558,22.886,40.682,46.048,45.656l25.354,5.45l-24.962,7.025 c-4.351,1.221-9.287,1.838-14.672,1.838c-2.519,0-4.929-0.135-7.153-0.341c10.039,17.674,28.734,29.551,49.416,30.56l18.072,0.887 L117.264,249.4C92.283,267.774,66.37,274.85,47.841,277.472z"/>
</symbol>
</svg>

либо без symbol

<svg xmlns="http://www.w3.org/2000/svg" width="9.4" height="6.1" viewBox="0 0 9.4 6.1">
<path d="M115.394,304.407c-33.085,0-65.862-9.158-94.777-26.479L0,265.582l24.024,0.405c0.778,0.039,2.031,0.103,4.004,0.103 c9.145,0,38.278-1.472,68.15-18.329c-22.455-6.677-41.01-24.036-48.651-46.762l-3.785-11.253l10.309,2.68 c-16.523-12.693-27.333-32.205-28.516-53.953l-0.566-10.411l9.557,4.171c1.742,0.765,3.515,1.44,5.315,2.024 c-13.573-18.998-21.787-48.355-4.659-79.538l4.717-8.593l5.996,7.757c28.728,37.141,71.325,59.789,117.778,62.899 c-0.283-2.886-0.482-5.54-0.482-6.369c0-34.474,26.234-70.13,70.13-70.13c18.426,0,36.164,7.32,49.23,20.206 c17.513-4.113,34.249-14.325,34.429-14.435l15.18-9.345l-5.733,16.883c-2.751,8.085-6.941,15.534-12.314,22.038 c2.931-0.958,5.81-2.057,8.773-3.348l18.233-8.908l-7.661,16.453c-6.324,13.593-16.87,24.808-29.968,31.98 c2.879,44.994-15.624,95.194-48.908,132.059c-24.705,27.372-68.703,60.084-138.016,60.528L115.394,304.407z M47.841,277.472 c21.427,9.248,44.409,14.075,67.546,14.075l1.099-0.006c64.628-0.411,105.586-30.836,128.556-56.286 c32.031-35.483,49.397-83.999,45.309-126.621l-0.431-4.524l4.113-1.915c6.523-3.04,12.365-7.262,17.269-12.397 c-5.488,1.388-11.343,2.423-18.092,3.239l-4.929,0.598l-3.843-9.743l4.473-3.445c6.266-3.67,11.729-8.451,16.144-14.049 c-6.986,2.976-15.232,5.887-23.477,7.423l-3.522,0.656l-2.41-2.648c-10.836-11.89-26.254-18.702-42.321-18.702 c-35.849,0-57.276,29.12-57.276,57.276c0,1.703,0.848,9.454,1.15,11.446l2.918,8.297l-9.28-0.199 c-49.744-1.073-96.023-22.873-128.511-60.181c-12.854,33.754,8.728,60.721,19.036,68.799l15.071,11.819l-19.146-0.334 c-5.996-0.103-11.864-0.919-17.552-2.436c5.058,22.558,22.886,40.682,46.048,45.656l25.354,5.45l-24.962,7.025 c-4.351,1.221-9.287,1.838-14.672,1.838c-2.519,0-4.929-0.135-7.153-0.341c10.039,17.674,28.734,29.551,49.416,30.56l18.072,0.887 L117.264,249.4C92.283,267.774,66.37,274.85,47.841,277.472z"/>
</svg>

и сохранить это все это дело в icon.svg. Открываешь обычный txt документ и втыкаешь один из вариантов потом вместо txt пишешь .svg. и потом подключаешь типо в формате <img src="/img/icon.svg"> если не срабатывает попробуй задать размеры принудительно <img src="/img/icon.svg" style="width:9.4pxl; height:6.1"> ну или бэгранудом короче вариантов масса.

Не сбивай парня. У него на сайте вывод иконок построен на использовании тега use. Не переписывать же весь сайт ему.

Как весь этот набор svg-иконок запихать в отдельный файл, чтобы он не маячил километровой портянкой в исходном коде страницы?
Всякий раз при загрузке страницы огромный кусок кода из этих иконок грузится юзеру снова и снова - это неизбежно влияет на скорость, поэтому хочу вынести в отдельный файл.

Обрати внимание на статью на хабре, ссылку на которую тебе скинули выше. Там есть твой случай. Заострю внимание на том, что при использовании тега use с id необходимо, чтобы svg-спрайт тоже был включен в тело страницы. Поэтому при выносе содержимого спрайта во внешний файл, надо будет написать скрипт для подгрузки содержимого файла и вставки в тело страницы. Дальше уже можно будет в сторону оптимизаций, либо кешировать запрос браузером, либо записывать спрайт в localstorage.

 

[xasler]

Не сбивай парня. У него на сайте вывод иконок построен на использовании тега use. Не переписывать же весь сайт ему.
Обрати внимание на статью на хабре, ссылку на которую тебе скинули выше. Там есть твой случай. Заострю внимание на том, что при использовании тега use с id необходимо, чтобы svg-спрайт тоже был включен в тело страницы. Поэтому при выносе содержимого спрайта во внешний файл, надо будет написать скрипт для подгрузки содержимого файла и вставки в тело страницы. Дальше уже можно будет в сторону оптимизаций, либо кешировать запрос браузером, либо записывать спрайт в localstorage.

но может у него в цикле переменную шаблона поменять.

Ну типо того если, use

<use x="10" y="10" xlink:href="img/icon.svg#icon1" />

где #icon1" id нужной иконки

 

[Absolute]

Заострю внимание на том, что при использовании тега use с id необходимо, чтобы svg-спрайт тоже был включен в тело страницы. Поэтому при выносе содержимого спрайта во внешний файл, надо будет написать скрипт для подгрузки содержимого файла и вставки в тело страницы. Дальше уже можно будет в сторону оптимизаций, либо кешировать запрос браузером, либо записывать спрайт в localstorage.

Благодарю, так и поступил.
Убрал из тела страницы кусок с иконками. Сохранил в icon.svg, делаю кэшированный ajax-запрос, вставляю в тело страницы

$.ajax({
  url: '/1/icon.svg',
  cache : true,
  dataType : 'text'
}).done(function(result) {
  $(document.body).append(result);
});

icon.svg берется из кэша:

 

[FED{or}OFF]

Думаю, можно заменить

$(document.body).append(result);

на, к примеру,

$('#svg-icons').html(result);

, где

<div id="svg-icons" style="display:none"></div>

Так то, все верно, вы вставили код из файла icon.svg в тело страницы, вот она и выводится у вас.

 

[Absolute]

Так то, все верно, вы вставили код из файла icon.svg в тело страницы, вот она и выводится у вас.

Да не, это я для теста иконку вывел.

<svg class="svgic svgic-search"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#si-cross"></use></svg>

Вот и выводится этот крест.
Но я придумал сейчас еще проще - без ajax.
Подключил под jQuery как скрипт

<script src="/1/icon.js"></script>

И весь набор иконок сделал одной длинной строкой.
Вот так примерно:

$(document).ready(function(){
$(document.body).append('<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><symbol id="si-loading" viewBox="0 0 91.3 91.3"><circle cx="45.7" cy="45.7" r="45.7"/><circle fill="#FFFFFF" cx="45.7" cy="24.4" r="12.5"/></symbol><symbol id="si-updown" viewBox="0 0 8 8"><path d="M8 2.194c0 .17-.062.34-.183.47L4.44 6.275c-.117.126-.275.197-.44.197-.165 0-.323-.07-.44-.194L.184 2.666c-.242-.26-.243-.68 0-.94.243-.26.637-.26.88 0L4 4.866l2.937-3.14c.243-.26.638-.26.88 0 .12.128.183.298.183.468z" /><path style="display:none;" d="M7.958,5.554c0-0.223-0.084-0.443-0.253-0.612L4.603,1.835 c-0.334-0.334-0.873-0.334-1.206,0L0.295,4.941c-0.335,0.335-0.337,0.882-0.004,1.22C0.624,6.499,1.166,6.501,1.5,6.165L4,3.663 l2.5,2.502c0.336,0.336,0.877,0.334,1.21-0.004C7.876,5.993,7.958,5.772,7.958,5.554z"/></symbol></defs></svg>');
});

Только <symbol></symbol> у меня несколько десятков, т.е. передаваемая в append раз в 40 длиньше. Напрягает конечно лишняя операция append, но по крайней мере иконки в js-файле один раз загрузятся и закэшируются.