html - tag - sirven para complementar el manejo de los gráficos dentro de la etiqueta svg

Es posible incluir definiciones SVG externas

Question

Creé los siguientes iconos de SVG:

<svg width="32" height="32" viewBox="0 0 32 32">
<defs>
    <g id="chat">
        <path d="M29.75 0.398h-27.5c-1.036 0-1.875 0.839-1.875 1.875v18.344c0 1.036 0.839 1.875 1.875 1.875h17.626l-0.032-2.813h-15.313c-1.036 0-1.875-0.839-1.875-1.875v-13.375c0-1.036 0.839-1.875 1.875-1.875h22.938c1.036 0 1.875 0.839 1.875 1.875v13.375c0 1.036-0.839 1.875-1.875 1.875h-4.764l-1.432 2.813h8.477c1.036 0 1.875-0.839 1.875-1.875v-18.344c0-1.036-0.839-1.875-1.875-1.875z"/>
        <path d="M19.906 25.177l-0.032-2.867-1.321-0.002 0.103 9.169 4.664-9.162-1.955-0.003z"/>
        <path d="M19.594 6.945c0 0.656-0.532 1.188-1.188 1.188h-11.063c-0.656 0-1.188-0.532-1.188-1.188v0c0-0.656 0.532-1.188 1.188-1.188h11.063c0.656 0 1.188 0.532 1.188 1.188v0z"/>
        <path d="M25 6.945c0 0.656-0.532 1.188-1.188 1.188h-1c-0.656 0-1.188-0.532-1.188-1.188v0c0-0.656 0.532-1.188 1.188-1.188h1c0.656 0 1.188 0.532 1.188 1.188v0z"/>
    </g>
    <g id="search">
        <path d="M20.337 0c-6.303 0-11.432 5.13-11.432 11.432 0 2.638 0.806 5.057 2.272 6.962l-10.626 10.626c-0.733 0.733-0.733 1.832 0 2.565 0.366 0.366 0.806 0.513 1.246 0.513s0.953-0.147 1.319-0.513l10.7-10.7c1.832 1.319 4.104 2.052 6.522 2.052 6.303 0 11.506-5.203 11.506-11.506s-5.203-11.432-11.506-11.432zM20.337 19.714c-4.544 0-8.281-3.738-8.281-8.281s3.738-8.281 8.281-8.281 8.281 3.738 8.281 8.281-3.738 8.281-8.281 8.281z"/>
        <path d="M16.46 6.773c0.326 0.34 0.379 0.821 0.16 1.098-1.663 2.093-1.663 5.073 0 7.166 0.218 0.277 0.166 0.758-0.16 1.098v0c-0.325 0.34-0.877 0.337-1.175-0.039-2.154-2.711-2.154-6.572 0-9.283 0.299-0.376 0.85-0.379 1.175-0.039 0 0 0 0 0 0z"/>
    </g>
    <g id="faq">
        <path d="M26.988 8.118l-14.818-7.638c-2.029-1.069-6.031 0.997-7.181 2.814-0.513 0.812-0.475 1.399-0.475 1.731l0.183 17.248c0.012 0.366 0.474 0.86 0.868 1.103 0.822 0.504 13.271 8.276 13.624 8.496 0.19 0.118 0.414 0.173 0.635 0.173 0.188 0 0.377-0.042 0.549-0.127 0.374-0.184 0.607-0.541 0.607-0.929v-18.116c0-0.377-0.22-0.726-0.578-0.914l-13.468-7.519c0.152-0.296 0.752-0.922 1.853-1.499 1.16-0.608 2.029-0.378 2.229-0.301 0 0 12.926 6.917 13.321 7.123 0.394 0.206 0.401 0.236 0.401 0.588 0 0.351 0 17.191 0 17.191 0 0.858 0.871 1.209 1.51 1.209 0.638 0 1.319-0.626 1.319-1.209v-18.511c-0-0.377-0.222-0.726-0.579-0.914z"/>
        <path d="M22.121 30.313c-0 0.314-0.149 0.568-0.331 0.568v0c-0.182-0-0.33-0.255-0.329-0.569l0.027-18.051c0-0.314 0.149-0.568 0.331-0.568v0c0.182 0 0.33 0.255 0.329 0.569l-0.027 18.051z"/>
        <path d="M23.246 29.563c-0 0.314-0.149 0.568-0.331 0.568v0c-0.182-0-0.33-0.255-0.329-0.569l0.027-18.051c0-0.314 0.149-0.568 0.331-0.568v0c0.182 0 0.33 0.255 0.329 0.569l-0.027 18.051z"/>
        <path d="M24.309 28.938c-0 0.314-0.149 0.568-0.331 0.568v0c-0.182-0-0.33-0.255-0.329-0.569l0.027-18.051c0-0.314 0.149-0.568 0.331-0.568v0c0.182 0 0.33 0.255 0.329 0.569l-0.027 18.051z"/>
    </g>
    <g id="contactUs">
        <path d="M28.343 31.983h-24.59c-1.356 0-2.459-1.103-2.459-2.459v-27.049c0-1.356 1.103-2.459 2.459-2.459h24.59c1.356 0 2.459 1.103 2.459 2.459v27.049c-0 1.356-1.103 2.459-2.459 2.459zM28.343 29.524v0zM3.752 2.475v27.049h24.588l0.002-27.049h-24.59z"/>
        <path d="M11.969 7.938c0-0.656 0.532-1.188 1.188-1.188h11.063c0.656 0 1.188 0.532 1.188 1.188v0c0 0.656-0.532 1.188-1.188 1.188h-11.063c-0.656 0-1.188-0.532-1.188-1.188v0z"/>
        <path d="M6.563 8c0-0.656 0.532-1.188 1.188-1.188h1c0.656 0 1.188 0.532 1.188 1.188v0c0 0.656-0.532 1.188-1.188 1.188h-1c-0.656 0-1.188-0.532-1.188-1.188v0z"/>
        <path d="M11.969 13.25c0-0.656 0.532-1.188 1.188-1.188h11.063c0.656 0 1.188 0.532 1.188 1.188v0c0 0.656-0.532 1.188-1.188 1.188h-11.063c-0.656 0-1.188-0.532-1.188-1.188v0z"/>
        <path d="M6.563 13.25c0-0.656 0.532-1.188 1.188-1.188h1c0.656 0 1.188 0.532 1.188 1.188v0c0 0.656-0.532 1.188-1.188 1.188h-1c-0.656 0-1.188-0.532-1.188-1.188v0z"/>
        <path d="M11.969 18.563c0-0.656 0.532-1.188 1.188-1.188h11.063c0.656 0 1.188 0.532 1.188 1.188v0c0 0.656-0.532 1.188-1.188 1.188h-11.063c-0.656 0-1.188-0.532-1.188-1.188v0z"/>
        <path d="M6.563 18.563c0-0.656 0.532-1.188 1.188-1.188h1c0.656 0 1.188 0.532 1.188 1.188v0c0 0.656-0.532 1.188-1.188 1.188h-1c-0.656 0-1.188-0.532-1.188-1.188v0z"/>
        <path d="M11.969 23.875c0-0.656 0.532-1.188 1.188-1.188h11.063c0.656 0 1.188 0.532 1.188 1.188v0c0 0.656-0.532 1.188-1.188 1.188h-11.063c-0.656 0-1.188-0.532-1.188-1.188v0z"/>
        <path d="M6.563 23.875c0-0.656 0.532-1.188 1.188-1.188h1c0.656 0 1.188 0.532 1.188 1.188v0c0 0.656-0.532 1.188-1.188 1.188h-1c-0.656 0-1.188-0.532-1.188-1.188v0z"/>
    </g>
    <g id="video">
        <path d="M16 0.381c-8.626 0-15.619 6.993-15.619 15.619s6.993 15.619 15.619 15.619 15.619-6.993 15.619-15.619-6.993-15.619-15.619-15.619zM16 29.423c-7.413 0-13.423-6.010-13.423-13.423s6.010-13.423 13.423-13.423 13.423 6.010 13.423 13.423-6.010 13.423-13.423 13.423z"  />
        <path d="M23.888 16l-11.473 6.624v-13.248z"  />
    </g>
</defs>

cuando se incluye en línea, puedo reutilizar los íconos usando la etiqueta <use> así:

<svg width="32" height="32" viewBox="0 0 32 32">
    <g>
       <use xlink:href="#chat"/>
    </g>
</svg>

P: ¿Es posible incluir las defs como un archivo externo?

Answer 1

Si desea incluir un elemento SVG externo a través del use , simplemente especifique el IRI correcto en el atributo xlink:href . Si usa un IRI como #something que se refiere a un elemento dentro del mismo documento que tiene something como id , si necesita obtener un elemento externo de un documento diferente, podría usar algo como external.svg#someotherthing , de esta manera el IRI indica un elemento con id presente en un archivo llamado external.svg .