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

Absolute

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
456
Имею в исходном коде страницы:
Код: 
  <!--noindex--><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>
<symbol id="si-arrowdown" viewBox="0 0 20 20">
<path d="M13.418 7.859c0.271-0.268 0.709-0.268 0.978 0s0.272 0.701 0 0.969l-3.908 3.83c-0.27 0.268-0.707 0.268-0.979 0l-3.908-3.83c-0.27-0.267-0.27-0.701 0-0.969s0.709-0.268 0.978 0l3.421 3.141 3.418-3.141z"/>
</symbol>
<symbol id="si-arrowright" viewBox="0 0 8 8">
<path d="M2.196,0.03c0.17,0,0.34,0.061,0.47,0.181l3.606,3.353C6.397,3.68,6.468,3.836,6.468,4    s-0.07,0.321-0.195,0.437L2.666,7.789c-0.259,0.241-0.68,0.241-0.938,0c-0.26-0.241-0.26-0.632,0-0.873L4.864,4L1.728,1.085 c-0.26-0.241-0.26-0.633,0-0.874C1.856,0.091,2.026,0.03,2.196,0.03z"/>
</symbol>
<symbol id="si-arrowleft" viewBox="0 0 8 8">
<path d="M5.804,7.97c-0.17,0-0.34-0.061-0.47-0.181L1.728,4.437C1.603,4.32,1.533,4.164,1.533,4 s0.07-0.321,0.195-0.437l3.606-3.353c0.259-0.241,0.68-0.241,0.938,0c0.26,0.241,0.26,0.632,0,0.873L3.136,4l3.136,2.915 c0.26,0.241,0.26,0.633,0,0.874C6.144,7.909,5.974,7.97,5.804,7.97z"/>
</symbol>
<symbol id="si-cart" viewBox="0 0 19 19">
<path d="M18.885,4.776c-0.129-0.197-0.352-0.312-0.586-0.312H8.552c-0.387,0-0.703,0.312-0.703,0.692 s0.316,0.693,0.703,0.693h8.669l-2.601,5.89H6.795L3.924,1.509C3.843,1.208,3.562,1,3.245,1H0.703C0.316,1,0,1.312,0,1.693 c0,0.381,0.316,0.692,0.703,0.692h2.015l2.87,10.231c0.082,0.301,0.363,0.509,0.68,0.509h8.821c0.281,0,0.527-0.161,0.645-0.416 l3.21-7.275C19.037,5.216,19.014,4.973,18.885,4.776z M5.6,14.858c-0.879,0-1.594,0.704-1.594,1.57S4.721,18,5.6,18 s1.593-0.705,1.593-1.571S6.479,14.858,5.6,14.858z M15.452,14.858c-0.879,0.058-1.535,0.82-1.477,1.675 c0.059,0.82,0.75,1.467,1.582,1.467h0.117c0.422-0.035,0.808-0.219,1.089-0.543c0.281-0.312,0.41-0.717,0.387-1.144 C17.092,15.459,16.331,14.801,15.452,14.858z"/>
</symbol>
<symbol id="si-button-cart" viewBox="0 0 16 16">
<path d="M15.902,3.832c-0.108-0.174-0.296-0.274-0.493-0.274H7.202c-0.326,0-0.592,0.274-0.592,0.61 c0,0.337,0.267,0.611,0.592,0.611h7.3l-2.19,5.197h-6.59L3.305,0.948C3.236,0.684,2.999,0.5,2.732,0.5H0.592 C0.266,0.5,0,0.774,0,1.111c0,0.336,0.266,0.611,0.592,0.611h1.697l2.417,9.028C4.774,11.017,5.011,11.2,5.278,11.2h7.428 c0.237,0,0.444-0.143,0.543-0.367l2.703-6.421C16.031,4.22,16.012,4.005,15.902,3.832z M4.715,12.729 c-0.74,0-1.342,0.622-1.342,1.386S3.976,15.5,4.715,15.5c0.74,0,1.342-0.622,1.342-1.386S5.456,12.729,4.715,12.729z  M13.012,12.729c-0.739,0.051-1.292,0.724-1.242,1.478C11.818,14.93,12.4,15.5,13.102,15.5h0.098 c0.355-0.03,0.682-0.193,0.918-0.479c0.236-0.274,0.346-0.631,0.325-1.008C14.394,13.258,13.752,12.678,13.012,12.729z"/>
</symbol>
<symbol id="si-search" viewBox="0 0 19 19">
<path d="M13.616,12.292c0.937-1.237,1.501-2.774,1.501-4.445c0.001-4.051-3.278-7.348-7.309-7.348 s-7.31,3.297-7.31,7.348c0,4.053,3.28,7.349,7.31,7.349c1.71,0,3.279-0.597,4.523-1.588l4.869,4.895l1.299-1.304L13.616,12.292z M7.809,13.542c-3.123,0-5.663-2.554-5.663-5.694c0-3.14,2.54-5.694,5.663-5.694c3.124,0,5.664,2.554,5.664,5.693 C13.473,10.987,10.932,13.542,7.809,13.542z"/>
</symbol>
<symbol id="si-cross" viewBox="0 0 12 12">
<polygon points="11.5,2.127 10.248,0.875 6.173,4.949 2.096,0.848 0.843,2.1 4.92,6.202 0.871,10.252 2.123,11.505 6.169,7.458 10.191,11.505 11.445,10.252 7.422,6.205"/>
</symbol>
<symbol id="si-cross-thin" viewBox="0 0 64 64">
<path d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59 c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59 c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0   L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z"/>
</symbol>
<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>
<symbol id="si-vimeo" viewBox="0 0 533.333 533.333">
<path d="M0,160.609l21.663,28.409c0,0,44.672-35.213,59.563-17.605c14.889,17.605,71.737,230.186,90.713,269.399 c16.562,34.393,62.249,79.854,112.351,47.387c50.071-32.469,216.583-174.629,246.389-342.509 C560.46-22.137,330.304,13.02,305.924,159.236c60.931-36.582,93.456,14.863,62.274,73.11 c-31.124,58.19-59.562,96.144-74.454,96.144c-14.865,0-26.297-38.943-43.327-107.005C232.814,151.12,232.922,24.371,159.732,38.74 C90.713,52.289,0,160.609,0,160.609z"/>
</symbol>
и т.д.
Из элементов на странице подтягивается та или иная иконка:
Код: 
<svg class="svgic svgic-search"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#si-search"></use></svg>
Как весь этот набор svg-иконок запихать в отдельный файл, чтобы он не маячил километровой портянкой в исходном коде страницы?
Всякий раз при загрузке страницы огромный кусок кода из этих иконок грузится юзеру снова и снова - это неизбежно влияет на скорость, поэтому хочу вынести в отдельный файл.
 
