Насколько правильно использовать SVG USE?

Question

[Alibek Kulseitov]

https://ffinbonds.kz На этом сайте в самом вверху находятся все свг файлы со значением display: none а потом выводятся где надо через svg use.
Насколько это корректно?

<svg style="display:none;">   
        <symbol id="close" viewBox="0 0 14 14">        
            <path fill="currentColor" d="M6.99999 5.6L1.4 0L0 1.4L5.6 6.99999L0 12.6L1.4 14L6.99999 8.39999L12.6 14L14 12.6L8.39999 6.99999L14 1.40001L12.6 1.41341e-05L6.99999 5.6Z"></path>
        </symbol>     
        <symbol id="menu" viewBox="0 0 18 12"> 
            <g fill="currentColor">
                <rect width="18" height="2"></rect>
                <path d="M0 5H15V7H0V5Z"></path>
                <path d="M0 10H15V12H0V10Z"></path>
            </g>       
        </symbol>  
        <symbol id="question" viewBox="0 0 24 24">
            <path fill="currentColor" d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM9.96 8.88L9 8.544C9.512 7.104 10.776 6 12.616 6C14.92 6 15.8 7.408 15.8 8.848C15.8 10.512 14.712 11.92 12.92 12.704L12.808 14.464H11.896L11.8 12.128C13.656 11.328 14.584 10.304 14.584 8.912C14.584 7.984 14.088 7.024 12.552 7.024C11.272 7.024 10.392 7.744 9.96 8.88ZM13.112 17.76H11.608V16.16H13.112V17.76Z"></path>        
        </symbol> 
    </svg>

Answer 1

[Максим Тимофеев]

Насколько это корректно?

на 100%. А почему не корректно?

Насколько правильно использовать SVG USE?

А чем Вас смущает use? Он же введен в спецификацию и поддерживается браузерами. Что не так с ним по Вашему? Читаю Ваш вопрос так: "Вот увидел на сайте используют тег h3 для заголовков, насколько это правильно?" А для чего его еще использовать?

Comments

[Alibek Kulseitov]

Потому что есть вариант вставлять код каждой иконки туда куда нужно. Но при этом html станет кашей. Вот по этому я сравниваю два варианта для себя

[Максим Тимофеев]

Alibek Kulseitov, Я не вижу что бы в вопросе Вы что-то сравнивали? Покажите место?

[Alibek Kulseitov]

Максим Тимофеев, Я же специально написал "...для себя". Сначала услышать мнение людей от этого варианта, что они скажут и тд. А потом исходя их их мнении и советов я для себя сам сравню.

[Moskus]

Alibek Kulseitov, что значит "станет кашей"? Посмотрите на код любого сайта - это та ещё "каша", особенно при использовании некоторых интерфейсных фреймворков. Но это совершенно не имеет значения.

Answer 2

[#FFFFFF]

Очень даже корректно. use - это валидный тег SVG-тег, который подтягивает внешний SVG-код. Use как раз и нужен, чтобы ничего не дублировать.
Это очень распространённая и давно известная техника.

Answer 3

[Максим]

Визуальное скрытие SVG в разметке делается для того что бы сам SVG документ на странице не занимал место и не было пустого пространства ...
USE - это дубликат какого то объекта и этот тег помогает с экономить место на странице за счёт дублирования нужного SVG хотя в инспекторе кода будет отображаться как будто вставлен реальный код

Насколько это корректно ? Да вполне ...