A
A
Alibek Kulseitov2019-04-18 16:34:47
css
Alibek Kulseitov, 2019-04-18 16:34:47

How correct is it to use SVG USE?

https://ffinbonds.kz On this site, at the very top, there are all svg files with a value of display: none and then they are displayed where necessary through svg use.
How correct is this?

<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 the question

In order to leave comments, you need to log in

3 answer(s)
M
Maxim Timofeev, 2019-04-18
@webinar

How correct is this?

by 100%. Why isn't it correct?
What bothers you use? It is also included in the specification and is supported by browsers. What is wrong with him in your opinion? I read your question like this: "I saw on the site they use the h3 tag for headings, how correct is this?" What else would it be used for?

#
#FFFFFF, 2019-04-18
@victory_vas

Even very correct. use is a valid SVG tag that pulls in external SVG code. Use is just what is needed so as not to duplicate anything.
This is a very common and well-known technique.

A
A person from Kazakhstan, 2019-04-18
@LenovoId

Visual hiding of SVG in the markup is done so that the SVG document itself does not take up space on the page and there is no empty space ...
USE is a duplicate of some object and this tag helps to save space on the page by duplicating the necessary SVG, although the code will be displayed as if the real code is inserted
How correct is this ? Yes, it is quite ...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question