Последнее редактирование:
Отвечу как ответили на одном из форумов - "Just had to save it in a text file and give it a .svg extension"
 
Alexeina66 написал(а):
Отвечу как ответили на одном из форумов - "Just had to save it in a text file and give it a .svg extension"
Нажмите для раскрытия...
Я пробовал.
Код: 
<img src="/themes/alysum/templates/_partials/svg/icons.svg">
В том числе пробовал по этим советам: Для просмотра ссылки Войди или Зарегистрируйся
Все иконки в элементах пропадают.
 
Ширина высота задана у иконок? Или я неверно понимаю. Ты хочешь сделать на подобии спрайта?
Если спрайт то думаю это поможет - Для просмотра ссылки Войди или Зарегистрируйся
Сам делал такое. сложностей не было
 
импорт через линка в XARA WEBDESIGNER PRO
А потом что хочеш делай..
 
А если заменить эти svg на png, кто-нибудь умрет или все-таки что-то еще мешает? Религия? Хочется модно-стильно-молодежно?)))
Уже на 8 проекте вычищаем эту заразу, клиенты орут, так как на самых свежих планшетах все тормозит, конечно, портянка-то километровая...

Как мне пытались разъяснить на том же тостере - svg - это огромные плюсы, вот они:
1. Можно менять размер иконок одним движением правой руки
2. Можно менять цвет иконок одним движением левой руки
3. Легко добавлять новые иконки - просто добавь кусок кода.
бугага )))))

Мда... Как мне вас жаль, люди в подвернутых штанишках)))
 
