What is the best way to connect svg icons to the site for later use through use?

D

Dima Pautov2016-04-04 16:03:46

HTML

Dima Pautov, 2016-04-04 16:03:46

Good afternoon! I have a pack with svg icons. What is the best way to include icons on a page?
Constantly accessing the icons.svg file

<svg width="32" height="32">
  <use xlink:href="img/ico/icons.svg#icon1" overflow="visible" />
</svg>

or paste the entire code with icons on the page and insert the icon in the same way, but only the id will be in the path

<!DOCTYPE html>
<html lang="ru">
<head>
</head>
<body>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 128 32" enable-background="new 0 0 128 32" xml:space="preserve">
<symbol id="icon1"></symbol>
<symbol id="icon2"></symbol>
<symbol id="icon3"></symbol>
<symbol id="icon4"></symbol>
<symbol id="icon5"></symbol>
</svg>

<svg width="32" height="32">
  <use xlink:href="#icon1" overflow="visible" />
</svg>

</body>
</html>

I hope I explained clearly))

Reply

Answer the question

In order to leave comments, you need to log in

3 answer(s)

M

Maxim, 2016-04-04
@bootd

It is better to embed directly into HTML, so as not to produce unnecessary requests to an external SVG file. However, if you insert inline way, then it will not be cached.
At one Yandex conference, they advised inserting through JS so that they are cached.
Now I will describe how I do it.
1) Create a JS file with inline SVG. For example, such

// Тут хранятся иконки в SVG
var icon = '
<svg style="display:none;">\
  <defs>\
    <symbol id="header-phone" viewBox="0 0 850.394 850.394">...</symbol>\
  </defs>\
</svg>';    
// Вставляем иконки в HTML        
document.getElementById('svg-icon-placeholder').innerHTML = icon;

2) Create an empty div in HTML with id svg-icon-placeholder. We will insert SVG into it
3) We use it through use :)
Quite simply, but I have not yet figured out how to automate the assembly of sprites through GULP in this way. If you know, please tell me how

I

Ilya Erofeev, 2016-04-04
@imerofeev

here is a helpful article on the subject

A

Alex, 2016-04-04
@isqua

https://github.com/jonathantneal/svg4everybody