О преимуществе SVG перед PNG и JPG
Как вынести svg в отдельный файл
- Автор темы Absolute
- Дата начала
-
- Теги
- svg отдельный файл
xasler
Создатель
- Регистрация
- 19 Сен 2015
- Сообщения
- 20
- Реакции
- 4
Попробуй так
либо без symbol
и сохранить это все это дело в icon.svg. Открываешь обычный txt документ и втыкаешь один из вариантов потом вместо txt пишешь .svg. и потом подключаешь типо в формате <img src="/img/icon.svg"> если не срабатывает попробуй задать размеры принудительно <img src="/img/icon.svg" style="width:9.4pxl; height:6.1"> ну или бэгранудом короче вариантов масса.
Код:
<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
Не сбивай парня. У него на сайте вывод иконок построен на использовании тега use. Не переписывать же весь сайт ему.
Обрати внимание на статью на хабре, ссылку на которую тебе скинули выше. Там есть твой случай. Заострю внимание на том, что при использовании тега use с id необходимо, чтобы svg-спрайт тоже был включен в тело страницы. Поэтому при выносе содержимого спрайта во внешний файл, надо будет написать скрипт для подгрузки содержимого файла и вставки в тело страницы. Дальше уже можно будет в сторону оптимизаций, либо кешировать запрос браузером, либо записывать спрайт в localstorage.
xasler
Создатель
- Регистрация
- 19 Сен 2015
- Сообщения
- 20
- Реакции
- 4
но может у него в цикле переменную шаблона поменять.
Ну типо того если, use
Код:
<use x="10" y="10" xlink:href="img/icon.svg#icon1" />где #icon1" id нужной иконки
Absolute
Крокодил ;)
- Регистрация
- 9 Авг 2009
- Сообщения
- 581
- Реакции
- 456
- Автор темы
- #15
Благодарю, так и поступил.
Убрал из тела страницы кусок с иконками. Сохранил в icon.svg, делаю кэшированный ajax-запрос, вставляю в тело страницы
HTML:
$.ajax({
url: '/1/icon.svg',
cache : true,
dataType : 'text'
}).done(function(result) {
$(document.body).append(result);
});
FED{or}OFF
Создатель
- Регистрация
- 11 Окт 2014
- Сообщения
- 22
- Реакции
- 11
Думаю, можно заменить
на, к примеру,
, где
Так то, все верно, вы вставили код из файла icon.svg в тело страницы, вот она и выводится у вас.
HTML:
$(document.body).append(result);
HTML:
$('#svg-icons').html(result);
HTML:
<div id="svg-icons" style="display:none"></div>Absolute
Крокодил ;)
- Регистрация
- 9 Авг 2009
- Сообщения
- 581
- Реакции
- 456
- Автор темы
- #17
Да не, это я для теста иконку вывел.
Код:
<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>');
});