metal-stroi-komplekt написал(а):
А если заменить эти svg на png, кто-нибудь умрет или все-таки что-то еще мешает? Религия? Хочется модно-стильно-молодежно?)))
Уже на 8 проекте вычищаем эту заразу, клиенты орут, так как на самых свежих планшетах все тормозит, конечно, портянка-то километровая...

Как мне пытались разъяснить на том же тостере - svg - это огромные плюсы, вот они:
1. Можно менять размер иконок одним движением правой руки
2. Можно менять цвет иконок одним движением левой руки
3. Легко добавлять новые иконки - просто добавь кусок кода.
бугага )))))

Мда... Как мне вас жаль, люди в подвернутых штанишках)))
Нажмите для раскрытия...
Ну есть же и другой вариант использования.. свг в тег имг, для качества и низкого веса..
 
и с какого праздника вес станет меньше?)))) размер кода один в один, хоть в тег вставляй,хоть в стилевой файл. ВЫОЧЕМ вообще?
 
Absolute написал(а):
Имею в исходном коде страницы:
Код: 
  <!--noindex--><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>
<symbol id="si-arrowdown" viewBox="0 0 20 20">
<path d="M13.418 7.859c0.271-0.268 0.709-0.268 0.978 0s0.272 0.701 0 0.969l-3.908 3.83c-0.27 0.268-0.707 0.268-0.979 0l-3.908-3.83c-0.27-0.267-0.27-0.701 0-0.969s0.709-0.268 0.978 0l3.421 3.141 3.418-3.141z"/>
</symbol>
<symbol id="si-arrowright" viewBox="0 0 8 8">
<path d="M2.196,0.03c0.17,0,0.34,0.061,0.47,0.181l3.606,3.353C6.397,3.68,6.468,3.836,6.468,4    s-0.07,0.321-0.195,0.437L2.666,7.789c-0.259,0.241-0.68,0.241-0.938,0c-0.26-0.241-0.26-0.632,0-0.873L4.864,4L1.728,1.085 c-0.26-0.241-0.26-0.633,0-0.874C1.856,0.091,2.026,0.03,2.196,0.03z"/>
</symbol>
<symbol id="si-arrowleft" viewBox="0 0 8 8">
<path d="M5.804,7.97c-0.17,0-0.34-0.061-0.47-0.181L1.728,4.437C1.603,4.32,1.533,4.164,1.533,4 s0.07-0.321,0.195-0.437l3.606-3.353c0.259-0.241,0.68-0.241,0.938,0c0.26,0.241,0.26,0.632,0,0.873L3.136,4l3.136,2.915 c0.26,0.241,0.26,0.633,0,0.874C6.144,7.909,5.974,7.97,5.804,7.97z"/>
</symbol>
<symbol id="si-cart" viewBox="0 0 19 19">
<path d="M18.885,4.776c-0.129-0.197-0.352-0.312-0.586-0.312H8.552c-0.387,0-0.703,0.312-0.703,0.692 s0.316,0.693,0.703,0.693h8.669l-2.601,5.89H6.795L3.924,1.509C3.843,1.208,3.562,1,3.245,1H0.703C0.316,1,0,1.312,0,1.693 c0,0.381,0.316,0.692,0.703,0.692h2.015l2.87,10.231c0.082,0.301,0.363,0.509,0.68,0.509h8.821c0.281,0,0.527-0.161,0.645-0.416 l3.21-7.275C19.037,5.216,19.014,4.973,18.885,4.776z M5.6,14.858c-0.879,0-1.594,0.704-1.594,1.57S4.721,18,5.6,18 s1.593-0.705,1.593-1.571S6.479,14.858,5.6,14.858z M15.452,14.858c-0.879,0.058-1.535,0.82-1.477,1.675 c0.059,0.82,0.75,1.467,1.582,1.467h0.117c0.422-0.035,0.808-0.219,1.089-0.543c0.281-0.312,0.41-0.717,0.387-1.144 C17.092,15.459,16.331,14.801,15.452,14.858z"/>
</symbol>
<symbol id="si-button-cart" viewBox="0 0 16 16">
<path d="M15.902,3.832c-0.108-0.174-0.296-0.274-0.493-0.274H7.202c-0.326,0-0.592,0.274-0.592,0.61 c0,0.337,0.267,0.611,0.592,0.611h7.3l-2.19,5.197h-6.59L3.305,0.948C3.236,0.684,2.999,0.5,2.732,0.5H0.592 C0.266,0.5,0,0.774,0,1.111c0,0.336,0.266,0.611,0.592,0.611h1.697l2.417,9.028C4.774,11.017,5.011,11.2,5.278,11.2h7.428 c0.237,0,0.444-0.143,0.543-0.367l2.703-6.421C16.031,4.22,16.012,4.005,15.902,3.832z M4.715,12.729 c-0.74,0-1.342,0.622-1.342,1.386S3.976,15.5,4.715,15.5c0.74,0,1.342-0.622,1.342-1.386S5.456,12.729,4.715,12.729z  M13.012,12.729c-0.739,0.051-1.292,0.724-1.242,1.478C11.818,14.93,12.4,15.5,13.102,15.5h0.098 c0.355-0.03,0.682-0.193,0.918-0.479c0.236-0.274,0.346-0.631,0.325-1.008C14.394,13.258,13.752,12.678,13.012,12.729z"/>
</symbol>
<symbol id="si-search" viewBox="0 0 19 19">
<path d="M13.616,12.292c0.937-1.237,1.501-2.774,1.501-4.445c0.001-4.051-3.278-7.348-7.309-7.348 s-7.31,3.297-7.31,7.348c0,4.053,3.28,7.349,7.31,7.349c1.71,0,3.279-0.597,4.523-1.588l4.869,4.895l1.299-1.304L13.616,12.292z M7.809,13.542c-3.123,0-5.663-2.554-5.663-5.694c0-3.14,2.54-5.694,5.663-5.694c3.124,0,5.664,2.554,5.664,5.693 C13.473,10.987,10.932,13.542,7.809,13.542z"/>
</symbol>
<symbol id="si-cross" viewBox="0 0 12 12">
<polygon points="11.5,2.127 10.248,0.875 6.173,4.949 2.096,0.848 0.843,2.1 4.92,6.202 0.871,10.252 2.123,11.505 6.169,7.458 10.191,11.505 11.445,10.252 7.422,6.205"/>
</symbol>
<symbol id="si-cross-thin" viewBox="0 0 64 64">
<path d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59 c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59 c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0   L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z"/>
</symbol>
<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>
<symbol id="si-vimeo" viewBox="0 0 533.333 533.333">
<path d="M0,160.609l21.663,28.409c0,0,44.672-35.213,59.563-17.605c14.889,17.605,71.737,230.186,90.713,269.399 c16.562,34.393,62.249,79.854,112.351,47.387c50.071-32.469,216.583-174.629,246.389-342.509 C560.46-22.137,330.304,13.02,305.924,159.236c60.931-36.582,93.456,14.863,62.274,73.11 c-31.124,58.19-59.562,96.144-74.454,96.144c-14.865,0-26.297-38.943-43.327-107.005C232.814,151.12,232.922,24.371,159.732,38.74 C90.713,52.289,0,160.609,0,160.609z"/>
</symbol>
и т.д.
Из элементов на странице подтягивается та или иная иконка:
Код: 
<svg class="svgic svgic-search"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#si-search"></use></svg>
Как весь этот набор svg-иконок запихать в отдельный файл, чтобы он не маячил километровой портянкой в исходном коде страницы?
Всякий раз при загрузке страницы огромный кусок кода из этих иконок грузится юзеру снова и снова - это неизбежно влияет на скорость, поэтому хочу вынести в отдельный файл.
Нажмите для раскрытия...
я сохранял как svg файл, но в код добавил нужные мне размера изначальные, примерно data-name="logo" width="333" height="75" viewBox=" и в тег <img>
 
metal-stroi-komplekt написал(а):
и с какого праздника вес станет меньше?)))) размер кода один в один, хоть в тег вставляй,хоть в стилевой файл. ВЫОЧЕМ вообще?
Нажмите для раскрытия...
Если svg подключен внешним файлом, то он будет кэшироваться, как кэшируются картинки, css, js и прочие подключаемые элементы. В этом основная суть подключаемых файлов.
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху