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

xasler

Создатель
Регистрация
19 Сен 2015
Сообщения
20
Реакции
4
Попробуй так
Код:
<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

Создатель
Регистрация
11 Окт 2014
Сообщения
22
Реакции
11
Попробуй так
Код:
<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

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

Ну типо того если, use
Код:
<use x="10" y="10" xlink:href="img/icon.svg#icon1" />

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

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
453
Заострю внимание на том, что при использовании тега use с id необходимо, чтобы svg-спрайт тоже был включен в тело страницы. Поэтому при выносе содержимого спрайта во внешний файл, надо будет написать скрипт для подгрузки содержимого файла и вставки в тело страницы. Дальше уже можно будет в сторону оптимизаций, либо кешировать запрос браузером, либо записывать спрайт в localstorage.
Благодарю, так и поступил.
Убрал из тела страницы кусок с иконками. Сохранил в icon.svg, делаю кэшированный ajax-запрос, вставляю в тело страницы
HTML:
$.ajax({
  url: '/1/icon.svg',
  cache : true,
  dataType : 'text'
}).done(function(result) {
  $(document.body).append(result);
});
icon.svg берется из кэша:

Snimok1.1552056967.png
 

FED{or}OFF

Создатель
Регистрация
11 Окт 2014
Сообщения
22
Реакции
11
Думаю, можно заменить
HTML:
$(document.body).append(result);
на, к примеру,
HTML:
$('#svg-icons').html(result);
, где
HTML:
<div id="svg-icons" style="display:none"></div>
Так то, все верно, вы вставили код из файла icon.svg в тело страницы, вот она и выводится у вас.
 

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
453
Так то, все верно, вы вставили код из файла 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-файле один раз загрузятся и закэшируются.
 
Сверху