SVG 

Adrià Velardos

UI & Frontend Engineer

#HTML5 #CSS3 #SASS #Javascript #Animation #SVG #ITCSS #Mapping

adriavelardos@gmail.com

@adridoz

SVG

Gráfico Vectorial Escalable

  • Resolución y ppi independiente 
  • Escalable para responsive
  • Poco peso KB 
  • Fácil de animar
  • Permite accesibilidad
  • Manipulación CSS y JS

Compatibilidad

Formas básicas

<rect/>
<circle/>
<polygon/>
<line/>
<path/>
<polyline/>

Leer un Path

Grupos

Mascaras

Imágenes y filtros

Viewbox y Responsive

Viewbox y Clipping

Viewbox y Clipping

Codepen by Shaw

Atributo PreserveAspectRatio

xMidYMid meet
xMinYMin meet
xMaxYMax meet
xMinYMin slice
xMidYMid slice
xMaxYMax slice
None

Default

Exportación

Illustrator - Organizar capas

- Eliminar formas innecesarias

- Dividir objetos

- Poner nombre a las capas o grupos

Illustrator - Configuración

- Estilos internos

- Conservar nombre de capas

- Limitar a decimal 1

Optimización

Optimizar vertices

Optimizar minificando

SVGO

https://jakearchibald.github.io/svgomg/

Plugins

https://github.com/davidderaedt/SVG-NOW

https://github.com/BohemianCoding/svgo-compressor

Gulp y Grunt

Implementación

Imagen

  • Cacheable

  • CSS limitado

  • No DOM

  • No manipulación JS

Imagen de fondo

  • Cacheable

  • CSS limitado

  • No DOM

  • No manipulación JS

  • Base64 bloquea carga

Objeto

  • Cacheable

  • DOM

  • CSS

  • Manipulación JS

  • Fallback

  • Problemas con accesibilidad

Symbol + Use

  • Cacheable

  • Css limitado

  • JS Fallback

  • Shadow DOM

En línea

  • DOM

  • CSS

  • No cacheable
  • HTML más pesado

Accesibilidad

Casos uso SVG

Presentación

Icono

Interactivo

Imagen

Presentación

  • No necesita texto alternativo

  • Añadir atributo role="presentation"

<svg role="presentation">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="//www.habitaclia.com/.../src_504911268000000000.svg#ico-magnifying-glass-plus"></use>
</svg>

Icono

  • Añadir atributos al tag anchor o button

  • Añadir atributo role="presentation" y aria-hidden="true"

<a id="linkFav" class="fav-heart-link" href="https://www.habitaclia.com/favoritos.asp" aria-label="Add to fav">
    <svg class="ico abs-center ico-fav" role="img">
        <title>Corazón</title>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="//www.habitaclia.com/.../dist/src_504911268000000000.svg#ico-heart-02"></use>
    </svg>
</a>
 <button type="button" id="js-discard-btn" class="button-transparent discard-btn" title="Descartar" aria-label="Remove item">
 <svg class="ico ico-grey" role="presentation" aria-hidden="true">
    <title>Basura</title>
     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="//www.habitaclia.com/.../src_504911268000000000.svg#ico-trashcan"></use>
 </svg>
 Descartar
</button>
  • Añadir title

  • Añadir atributo role="img"

Imagen

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/44216/pixels-2.svg" alt="Cara de Fede" role="img">

Como imagen

En línea

<svg viewBox="0 0 79 79" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" aria-labelledby="fedeTitle fedeDesc">
    <title id="fedeTitle">Cara de Fede</title>
    <desc id="fedeDesc">Vemos a Fede sonriendo</desc>
    <defs>
        <path id="path-1" d="M39.2900292,78.4298542 C17.6475802,78.4298542 0.106355685,60.8886297 0.106355685,39.2461808 C0.106355685,17.6055977 17.6475802,0.0625072886 39.2900292,0.0625072886 C60.9306122,0.0625072886 78.4737026,17.6055977 78.4737026,39.2461808 C78.4737026,60.8886297 60.9306122,78.4298542 39.2900292,78.4298542 Z"></path>
    </defs>
    <g id="Private-Profile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Búsqueda-RWD-Mobile-Copy-2" sketch:type="MSArtboardGroup" transform="translate(-190.000000, -636.000000)">
            <g id="fede_bn" sketch:type="MSLayerGroup" transform="translate(189.000000, 635.000000)">
                <g id="Group">
                    <g id="Fill-1-+-Group-17-+-Fill-18-Copy-2">
                        <path d="M79.4999417,40.2724198 C79.4999417,61.9148688 61.9568513,79.4560933 40.3162682,79.4560933 C18.6738192,79.4560933 1.13259475,61.9148688 1.13259475,40.2724198 C1.13259475,18.6318367 18.6738192,1.08874636 40.3162682,1.08874636 C61.9568513,1.08874636 79.4999417,18.6318367 79.4999417,40.2724198" id="Fill-1" fill="#D7DBDF" sketch:type="MSShapeGroup"></path>
                        <g id="Group-17" transform="translate(1.026239, 1.026239)">
                            <mask id="mask-2" sketch:name="Clip 3" fill="white">
                                <use xlink:href="#path-1"></use>
                            </mask>
                            <g id="Clip-3"></g>
                            <path d="M12.8093294,29.8962099 C12.8093294,33.027172 10.0646064,35.5666472 6.67988338,35.5666472 C3.29516035,35.5666472 0.552303207,33.027172 0.552303207,29.8962099 C0.552303207,26.7633819 3.29516035,24.2239067 6.67988338,24.2239067 C10.0646064,24.2239067 12.8093294,26.7633819 12.8093294,29.8962099" id="Fill-2" fill="#9199A1" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M74.8594752,30.4485131 C74.8594752,32.521516 73.2641399,34.2026822 71.2993586,34.2026822 C69.3345773,34.2026822 67.7411079,32.521516 67.7411079,30.4485131 C67.7411079,28.3755102 69.3345773,26.694344 71.2993586,26.694344 C73.2641399,26.694344 74.8594752,28.3755102 74.8594752,30.4485131" id="Fill-4" fill="#9199A1" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M15.8115452,89.1344606 C15.8115452,89.1344606 4.26355685,32.9002915 13.0892128,14.1872886 C17.1400583,5.60233236 60.1413411,4.97725948 63.9981341,10.7559184 C76.6040816,29.6480466 66.9928863,87.0372012 66.9928863,87.0372012 L15.8115452,89.1344606" id="Fill-5" fill="#9199A1" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M11.419242,61.1498542 C11.7252478,64.5774927 12.1282799,66.3351603 12.5593003,69.4344023 C27.52,74.576793 57.3798251,72.0820991 69.0901458,69.6396501 C69.5118367,65.2716035 69.8309038,66.1653644 70.011895,59.6925948 C39.1165015,65.6447813 22.1499708,64.2490962 11.419242,61.1498542" id="Fill-6" fill="#D7DBDF" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M13.9251312,77.9391254 C14.1397085,80.5868222 14.2927114,82.8781341 14.8319534,84.8802332 C30.1285131,86.7423907 56.0307872,86.3206997 67.7411079,83.8782507 C68.1049563,81.1018076 68.4501458,77.9969679 68.6927114,73.3602332 C47.4122449,78.7060058 29.9531195,79.3702624 13.9251312,77.9391254" id="Fill-7" fill="#BDC3C9" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M15.4812828,19.1916035 C18.2465306,14.618309 60.8876968,16.8349854 63.309621,19.553586 C65.7296793,22.2721866 66.2726531,52.581691 63.8525948,55.6044315 C61.4306706,58.627172 20.3997668,58.4200583 18.4629738,55.7014577 C16.5261808,52.9809913 12.7179009,23.764898 15.4812828,19.1916035" id="Fill-8" fill="#F9F9F9" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M48.4907289,57.6942274 C47.9981341,57.7110204 47.4999417,57.7240816 46.9998834,57.7371429 L47.0036152,57.7763265 C47.5130029,57.7483382 48.0074636,57.7222157 48.4907289,57.6942274 M62.3710787,56.3283965 C61.7310787,56.5112536 60.9156851,56.6754519 59.9566181,56.824723 C60.934344,56.6829155 61.7348105,56.522449 62.3710787,56.3283965 M42.105656,16.7043732 L42.1093878,16.7267638 C52.4949271,17.1484548 62.1900875,18.2978426 63.309621,19.553586 C65.7054227,22.2460641 66.2614577,51.9790087 63.9234985,55.5055394 C66.6644898,52.4137609 65.7091545,22.2236735 63.309621,19.5293294 C62.1900875,18.273586 52.4911953,17.1260641 42.105656,16.7043732" id="Fill-9" fill="#CC8A5F" sketch:type="MSShapeGroup" mask="url(#mask-2)" role="img"></path>
                            <path d="M42.1093878,16.7267638 L46.9998834,57.7371429 C47.4999417,57.7240816 47.9981341,57.7110204 48.4907289,57.6942274 C53.6611079,57.4087464 57.4096793,57.1885714 59.9566181,56.824723 C60.9156851,56.6754519 61.7310787,56.5112536 62.3710787,56.3283965 C63.0446647,56.1212828 63.5335277,55.8768513 63.8525948,55.5801749 C63.8768513,55.5577843 63.9011079,55.5335277 63.9234985,55.5055394 C66.2614577,51.9790087 65.7054227,22.2460641 63.309621,19.553586 C62.1900875,18.2978426 52.4949271,17.1484548 42.1093878,16.7267638" id="Fill-10" fill="#ECEEEF" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M70.011895,59.6683382 C61.4008163,61.3271137 53.9055394,62.3981341 47.292828,63.0381341 L47.2685714,63.0530612 L46.8991254,72.1586006 C55.8777843,71.6902624 64.1212828,70.6509621 69.0901458,69.6135277 C69.5118367,65.2473469 69.8309038,66.139242 70.011895,59.6683382" id="Fill-11" fill="#BDC3C9" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M25.3499708,36.2029155 C25.3499708,37.1526531 24.5812245,37.9213994 23.6333528,37.9213994 C22.6836152,37.9213994 21.9148688,37.1526531 21.9148688,36.2029155 C21.9148688,35.2550437 22.6836152,34.4862974 23.6333528,34.4862974 C24.5812245,34.4862974 25.3499708,35.2550437 25.3499708,36.2029155" id="Fill-12" fill="#9199A1" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M59.6935277,36.2029155 C59.6935277,37.1526531 58.9247813,37.9213994 57.9769096,37.9213994 C57.027172,37.9213994 56.2584257,37.1526531 56.2584257,36.2029155 C56.2584257,35.2550437 57.027172,34.4862974 57.9769096,34.4862974 C58.9247813,34.4862974 59.6935277,35.2550437 59.6935277,36.2029155" id="Fill-13" fill="#9199A1" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M18.9257143,27.7429738 C19.9370262,25.1923032 22.3813411,23.6380175 24.9674636,23.6361516 C25.7641983,23.6361516 26.5739942,23.7835569 27.3613994,24.0970262 L27.5349271,23.6622741 C26.6915452,23.3282799 25.8220408,23.1696793 24.9674636,23.1696793 C22.1947522,23.1696793 19.5769096,24.8377843 18.492828,27.5694461 L18.9257143,27.7429738" id="Fill-14" fill="#737980" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M52.6591254,46.8030321 C50.476035,50.3034402 46.7181341,52.2253061 42.8762682,52.2253061 C40.7939359,52.2253061 38.6873469,51.6618076 36.7916035,50.4788338 L36.5453061,50.8744023 C38.5156851,52.1040233 40.7099708,52.6917784 42.8762682,52.6917784 C46.8730029,52.6917784 50.7820408,50.6915452 53.0546939,47.0493294 L52.6591254,46.8030321" id="Fill-15" fill="#737980" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                            <path d="M63.091312,28.1236152 C62.0072303,25.3900875 59.3875219,23.7219825 56.6166764,23.7219825 C55.7602332,23.7219825 54.8907289,23.8805831 54.0510787,24.2145773 L54.2246064,24.6493294 C55.0082799,24.3358601 55.8180758,24.1884548 56.6166764,24.1884548 C59.2009329,24.1903207 61.6471137,25.7446064 62.6584257,28.295277 L63.0931778,28.1236152 L63.091312,28.1236152" id="Fill-16" fill="#737980" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
  • Suficiente con el alt
  • Para versiones anteriores añadir role
  • Añadir Title con id
  • Añadir Desc con id
  • Relacionar los ids y role en el tag svg 

Interactivo

A pen by Heather Migliorisi

Añadir al tag svg

  • role="group" 

  • aria-labelledby="timeline-title"

  • aria-describedby="timeline-desc

 

Añadir a los grupos

  • Roles semánticos

  • Añadir ara-label al listado

Grupos con focus

  • xlink:href="#play-group" 

  • tabindex="0"

  • role="img"

Items a ocultar

  •  role="presentation" y aria-hidden="true"

Sprites

Sprites

  • Un icono por capa o grupo
  • Nombrar todos

Sprites - Uso

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<svg xmlns="http://www.w3.org/2000/svg">
	<style>
	<![CDATA[ g {
		display: none;
		}
		g:target {
			display: inline;
		}
	]]>
	</style>
	<g id="ico-360-virtual">
		<path d="M2.42 1.54a.8.8 0 0 0-.82.77v46.34a.8.8 0 0 0 .82.77h49.81a.8.8 0 0 0 .82-.77V2.3a.8.8 0 0 0-.82-.76zm49.81 49.41H2.42a2.39 2.39 0 0 1-2.47-2.3V2.3A2.39 2.39 0 0 1 2.42 0h49.81a2.39 2.39 0 0 1 2.47 2.3v46.35a2.39 2.39 0 0 1-2.47 2.3z" fill="currentColor"></path>
		<path d="M12.94 32.32a4.88 4.88 0 0 0 3.31-.91 3.5 3.5 0 0 0 .58-4.11 3.18 3.18 0 0 0-1.09-1.08 4.77 4.77 0 0 0-1.57-.57 9.82 9.82 0 0 0-1.83-.17h-.62v-1.94h.86a7.2 7.2 0 0 0 1.34-.13 3.86 3.86 0 0 0 1.26-.47 2.61 2.61 0 0 0 1.29-2.4 2.76 2.76 0 0 0-.26-1.25 2.49 2.49 0 0 0-.69-.86 2.63 2.63 0 0 0-1-.48 4.79 4.79 0 0 0-1.18-.14 5.5 5.5 0 0 0-2.12.36 9.15 9.15 0 0 0-1.47.75l-.94-1.85a8.37 8.37 0 0 1 .79-.46 8.65 8.65 0 0 1 1.08-.46 10.52 10.52 0 0 1 1.29-.35 7.13 7.13 0 0 1 1.45-.15 7.74 7.74 0 0 1 2.47.35 4.62 4.62 0 0 1 1.72 1 4.06 4.06 0 0 1 1 1.51 5.16 5.16 0 0 1 .34 1.88 3.72 3.72 0 0 1-.81 2.41 5.27 5.27 0 0 1-2 1.52 5.86 5.86 0 0 1 1.35.6 4.26 4.26 0 0 1 1.13 1 5.12 5.12 0 0 1 .78 1.38 4.83 4.83 0 0 1 .3 1.74 5.76 5.76 0 0 1-.4 2.17 4.45 4.45 0 0 1-1.25 1.73 6.09 6.09 0 0 1-2.12 1.14 9.75 9.75 0 0 1-3 .42 9.65 9.65 0 0 1-1.39-.1 13.64 13.64 0 0 1-1.34-.26q-.62-.16-1.09-.31a5.62 5.62 0 0 1-.62-.29l.47-2.11a14 14 0 0 0 1.47.55 8.08 8.08 0 0 0 2.51.34zm9.33-5.46a13.63 13.63 0 0 1 .73-4.64 9.34 9.34 0 0 1 2.07-3.39 8.73 8.73 0 0 1 3.25-2.09 12.63 12.63 0 0 1 4.3-.74l.18 2a12.55 12.55 0 0 0-2.79.34 6.88 6.88 0 0 0-2.25 1 5.88 5.88 0 0 0-1.66 1.75 8.23 8.23 0 0 0-1 2.67 8.42 8.42 0 0 1 1.52-.52 7.32 7.32 0 0 1 1.76-.21 6.46 6.46 0 0 1 2.6.47 4.91 4.91 0 0 1 1.74 1.24 4.66 4.66 0 0 1 1 1.77 7.28 7.28 0 0 1 .3 2.09 6.53 6.53 0 0 1-.34 2 6 6 0 0 1-1 1.9 5.33 5.33 0 0 1-1.76 1.4 5.46 5.46 0 0 1-2.52.55 5.33 5.33 0 0 1-4.51-2 9 9 0 0 1-1.62-5.59zm5.82-1.85a8 8 0 0 0-1.69.17 8.49 8.49 0 0 0-1.56.51v1.17a14.12 14.12 0 0 0 .16 2.16 5.64 5.64 0 0 0 .56 1.78 3.27 3.27 0 0 0 1.08 1.22 3 3 0 0 0 1.72.46 2.75 2.75 0 0 0 1.46-.36 3.19 3.19 0 0 0 1-.94 3.87 3.87 0 0 0 .56-1.24 5.16 5.16 0 0 0 .17-1.29 3.9 3.9 0 0 0-.84-2.7 3.24 3.24 0 0 0-2.61-.94zm7.42.05a12.72 12.72 0 0 1 1.6-7 5.24 5.24 0 0 1 8.87 0 12.71 12.71 0 0 1 1.6 7 12.71 12.71 0 0 1-1.6 7 5.24 5.24 0 0 1-8.87 0 12.72 12.72 0 0 1-1.6-7zm9.52 0a22.11 22.11 0 0 0-.17-2.81 9.21 9.21 0 0 0-.57-2.31 4.07 4.07 0 0 0-1.08-1.57 2.66 2.66 0 0 0-3.33 0 4.05 4.05 0 0 0-1.08 1.57 9.16 9.16 0 0 0-.57 2.31 23.42 23.42 0 0 0 0 5.62 9.16 9.16 0 0 0 .57 2.31 4.05 4.05 0 0 0 1.08 1.57 2.66 2.66 0 0 0 3.33 0 4.07 4.07 0 0 0 1.08-1.57 9.21 9.21 0 0 0 .57-2.31 22.12 22.12 0 0 0 .16-2.81z" fill="currentColor"></path>
	</g>
	<g id="ico-3d-virtual">
		<path d="M2.42 1.54a.8.8 0 0 0-.82.77v46.34a.8.8 0 0 0 .82.77h49.81a.8.8 0 0 0 .82-.77V2.3a.8.8 0 0 0-.82-.76zm49.81 49.41H2.42a2.39 2.39 0 0 1-2.47-2.3V2.3A2.39 2.39 0 0 1 2.42 0h49.81a2.39 2.39 0 0 1 2.47 2.3v46.35a2.39 2.39 0 0 1-2.47 2.3z" fill="currentColor"></path>
		<path d="M17.28 32.32a4.88 4.88 0 0 0 3.32-.91 3.5 3.5 0 0 0 .58-4.11 3.19 3.19 0 0 0-1.09-1.08 4.77 4.77 0 0 0-1.57-.57 9.82 9.82 0 0 0-1.83-.17h-.62v-1.94h.86a7.2 7.2 0 0 0 1.34-.13 3.87 3.87 0 0 0 1.26-.47 2.61 2.61 0 0 0 1.29-2.4 2.78 2.78 0 0 0-.26-1.25 2.5 2.5 0 0 0-.69-.86 2.63 2.63 0 0 0-1-.48 4.79 4.79 0 0 0-1.18-.14 5.51 5.51 0 0 0-2.12.36 9.19 9.19 0 0 0-1.47.75l-.94-1.85a8.25 8.25 0 0 1 .79-.46 8.58 8.58 0 0 1 1.08-.46 10.5 10.5 0 0 1 1.29-.35 7.14 7.14 0 0 1 1.44-.14 7.74 7.74 0 0 1 2.47.35 4.62 4.62 0 0 1 1.72 1 4.07 4.07 0 0 1 1 1.51 5.18 5.18 0 0 1 .34 1.88 3.71 3.71 0 0 1-.81 2.41 5.28 5.28 0 0 1-2 1.52 5.87 5.87 0 0 1 1.35.6 4.23 4.23 0 0 1 1.13 1 5.07 5.07 0 0 1 .78 1.38 4.83 4.83 0 0 1 .3 1.74 5.76 5.76 0 0 1-.4 2.17 4.47 4.47 0 0 1-1.22 1.7 6.1 6.1 0 0 1-2.12 1.14 10.53 10.53 0 0 1-4.41.31q-.71-.1-1.34-.26t-1.09-.31a5.49 5.49 0 0 1-.68-.26l.47-2.11a14 14 0 0 0 1.47.55 8.09 8.09 0 0 0 2.56.34zm24.73-7.26a10.43 10.43 0 0 1-.73 4.07 7.53 7.53 0 0 1-2.05 2.86 8.7 8.7 0 0 1-3.17 1.69 13.94 13.94 0 0 1-4.06.56q-1.09 0-2.41-.09a14.25 14.25 0 0 1-2.38-.35V16.33a14.35 14.35 0 0 1 2.38-.35q1.31-.09 2.41-.09a13.94 13.94 0 0 1 4.06.56 8.71 8.71 0 0 1 3.16 1.69A7.53 7.53 0 0 1 41.27 21a10.43 10.43 0 0 1 .74 4.06zm-9.8 7a7.12 7.12 0 0 0 5.36-1.83 7.09 7.09 0 0 0 1.77-5.14 7.09 7.09 0 0 0-1.77-5.13 7.12 7.12 0 0 0-5.36-1.83h-1.65l-.82.05v13.78l.82.05q.58.02 1.64.02z" fill="currentColor"></path>
	</g>
	<g id="ico-arrow-down">
		<path d="M53.473 37.297a1.992 1.992 0 0 0-.34-2.807 1.997 1.997 0 0 0-2.803.336l-.002.002-17.193 21.879V3.727a1.998 1.998 0 0 0-1.999-1.998h-.004a1.997 1.997 0 0 0-1.998 1.998v52.98L11.941 34.826a2 2 0 0 0-3.145 2.471l20.136 25.63a2.796 2.796 0 0 0 4.404 0l20.137-25.63z" fill="currentColor"></path>
	</g>
	<g id="ico-arrow-left-door">
		<path d="M29 0H15a3 3 0 0 0-3 3v6a1 1 0 0 0 2 0V3a1 1 0 0 1 1-1h13.5l-9.492 5.424A2 2 0 0 0 18 9.161V24h-3a1 1 0 0 1-1-1v-2a1 1 0 0 0-2 0v2a3 3 0 0 0 3 3h3v2.554a2.002 2.002 0 0 0 2.992 1.736l10-5.714A2 2 0 0 0 32 22.839V3a3 3 0 0 0-3-3zm1 22.839l-10 5.714V9.161l10-5.714v19.392zM13 16H6v3.146a.4.4 0 0 1-.656.307l-4.238-3.531a1.203 1.203 0 0 1 0-1.844l4.238-3.531a.4.4 0 0 1 .656.307V14h7a1 1 0 0 1 0 2z" fill="currentColor"></path>
	</g>
	<g id="ico-arrow-little">
		<path d="M31.996 45.632a4.594 4.594 0 0 1-3.26-1.342L10.67 26.222a4.631 4.631 0 0 1 0-6.541c1.749-1.749 4.792-1.749 6.542 0L32 34.467l14.79-14.786c1.745-1.747 4.792-1.752 6.54 0a4.627 4.627 0 0 1 0 6.541l-18.061 18.06a4.609 4.609 0 0 1-3.273 1.35z" fill="currentColor"></path>
	</g>
	<g id="ico-arrow-price" >
		<path d="M10.692 7.125V1h-6.5v6.125H1.001l6.503 6.709 6.503-6.709z" fill="currentColor"></path>
	</g>
	<g id="ico-arrow-right-05">
		<path d="M17.784 5.831a.995.995 0 0 0-1.403.17.998.998 0 0 0 .169 1.402L27.489 16H.999a.999.999 0 0 0-.999.999v.002c0 .552.447.999.999.999h26.49l-10.94 8.597a.999.999 0 0 0 1.235 1.572l12.815-10.068a1.398 1.398 0 0 0 0-2.202L17.784 5.831z" fill="currentColor"></path>
	</g>
	<g id="ico-arrow-right-07">
		<path d="M46.586 58.869a1.998 1.998 0 0 1-2.825.003l-.003-.003-25.456-25.456a1.998 1.998 0 0 1-.002-2.826l.002-.002L43.758 5.129a2 2 0 1 1 2.828 2.828L22.544 31.999l24.042 24.042c.781.78.782 2.045.002 2.826l-.002.002z" fill="currentColor"></path>
	</g>
	<g id="ico-ballpoint-diagonal">
		<path d="M26 4H14.969a.97.97 0 0 0-.969.969v.063c0 .534.434.968.969.968H26a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4v-1.031A.97.97 0 0 0 7.031 22h-.062a.97.97 0 0 0-.969.969V24c0 3.315 2.685 6 6 6h14c3.315 0 6-2.685 6-6V10c0-3.315-2.685-6-6-6zM5.657 10.848l8.485 8.485 2.828-2.828-8.485-8.486-2.828 2.829zm2.121 6.364a.999.999 0 0 0 0-1.414l-4.95-4.95 4.243-4.243-1.768-1.768a1.5 1.5 0 0 0-2.121 0l-.707.707a1.5 1.5 0 0 0 0 2.121l.354.354-1.415 1.415a2 2 0 0 0 0 2.828l4.95 4.95a1 1 0 0 0 1.414 0zm10.748 4.525l1.838 1.838a.599.599 0 1 0 .848-.848l-1.839-1.839-.99-2.97-2.828 2.828 2.971.991z" fill="currentColor"></path>
	</g>
	</svg>
</body>
</html>
<img src="//www.habitaclia.com/dotnet/content/icon/dist/src_504911268000000000.svg#ico-heart-02" alt="heart">

Sprites - Uso

<svg xmlns="http://www.w3.org/2000/svg">
	<symbol id="ico-360-virtual" viewbox="0 0 54.71 50.94">
		<path d="M2.42 1.54a.8.8 0 0 0-.82.77v46.34a.8.8 0 0 0 .82.77h49.81a.8.8 0 0 0 .82-.77V2.3a.8.8 0 0 0-.82-.76zm49.81 49.41H2.42a2.39 2.39 0 0 1-2.47-2.3V2.3A2.39 2.39 0 0 1 2.42 0h49.81a2.39 2.39 0 0 1 2.47 2.3v46.35a2.39 2.39 0 0 1-2.47 2.3z" fill="currentColor"></path>
		<path d="M12.94 32.32a4.88 4.88 0 0 0 3.31-.91 3.5 3.5 0 0 0 .58-4.11 3.18 3.18 0 0 0-1.09-1.08 4.77 4.77 0 0 0-1.57-.57 9.82 9.82 0 0 0-1.83-.17h-.62v-1.94h.86a7.2 7.2 0 0 0 1.34-.13 3.86 3.86 0 0 0 1.26-.47 2.61 2.61 0 0 0 1.29-2.4 2.76 2.76 0 0 0-.26-1.25 2.49 2.49 0 0 0-.69-.86 2.63 2.63 0 0 0-1-.48 4.79 4.79 0 0 0-1.18-.14 5.5 5.5 0 0 0-2.12.36 9.15 9.15 0 0 0-1.47.75l-.94-1.85a8.37 8.37 0 0 1 .79-.46 8.65 8.65 0 0 1 1.08-.46 10.52 10.52 0 0 1 1.29-.35 7.13 7.13 0 0 1 1.45-.15 7.74 7.74 0 0 1 2.47.35 4.62 4.62 0 0 1 1.72 1 4.06 4.06 0 0 1 1 1.51 5.16 5.16 0 0 1 .34 1.88 3.72 3.72 0 0 1-.81 2.41 5.27 5.27 0 0 1-2 1.52 5.86 5.86 0 0 1 1.35.6 4.26 4.26 0 0 1 1.13 1 5.12 5.12 0 0 1 .78 1.38 4.83 4.83 0 0 1 .3 1.74 5.76 5.76 0 0 1-.4 2.17 4.45 4.45 0 0 1-1.25 1.73 6.09 6.09 0 0 1-2.12 1.14 9.75 9.75 0 0 1-3 .42 9.65 9.65 0 0 1-1.39-.1 13.64 13.64 0 0 1-1.34-.26q-.62-.16-1.09-.31a5.62 5.62 0 0 1-.62-.29l.47-2.11a14 14 0 0 0 1.47.55 8.08 8.08 0 0 0 2.51.34zm9.33-5.46a13.63 13.63 0 0 1 .73-4.64 9.34 9.34 0 0 1 2.07-3.39 8.73 8.73 0 0 1 3.25-2.09 12.63 12.63 0 0 1 4.3-.74l.18 2a12.55 12.55 0 0 0-2.79.34 6.88 6.88 0 0 0-2.25 1 5.88 5.88 0 0 0-1.66 1.75 8.23 8.23 0 0 0-1 2.67 8.42 8.42 0 0 1 1.52-.52 7.32 7.32 0 0 1 1.76-.21 6.46 6.46 0 0 1 2.6.47 4.91 4.91 0 0 1 1.74 1.24 4.66 4.66 0 0 1 1 1.77 7.28 7.28 0 0 1 .3 2.09 6.53 6.53 0 0 1-.34 2 6 6 0 0 1-1 1.9 5.33 5.33 0 0 1-1.76 1.4 5.46 5.46 0 0 1-2.52.55 5.33 5.33 0 0 1-4.51-2 9 9 0 0 1-1.62-5.59zm5.82-1.85a8 8 0 0 0-1.69.17 8.49 8.49 0 0 0-1.56.51v1.17a14.12 14.12 0 0 0 .16 2.16 5.64 5.64 0 0 0 .56 1.78 3.27 3.27 0 0 0 1.08 1.22 3 3 0 0 0 1.72.46 2.75 2.75 0 0 0 1.46-.36 3.19 3.19 0 0 0 1-.94 3.87 3.87 0 0 0 .56-1.24 5.16 5.16 0 0 0 .17-1.29 3.9 3.9 0 0 0-.84-2.7 3.24 3.24 0 0 0-2.61-.94zm7.42.05a12.72 12.72 0 0 1 1.6-7 5.24 5.24 0 0 1 8.87 0 12.71 12.71 0 0 1 1.6 7 12.71 12.71 0 0 1-1.6 7 5.24 5.24 0 0 1-8.87 0 12.72 12.72 0 0 1-1.6-7zm9.52 0a22.11 22.11 0 0 0-.17-2.81 9.21 9.21 0 0 0-.57-2.31 4.07 4.07 0 0 0-1.08-1.57 2.66 2.66 0 0 0-3.33 0 4.05 4.05 0 0 0-1.08 1.57 9.16 9.16 0 0 0-.57 2.31 23.42 23.42 0 0 0 0 5.62 9.16 9.16 0 0 0 .57 2.31 4.05 4.05 0 0 0 1.08 1.57 2.66 2.66 0 0 0 3.33 0 4.07 4.07 0 0 0 1.08-1.57 9.21 9.21 0 0 0 .57-2.31 22.12 22.12 0 0 0 .16-2.81z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-3d-virtual" viewbox="0 0 54.71 50.94">
		<path d="M2.42 1.54a.8.8 0 0 0-.82.77v46.34a.8.8 0 0 0 .82.77h49.81a.8.8 0 0 0 .82-.77V2.3a.8.8 0 0 0-.82-.76zm49.81 49.41H2.42a2.39 2.39 0 0 1-2.47-2.3V2.3A2.39 2.39 0 0 1 2.42 0h49.81a2.39 2.39 0 0 1 2.47 2.3v46.35a2.39 2.39 0 0 1-2.47 2.3z" fill="currentColor"></path>
		<path d="M17.28 32.32a4.88 4.88 0 0 0 3.32-.91 3.5 3.5 0 0 0 .58-4.11 3.19 3.19 0 0 0-1.09-1.08 4.77 4.77 0 0 0-1.57-.57 9.82 9.82 0 0 0-1.83-.17h-.62v-1.94h.86a7.2 7.2 0 0 0 1.34-.13 3.87 3.87 0 0 0 1.26-.47 2.61 2.61 0 0 0 1.29-2.4 2.78 2.78 0 0 0-.26-1.25 2.5 2.5 0 0 0-.69-.86 2.63 2.63 0 0 0-1-.48 4.79 4.79 0 0 0-1.18-.14 5.51 5.51 0 0 0-2.12.36 9.19 9.19 0 0 0-1.47.75l-.94-1.85a8.25 8.25 0 0 1 .79-.46 8.58 8.58 0 0 1 1.08-.46 10.5 10.5 0 0 1 1.29-.35 7.14 7.14 0 0 1 1.44-.14 7.74 7.74 0 0 1 2.47.35 4.62 4.62 0 0 1 1.72 1 4.07 4.07 0 0 1 1 1.51 5.18 5.18 0 0 1 .34 1.88 3.71 3.71 0 0 1-.81 2.41 5.28 5.28 0 0 1-2 1.52 5.87 5.87 0 0 1 1.35.6 4.23 4.23 0 0 1 1.13 1 5.07 5.07 0 0 1 .78 1.38 4.83 4.83 0 0 1 .3 1.74 5.76 5.76 0 0 1-.4 2.17 4.47 4.47 0 0 1-1.22 1.7 6.1 6.1 0 0 1-2.12 1.14 10.53 10.53 0 0 1-4.41.31q-.71-.1-1.34-.26t-1.09-.31a5.49 5.49 0 0 1-.68-.26l.47-2.11a14 14 0 0 0 1.47.55 8.09 8.09 0 0 0 2.56.34zm24.73-7.26a10.43 10.43 0 0 1-.73 4.07 7.53 7.53 0 0 1-2.05 2.86 8.7 8.7 0 0 1-3.17 1.69 13.94 13.94 0 0 1-4.06.56q-1.09 0-2.41-.09a14.25 14.25 0 0 1-2.38-.35V16.33a14.35 14.35 0 0 1 2.38-.35q1.31-.09 2.41-.09a13.94 13.94 0 0 1 4.06.56 8.71 8.71 0 0 1 3.16 1.69A7.53 7.53 0 0 1 41.27 21a10.43 10.43 0 0 1 .74 4.06zm-9.8 7a7.12 7.12 0 0 0 5.36-1.83 7.09 7.09 0 0 0 1.77-5.14 7.09 7.09 0 0 0-1.77-5.13 7.12 7.12 0 0 0-5.36-1.83h-1.65l-.82.05v13.78l.82.05q.58.02 1.64.02z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-arrow-down" viewbox="0 0 64 64">
		<path d="M53.473 37.297a1.992 1.992 0 0 0-.34-2.807 1.997 1.997 0 0 0-2.803.336l-.002.002-17.193 21.879V3.727a1.998 1.998 0 0 0-1.999-1.998h-.004a1.997 1.997 0 0 0-1.998 1.998v52.98L11.941 34.826a2 2 0 0 0-3.145 2.471l20.136 25.63a2.796 2.796 0 0 0 4.404 0l20.137-25.63z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-arrow-left-door" viewbox="0 0 32 32">
		<path d="M29 0H15a3 3 0 0 0-3 3v6a1 1 0 0 0 2 0V3a1 1 0 0 1 1-1h13.5l-9.492 5.424A2 2 0 0 0 18 9.161V24h-3a1 1 0 0 1-1-1v-2a1 1 0 0 0-2 0v2a3 3 0 0 0 3 3h3v2.554a2.002 2.002 0 0 0 2.992 1.736l10-5.714A2 2 0 0 0 32 22.839V3a3 3 0 0 0-3-3zm1 22.839l-10 5.714V9.161l10-5.714v19.392zM13 16H6v3.146a.4.4 0 0 1-.656.307l-4.238-3.531a1.203 1.203 0 0 1 0-1.844l4.238-3.531a.4.4 0 0 1 .656.307V14h7a1 1 0 0 1 0 2z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-arrow-little" viewbox="0 0 64 64">
		<path d="M31.996 45.632a4.594 4.594 0 0 1-3.26-1.342L10.67 26.222a4.631 4.631 0 0 1 0-6.541c1.749-1.749 4.792-1.749 6.542 0L32 34.467l14.79-14.786c1.745-1.747 4.792-1.752 6.54 0a4.627 4.627 0 0 1 0 6.541l-18.061 18.06a4.609 4.609 0 0 1-3.273 1.35z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-arrow-price" viewbox="0 0 15.009 14.727">
		<path d="M10.692 7.125V1h-6.5v6.125H1.001l6.503 6.709 6.503-6.709z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-arrow-right-05" viewbox="0 0 32 32">
		<path d="M17.784 5.831a.995.995 0 0 0-1.403.17.998.998 0 0 0 .169 1.402L27.489 16H.999a.999.999 0 0 0-.999.999v.002c0 .552.447.999.999.999h26.49l-10.94 8.597a.999.999 0 0 0 1.235 1.572l12.815-10.068a1.398 1.398 0 0 0 0-2.202L17.784 5.831z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-arrow-right-07" viewbox="0 0 64 64">
		<path d="M46.586 58.869a1.998 1.998 0 0 1-2.825.003l-.003-.003-25.456-25.456a1.998 1.998 0 0 1-.002-2.826l.002-.002L43.758 5.129a2 2 0 1 1 2.828 2.828L22.544 31.999l24.042 24.042c.781.78.782 2.045.002 2.826l-.002.002z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-ballpoint-diagonal" viewbox="0 0 32 32">
		<path d="M26 4H14.969a.97.97 0 0 0-.969.969v.063c0 .534.434.968.969.968H26a4 4 0 0 1 4 4v14a4 4 0 0 1-4 4H12a4 4 0 0 1-4-4v-1.031A.97.97 0 0 0 7.031 22h-.062a.97.97 0 0 0-.969.969V24c0 3.315 2.685 6 6 6h14c3.315 0 6-2.685 6-6V10c0-3.315-2.685-6-6-6zM5.657 10.848l8.485 8.485 2.828-2.828-8.485-8.486-2.828 2.829zm2.121 6.364a.999.999 0 0 0 0-1.414l-4.95-4.95 4.243-4.243-1.768-1.768a1.5 1.5 0 0 0-2.121 0l-.707.707a1.5 1.5 0 0 0 0 2.121l.354.354-1.415 1.415a2 2 0 0 0 0 2.828l4.95 4.95a1 1 0 0 0 1.414 0zm10.748 4.525l1.838 1.838a.599.599 0 1 0 .848-.848l-1.839-1.839-.99-2.97-2.828 2.828 2.971.991z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-bell-ringing-03" viewbox="0 0 64 64">
		<path class="st0" d="M50.7 17.2c-.8 1.3-1.8 2.4-3 3.2 1.6 2.9 2.2 6.8-.4 11.4-3.5 6.1-5 9.4-5.2 19.4 0 2.2-1.9 4-4.1 3.9-.3 0-.6 0-.9-.1-4.1-1.1-10.1-3-16-6.5-6-3.4-10.7-7.7-13.6-10.6-1.6-1.6-1.5-4.1 0-5.7.2-.2.5-.4.7-.5 8.6-5.1 10.7-8.2 14.2-14.2 2.7-4.6 6.3-6 9.7-6 .1-1.5.5-2.9 1.3-4.2 2.8-4.8 8.9-6.4 13.7-3.7s6.4 8.8 3.6 13.6zM45.1 7c-2.9-1.7-6.5-.7-8.2 2.2-.5.8-.7 1.8-.8 2.7 2.4.6 4.3 1.6 5 2 .6.4 2.5 1.5 4.2 3.3.8-.5 1.5-1.2 2-2 1.6-2.9.6-6.6-2.2-8.2zM26 56l-6.9-4-6.9-4c-2.2 3.8-1 8.7 2.9 10.9 3.7 2.3 8.6 1 10.9-2.9-.1.1 0 0 0 0zm34.6-24.9c2.2 8.3-2.8 17-11.1 19.3-.9.3-1.8-.2-2.1-1.1V49c-.2-.9.3-1.8 1.2-2h.1c6.4-1.8 10.3-8.5 8.6-15v-.1c-.2-.9.3-1.8 1.1-2l1.4-.4c.1 0 .2 0 .3.1.1.5.3 1 .5 1.5z" fill="currentColor"></path>
		<path class="st0" d="M46.8 40.3c-1 .2-1.5 1.1-1.3 2v.2c.2.9 1.1 1.4 2 1.2h.1c4.6-1.3 7.4-6.1 6.2-10.7v-.1c-.2-.9-1.2-1.4-2-1.1h-.2c-.9.2-1.4 1.2-1.1 2v.1c.8 2.7-.9 5.6-3.7 6.4zM19 15.6c1-.2 1.5-1.1 1.3-2v-.2c-.2-.9-1.1-1.4-2-1.2-4.6 1.3-7.4 6.1-6.2 10.7.2.9 1.1 1.4 2 1.2h.2c.9-.2 1.4-1.2 1.1-2V22c-.8-2.7.9-5.6 3.6-6.4z" fill="currentColor"></path>
		<path class="st0" d="M5.3 24.8c.3 1 1.2 1.5 2.1 1.2h.2c.8-.2 1.3-1.1 1.1-2v-.1c-1.7-6.5 2.2-13.2 8.6-15h.1c.9-.2 1.4-1.1 1.2-2l-.2-.8c-.1-.5-.6-.8-1-.7-.3 0-.6.1-.9.2C8.1 7.9 3.2 16.5 5.3 24.8z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-bell-ringing-path" viewbox="0 0 64 64">
		<path class="st0" d="M21.9 49.4c6.1 3.7 12.6 5.3 16.9 6.1 1.1.2 2.3-.2 3.1-.9.8-.8 1.3-1.9 1.1-3.1-1-9.8 1.2-10.7 2.9-14.2 2.4-4.9 2-9.4.4-13 1.3-.8 2.5-1.9 3.3-3.2 2.6-4.3 1.2-10-3.1-12.6-2.1-1.3-4.6-1.6-7-1-2.3.6-4.3 2-5.6 4.2-.8 1.3-1.2 2.8-1.3 4.3-1 0-1.9.2-2.8.4-3.1.8-6.1 2.6-8.4 6.1-3 4.5-4.2 6.3-11.3 9.2-1.9.8-2.8 2.9-2 4.8.1.3.3.6.5.8 2.7 3.4 7.2 8.4 13.3 12.1zm15.2-35.9c.7-1.3 2-2.2 3.4-2.5 1.4-.4 2.9-.1 4.2.6s2.2 2 2.5 3.4c.6 2.4-.5 4.9-2.7 6.1-1.1-1.4-2.4-2.5-3.6-3.2-1.2-.7-2.8-1.3-4.5-1.7-.1-.9.2-1.8.7-2.7zM24.3 24.7l.2-.2c1.6-2.4 3.7-4 6.3-4.6.9-.2 1.7-.3 2.5-.3 2.3 0 4.4.7 5.7 1.5 1.4.8 2.9 2.4 3.9 4.4 1.3 2.7 1.8 6.2-.2 10.2l-.9 1.5c-2 3.2-3.3 6.2-2.4 14.7-4-.7-10-2.2-15.6-5.6-5.6-3.4-9.7-7.9-12.2-11.2 7.6-3.2 9.4-5.5 12.7-10.4zm-8 34.2c-3.5-2.1-4.5-6.7-2.5-10.1l6.3 3.8 6.3 3.8c-2.1 3.3-6.7 4.5-10.1 2.5z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-bell-ringing-waves" viewbox="0 0 64 64">
		<path class="st0" d="M60.6 31.1c2.2 8.3-2.8 17-11.1 19.3-.9.3-1.8-.2-2.1-1.1V49c-.2-.9.3-1.8 1.2-2h.1c6.4-1.8 10.3-8.5 8.6-15v-.1c-.2-.9.3-1.8 1.1-2l1.4-.4c.1 0 .2 0 .3.1.1.5.3 1 .5 1.5z" fill="currentColor"></path>
		<path class="st0" d="M46.8 40.3c-1 .2-1.5 1.1-1.3 2v.2c.2.9 1.1 1.4 2 1.2h.1c4.6-1.3 7.4-6.1 6.2-10.7v-.1c-.2-.9-1.2-1.4-2-1.1h-.2c-.9.2-1.4 1.2-1.1 2v.1c.8 2.7-.9 5.6-3.7 6.4zM19 15.6c1-.2 1.5-1.1 1.3-2v-.2c-.2-.9-1.1-1.4-2-1.2-4.6 1.3-7.4 6.1-6.2 10.7.2.9 1.1 1.4 2 1.2h.2c.9-.2 1.4-1.2 1.1-2V22c-.8-2.7.9-5.6 3.6-6.4z" fill="currentColor"></path>
		<path class="st0" d="M5.3 24.8c.3 1 1.2 1.5 2.1 1.2h.2c.8-.2 1.3-1.1 1.1-2v-.1c-1.7-6.5 2.2-13.2 8.6-15h.1c.9-.2 1.4-1.1 1.2-2l-.2-.8c-.1-.5-.6-.8-1-.7-.3 0-.6.1-.9.2C8.1 7.9 3.2 16.5 5.3 24.8z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-bell-ringing" viewbox="0 0 32 32">
		<path d="M23.526 1.751a5 5 0 0 0-6.83 1.83 4.942 4.942 0 0 0-.639 2.125c-1.679.033-3.491.733-4.826 3.019-1.759 3.012-2.787 4.525-7.105 7.1a2 2 0 0 0-.401 3.123c1.472 1.495 3.822 3.6 6.8 5.319h.001l.002.001c2.978 1.72 5.977 2.702 8.007 3.23a2.002 2.002 0 0 0 2.504-1.909c.071-5.026.867-6.674 2.596-9.703 1.313-2.299 1.013-4.219.202-5.689a4.954 4.954 0 0 0 1.52-1.616 5 5 0 0 0-1.831-6.83zm.098 5.83a2.966 2.966 0 0 1-.99 1.016 10.246 10.246 0 0 0-2.107-1.65 10.19 10.19 0 0 0-2.484-1.001c.02-.466.136-.934.385-1.366a3.003 3.003 0 0 1 4.098-1.098 3.004 3.004 0 0 1 1.098 4.099zM7.527 29.464a4.002 4.002 0 0 1-1.465-5.465l3.465 2 3.463 2a4 4 0 0 1-5.463 1.465z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-calculator" viewbox="0 0 32 32">
		<path d="M27 6.5v2.9a.6.6 0 0 1-.6.6H5.6a.6.6 0 0 1-.6-.6V6.6a.6.6 0 0 1 .6-.6h20.9a.5.5 0 0 1 .5.5zM9.4 12H6.6a.6.6 0 0 0-.6.6v2.8a.6.6 0 0 0 .6.6h2.8a.6.6 0 0 0 .6-.6v-2.8a.6.6 0 0 0-.6-.6zm8 0h-2.8a.6.6 0 0 0-.6.6v2.8a.6.6 0 0 0 .6.6h2.8a.6.6 0 0 0 .6-.6v-2.8a.6.6 0 0 0-.6-.6zm8 0h-2.8a.6.6 0 0 0-.6.6v2.8a.6.6 0 0 0 .6.6h2.8a.6.6 0 0 0 .6-.6v-2.8a.6.6 0 0 0-.6-.6zm0 6h-2.8a.6.6 0 0 0-.6.6v2.8a.6.6 0 0 0 .6.6h2.8a.6.6 0 0 0 .6-.6v-2.8a.6.6 0 0 0-.6-.6zm-8 0h-2.8a.6.6 0 0 0-.6.6v2.8a.6.6 0 0 0 .6.6h2.8a.6.6 0 0 0 .6-.6v-2.8a.6.6 0 0 0-.6-.6zm-8 0H6.6a.6.6 0 0 0-.6.6v2.8a.6.6 0 0 0 .6.6h2.8a.6.6 0 0 0 .6-.6v-2.8a.6.6 0 0 0-.6-.6zm0 6H6.6a.6.6 0 0 0-.6.6v2.8a.6.6 0 0 0 .6.6h2.8a.6.6 0 0 0 .6-.6v-2.8a.6.6 0 0 0-.6-.6zm8 0h-2.8a.6.6 0 0 0-.6.6v2.8a.6.6 0 0 0 .6.6h2.8a.6.6 0 0 0 .6-.6v-2.8a.6.6 0 0 0-.6-.6zm8 0h-2.8a.6.6 0 0 0-.6.6v2.8a.6.6 0 0 0 .6.6h2.8a.6.6 0 0 0 .6-.6v-2.8a.6.6 0 0 0-.6-.6zM25 4H7C5.346 4 4 5.346 4 7v20c0 1.654 1.346 3 3 3h18c1.654 0 3-1.346 3-3V7c0-1.654-1.346-3-3-3m0-2a5 5 0 0 1 5 5v20a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5h18z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-calendar-statistics" viewbox="0 0 32 32">
		<path d="M28.002 4.367l-.001-2.368a2 2 0 0 0-2-1.999H24a2 2 0 0 0-2 2v2H10V2a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v2.367C1.676 5.193 0 7.391 0 10v16a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V10c0-2.609-1.674-4.805-3.998-5.633zM24 2h2v4h-2V2zM6 2h2v4H6V2zm24 24a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V10h28v16zm-7.071-.629a1 1 0 0 1-.928.629h-4a.999.999 0 0 1-.868-.504L14 20.016l-3.132 5.481A1 1 0 0 1 10 26H7a1 1 0 0 1 0-2h2.42l3.712-6.496a.999.999 0 0 1 1.736 0L18.58 24h2.742l3.379-8.444a.998.998 0 1 1 1.855.744l-3.627 9.071z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-camcorder-arrow" viewbox="0 0 32 32">
		<path d="M15.251 15.501a.6.6 0 0 1 0 .998l-4.318 2.879a.6.6 0 0 1-.933-.499v-5.758a.6.6 0 0 1 .933-.499l4.318 2.879zM32 9.618v12.764a1 1 0 0 1-1.447.894L24 20v3a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h18a3 3 0 0 1 3 3v3l6.553-3.276a.992.992 0 0 1 .973.043 1 1 0 0 1 .474.851zM22 19V9c0-.551-.449-1-1-1H3c-.551 0-1 .449-1 1v14c0 .551.449 1 1 1h18c.551 0 1-.449 1-1v-4zm8-7.764l-6 3v3.528l6 3v-9.528z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-check-mark" viewbox="0 0 32 32">
		<path d="M2.707 16.393a1 1 0 0 1 1.414-1.414l9.192 9.192L28.162 9.323a1 1 0 0 1 1.414 1.414L14.02 26.293a1 1 0 0 1-1.414 0l-9.899-9.9z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-circle-check-mark" viewbox="0 0 32 32">
		<path d="M15 2C6.716 2 0 8.716 0 17c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15zm0 28C7.832 30 2 24.168 2 17S7.832 4 15 4s13 5.832 13 13-5.832 13-13 13zm8.471-17.814a1 1 0 0 1 0 1.414l-8.692 8.692a.999.999 0 0 1-1.414 0l-5.657-5.657a.999.999 0 1 1 1.414-1.414l4.95 4.95 7.985-7.985a1 1 0 0 1 1.414 0z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-circle-info" viewbox="0 0 32 32">
		<path d="M16 22h1a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2h1v-6h-1a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v7zm0-11a1 1 0 1 0-2 0 1 1 0 0 0 2 0zm-1-7C7.832 4 2 9.832 2 17s5.832 13 13 13 13-5.832 13-13S22.168 4 15 4m0-2c8.284 0 15 6.716 15 15s-6.716 15-15 15S0 25.284 0 17 6.716 2 15 2z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-connection" viewbox="0 0 32 32">
		<path d="M5 12c1.662 0 3.125.82 4.034 2.068l13.101-5.955A4.921 4.921 0 0 1 22 7a5 5 0 1 1 5 5 4.984 4.984 0 0 1-4.034-2.068l-13.1 5.955c.082.359.134.729.134 1.113s-.052.754-.134 1.113l13.101 5.955A4.98 4.98 0 0 1 27 22a5 5 0 1 1-5 5c0-.384.052-.754.134-1.113l-13.1-5.955A4.982 4.982 0 0 1 5 22a5 5 0 0 1 0-10z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-cross-mark" viewbox="0 0 32 32">
		<path d="M17.414 16l7.071 7.071a.999.999 0 1 1-1.414 1.414L16 17.414l-7.071 7.071a.999.999 0 1 1-1.414-1.414L14.586 16 7.515 8.929a.999.999 0 1 1 1.414-1.414L16 14.586l7.071-7.071a.999.999 0 1 1 1.414 1.414L17.414 16z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-curve" viewbox="0 0 640 28.9">
		<path d="M320.3 19.9C205.2 19.9 97 12.8 0 0v28.9h640V.1c-96 12.7-204.9 19.8-319.7 19.8z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-document-text-arrow-down-02" viewbox="0 0 32 32">
		<path d="M29.707 7.707a1 1 0 0 1 .293.707V28a4 4 0 0 1-4 4H15.5a.5.5 0 0 1 0-1H26c1.654 0 3-1.346 3-3V9h-6a2 2 0 0 1-2-2V1H8C6.346 1 5 2.346 5 4v12.5a.5.5 0 0 1-1 0V4a4 4 0 0 1 4-4h13.586c.265 0 .52.105.707.293l7.414 7.414zM11.096 20.904a6.5 6.5 0 0 1 0 9.192 6.498 6.498 0 0 1-9.192 0 6.5 6.5 0 1 1 9.192-9.192zm-.707.707c-2.144-2.145-5.634-2.145-7.778 0s-2.144 5.634 0 7.778a5.505 5.505 0 0 0 7.778 0 5.505 5.505 0 0 0 0-7.778zM26 18H12v1h14v-1zm0 4v-1H15v1h11zm0-10H8v1h18v-1zM8 16h18v-1H8v1zm1.295 9.287L7 27.254V22.5a.5.5 0 0 0-1 0v4.754l-2.295-1.967a.501.501 0 0 0-.651.759l3.121 2.675c.187.16.463.16.651 0l3.12-2.675a.5.5 0 1 0-.651-.759z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-envelope-closed" viewbox="0 0 32 32">
		<path d="M30.876 6.525A5.984 5.984 0 0 0 26 4H6a5.981 5.981 0 0 0-4.876 2.525A5.953 5.953 0 0 0 0 10v12a6 6 0 0 0 6 6h20a6 6 0 0 0 6-6V10a5.96 5.96 0 0 0-1.124-3.475zM6 6h20c.653 0 1.261.172 1.806.451L16.03 16.006 4.204 6.445A3.944 3.944 0 0 1 6 6zm24 16c0 2.206-1.794 4-4 4H6a4.004 4.004 0 0 1-4.001-4V10c0-.821.251-1.584.676-2.219l12.097 9.781c.36.291.794.438 1.227.438.434 0 .867-.147 1.228-.438l12.097-9.781A3.97 3.97 0 0 1 30 10v12z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-flag-filled" viewbox="0 0 32 32">
		<path d="M4 2.744V1a1 1 0 0 0-2 0v30a1 1 0 0 0 2 0V18.744c7.864-3.667 15.729 7.37 23.593 1.571.255-.188.407-.488.407-.805V5.881a1 1 0 0 0-1.482-.875C19.012 9.138 11.506-.756 4 2.744z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-gallery-g" viewbox="0 0 34.917 34.917">
		<path d="M30.302 19.617a1 1 0 0 1-1 1H5.614a1 1 0 0 1-1-1V5.054a1 1 0 0 1 1-1h23.688a1 1 0 0 1 1 1v14.563zm0 10v-6.563a1 1 0 0 0-1-1H5.614a1 1 0 0 0-1 1v6.563h25.688z" fill="currentColor"></path>
		<path d="M32.552 34.083H2.364c-.827 0-1.5-.673-1.5-1.5V2.333c0-.827.673-1.5 1.5-1.5h30.188c.827 0 1.5.673 1.5 1.5v30.25c0 .828-.673 1.5-1.5 1.5zM2.364 1.833a.5.5 0 0 0-.5.5v30.25a.5.5 0 0 0 .5.5h30.188a.5.5 0 0 0 .5-.5V2.333a.5.5 0 0 0-.5-.5H2.364z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-gallery-n" viewbox="0 0 34.917 34.917">
		<path d="M12.302 10.617a1 1 0 0 1-1 1H5.614a1 1 0 0 1-1-1V5.054a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1V5.054a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1V5.054a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm-18 9a1 1 0 0 1-1 1H5.614a1 1 0 0 1-1-1v-5.563a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1v-5.563a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1v-5.563a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm-18 9a1 1 0 0 1-1 1H5.614a1 1 0 0 1-1-1v-5.563a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1v-5.563a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1v-5.563a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563z" fill="currentColor"></path>
		<path d="M32.552 34.083H2.364c-.827 0-1.5-.673-1.5-1.5V2.333c0-.827.673-1.5 1.5-1.5h30.188c.827 0 1.5.673 1.5 1.5v30.25c0 .828-.673 1.5-1.5 1.5zM2.364 1.833a.5.5 0 0 0-.5.5v30.25a.5.5 0 0 0 .5.5h30.188a.5.5 0 0 0 .5-.5V2.333a.5.5 0 0 0-.5-.5H2.364z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-gallery-p" viewbox="0 0 34.917 34.917">
		<path d="M12.302 10.617a1 1 0 0 1-1 1H5.614a1 1 0 0 1-1-1V5.054a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1V5.054a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1V5.054a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm-18 9a1 1 0 0 1-1 1H5.614a1 1 0 0 1-1-1v-5.563a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1v-5.563a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zm9 0a1 1 0 0 1-1 1h-5.688a1 1 0 0 1-1-1v-5.563a1 1 0 0 1 1-1h5.688a1 1 0 0 1 1 1v5.563zM8.259 25.165a.474.474 0 0 1-.475.474H5.089a.475.475 0 0 1-.475-.474v-2.637c0-.262.213-.474.475-.474h2.695c.263 0 .475.212.475.474v2.637zm4.87 0a.474.474 0 0 1-.474.474H9.959a.475.475 0 0 1-.475-.474v-2.637c0-.262.213-.474.475-.474h2.696c.262 0 .474.212.474.474v2.637zm4.87 0a.475.475 0 0 1-.475.474h-2.695a.474.474 0 0 1-.475-.474v-2.637c0-.262.212-.474.475-.474h2.695c.262 0 .475.212.475.474v2.637zm4.87 0a.474.474 0 0 1-.474.474h-2.696a.475.475 0 0 1-.475-.474v-2.637c0-.262.213-.474.475-.474h2.696c.262 0 .474.212.474.474v2.637zm4.87 0a.474.474 0 0 1-.474.474h-2.696a.474.474 0 0 1-.474-.474v-2.637c0-.262.212-.474.474-.474h2.696c.262 0 .474.212.474.474v2.637z" fill="currentColor"></path>
		<path d="M32.552 34.083H2.364c-.827 0-1.5-.673-1.5-1.5V2.333c0-.827.673-1.5 1.5-1.5h30.188c.827 0 1.5.673 1.5 1.5v30.25c0 .828-.673 1.5-1.5 1.5zM2.364 1.833a.5.5 0 0 0-.5.5v30.25a.5.5 0 0 0 .5.5h30.188a.5.5 0 0 0 .5-.5V2.333a.5.5 0 0 0-.5-.5H2.364z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-h" viewbox="0 0 48.88 78.87">
		<path d="M52.88 83.23H38.69V55c0-11-5.48-17.51-13.44-17.51a18.29 18.29 0 0 0-7.15 1.45v44.29H4V4.36h14.09v24.18a26.5 26.5 0 0 1 9.85-1.86c14.49 0 24.95 10 24.95 27.14z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-habitaclia" viewbox="0 0 119.008 31.833">
		<path d="M24.51 7.079c-2.255 0-4.479.577-5.778 1.127l.982 2.657c1.098-.462 2.888-.923 4.363-.923 1.789 0 2.917.605 2.917 2.223v.808c-4.709.261-9.128 1.099-9.128 5.345 0 3.178 2.339 5.026 7.02 5.026 2.34 0 4.679-.52 5.834-1.126v-9.589c-.001-3.987-2.224-5.548-6.21-5.548zm2.483 13.144c-.404.173-1.387.318-2.224.318-2.051 0-3.208-.837-3.208-2.312 0-2.34 2.54-2.6 5.431-2.743v4.737zm12.87-12.999c-.924 0-2.051.203-2.741.52V1H33.19v21.216c1.271.607 3.35 1.127 5.519 1.127 4.968 0 7.945-2.716 7.945-8.55 0-4.766-2.746-7.569-6.791-7.569zm-.924 13.028c-.721 0-1.443-.146-1.818-.318v-9.303c.488-.23 1.27-.405 1.992-.405 2.224 0 3.582 1.823 3.582 4.882 0 3.441-1.503 5.144-3.756 5.144zm-22.906 2.743h-3.958V15.11c0-3.06-1.528-4.882-3.75-4.882-.725 0-1.504.174-1.995.405v12.364H2.401V1H6.33v6.744c.694-.317 1.819-.52 2.747-.52 4.042 0 6.957 2.803 6.957 7.569v8.202zM50.952 5.259c-1.24 0-2.253-.954-2.253-2.14 0-1.183 1.013-2.107 2.253-2.107 1.242 0 2.254.924 2.254 2.107.001 1.186-1.012 2.14-2.254 2.14m-1.964 2.168h3.928v15.569h-3.928zm7.075 0V2.834h3.929v4.593h2.858v2.947h-2.858v7.684c0 1.27.72 1.704 1.733 1.704.405 0 .865-.115 1.125-.231v3.265c-.461.229-1.415.432-2.368.432-3.003 0-4.42-1.645-4.42-4.91V7.427zm15.222-.348c-2.252 0-4.476.577-5.776 1.127l.98 2.657c1.1-.462 2.89-.923 4.363-.923 1.792 0 2.919.605 2.919 2.223v.808c-4.709.261-9.129 1.099-9.129 5.345 0 3.178 2.342 5.026 7.02 5.026 2.34 0 4.678-.52 5.835-1.126v-9.589c-.001-3.987-2.226-5.548-6.212-5.548zm2.486 13.144c-.404.173-1.388.318-2.225.318-2.051 0-3.208-.837-3.208-2.312 0-2.34 2.544-2.6 5.433-2.743v4.737zm12.766 3.12c-3.642 0-6.963-2.6-6.963-8.146 0-5.546 3.321-8.118 6.963-8.118 1.848 0 3.148.404 4.131 1.069l-1.244 2.831c-.577-.434-1.414-.665-2.309-.665-1.938 0-3.467 1.618-3.467 4.852 0 3.236 1.586 4.855 3.467 4.855.896 0 1.732-.262 2.309-.695l1.244 2.949c-1.011.662-2.283 1.068-4.131 1.068M92.503 1h3.928v21.996h-3.928zm8.965 4.259c-1.239 0-2.251-.954-2.251-2.14 0-1.183 1.013-2.107 2.251-2.107 1.243 0 2.257.924 2.257 2.107 0 1.186-1.014 2.14-2.257 2.14m-1.96 2.168h3.926v15.569h-3.926zm12.671-.348c-2.256 0-4.479.577-5.778 1.127l.983 2.657c1.098-.462 2.887-.923 4.361-.923 1.792 0 2.917.605 2.917 2.223v.808c-4.708.261-9.128 1.099-9.128 5.345 0 3.178 2.341 5.026 7.019 5.026 2.341 0 4.851-.52 6.004-1.126v-9.589c0-3.987-2.394-5.548-6.378-5.548zm2.483 13.144c-.406.173-1.386.318-2.225.318-2.049 0-3.205-.837-3.205-2.312 0-2.34 2.541-2.6 5.43-2.743v4.737zM8.839 28.8c1.497 0 2.899-.226 4.207-.676a13.325 13.325 0 0 0 3.607-1.882l1.025 2.395a14.019 14.019 0 0 1-4.026 2.336c-1.504.572-3.108.859-4.812.859-1.705 0-3.31-.288-4.814-.859A13.983 13.983 0 0 1 0 28.637l1.023-2.395a13.096 13.096 0 0 0 3.595 1.882c1.317.45 2.723.676 4.221.676" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-heart-02" viewbox="0 0 32 32">
		<path d="M26.789 4.142C23.272 1.07 16.875 1.215 15 5.271 13.125 1.215 6.728 1.049 3.211 4.12-.215 7.112-.768 12.875.927 16.982 3.718 23.743 15 32 15 32s11.282-8.235 14.072-14.996c1.696-4.107 1.143-9.87-2.283-12.862z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-heart" viewbox="0 0 32 32">
		<path d="M24.346 2.078C19.985 1.642 17.858 3.102 16 5.09c-1.857-1.987-3.996-3.451-8.342-3.011C4.297 2.396.467 5.291 0 10.976l.004 1.749c.477 5.95 5.523 12.128 15.43 18.888l.234.16c.2.137.464.137.664 0l.234-.16C26.473 24.853 31.52 18.675 32 12.647l-.004-1.752c-.463-5.604-4.293-8.499-7.65-8.817zM16 29.587C7.119 23.425 2.408 17.703 2 12.647l-.004-1.589c.369-4.466 3.293-6.761 5.857-7.004.448-.044.866-.064 1.259-.064 2.834 0 4.234 1.045 6.129 3.241l.314.364a.588.588 0 0 0 .892 0l.314-.364c2.158-2.499 3.725-3.533 7.391-3.177 2.561.242 5.484 2.537 5.85 6.922l.004 1.592C29.592 17.701 24.881 23.425 16 29.587z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-lifebuoy" viewbox="0 0 32 32">
		<path d="M10.494 7.666L6.2 3.372C8.909 1.266 12.303 0 16 0s7.091 1.266 9.8 3.372l-4.294 4.294a9.932 9.932 0 0 0-11.012 0zM16 26a9.932 9.932 0 0 1-5.506-1.666L6.2 28.628C8.909 30.734 12.303 32 16 32s7.091-1.266 9.8-3.372l-4.294-4.294A9.932 9.932 0 0 1 16 26zm10-10a9.932 9.932 0 0 1-1.666 5.506l4.294 4.294C30.734 23.091 32 19.697 32 16s-1.266-7.091-3.372-9.8l-4.294 4.294A9.932 9.932 0 0 1 26 16zM6 16c0-2.035.618-3.925 1.666-5.506L3.372 6.2C1.266 8.909 0 12.303 0 16s1.266 7.091 3.372 9.8l4.294-4.294A9.932 9.932 0 0 1 6 16z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-location-02" viewbox="0 0 32 32">
		<path d="M16 2c2.137 0 4.146.832 5.657 2.343A7.948 7.948 0 0 1 24 10c0 2.903-3.041 9.781-8 18.149C11.041 19.781 8 12.903 8 10c0-2.137.832-4.146 2.343-5.657A7.948 7.948 0 0 1 16 2m0-2a9.968 9.968 0 0 0-7.071 2.929A9.968 9.968 0 0 0 6 10c0 5.074 6.725 16.621 9.145 20.612a1 1 0 0 0 1.71-.001C19.276 26.62 26 15.074 26 10a9.968 9.968 0 0 0-2.929-7.071A9.968 9.968 0 0 0 16 0zm0 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-location-orange" viewbox="0 0 64 65.75">
		<path d="M32 1.814a19.933 19.933 0 0 0-14.142 5.858A19.935 19.935 0 0 0 12 21.814c0 10.148 13.45 33.242 18.29 41.225a2 2 0 0 0 3.42-.002C38.552 55.055 52 31.962 52 21.814a19.94 19.94 0 0 0-5.857-14.142A19.946 19.946 0 0 0 32 1.814z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-magnifying-glass-plus" viewbox="0 0 32 32">
		<path d="M11 1.999c4.963 0 9 4.037 9 9s-4.037 9-9 9-9-4.037-9-9 4.037-9 9-9m0-2c-6.075 0-11 4.925-11 11s4.925 11 11 11 11-4.925 11-11-4.925-11-11-11zm7.729 21.54l7.4 7.4a1.5 1.5 0 0 0 2.122-.001l.69-.69a1.501 1.501 0 0 0 0-2.121l-7.399-7.4-2.813 2.812zM16 10.999a1 1 0 0 0-1-1h-3v-3a1 1 0 0 0-2 0v3H7a1 1 0 0 0 0 2h3v3a1 1 0 0 0 2 0v-3h3a1 1 0 0 0 1-1z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-magnifying-glass" viewbox="0 0 32 32">
		<path d="M11 1.999c4.963 0 9 4.037 9 9s-4.037 9-9 9-9-4.037-9-9 4.037-9 9-9m0-2c-6.075 0-11 4.925-11 11s4.925 11 11 11 11-4.925 11-11-4.925-11-11-11zm7.729 21.54l7.4 7.4a1.5 1.5 0 0 0 2.122-.001l.69-.69a1.501 1.501 0 0 0 0-2.121l-7.399-7.4-2.813 2.812z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-map-location" viewbox="0 0 32 32">
		<path d="M21.536 3.648C20.631 2.63 19.381 2 18 2s-2.631.63-3.536 1.648C13.56 4.665 13 6.072 13 7.625c0 2.844 3.339 9.305 4.56 11.571a.5.5 0 0 0 .88 0C19.661 16.929 23 10.469 23 7.625c0-1.553-.56-2.96-1.464-3.977zM18 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6zM1.339 28.902a3 3 0 0 1-.622-2.49l2.8-14A3 3 0 0 1 6.459 10h4.161a.998.998 0 0 1 .803 1.595.994.994 0 0 1-.802.405H6.459c-.475 0-.887.338-.981.804l-2.8 14A.999.999 0 0 0 3.659 28H25.54c.475 0 .887-.338.981-.804l2.8-14a.999.999 0 0 0-.98-1.196H25.38a.999.999 0 1 1-.001-2h2.961a3 3 0 0 1 2.942 3.588l-2.8 14A2.998 2.998 0 0 1 25.541 30H3.659c-.898 0-1.75-.403-2.32-1.098z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-menu" viewbox="0 0 32 32">
		<path d="M30 9a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1zm-1 7H3a1 1 0 0 0 0 2h26a1 1 0 0 0 0-2zm0 8H3a1 1 0 0 0 0 2h26a1 1 0 0 0 0-2z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-padlock-closed-03" viewbox="0 0 32 32">
		<path d="M24 14v-4a8 8 0 0 0-16 0v4a2 2 0 0 0-2 2v10a6 6 0 0 0 6 6h8a6 6 0 0 0 6-6V16a2 2 0 0 0-2-2zm-6.136 11.288a.602.602 0 0 1-.589.712h-2.55a.599.599 0 0 1-.589-.713l.705-3.702C14.344 21.223 14 20.663 14 20a2 2 0 0 1 4 0c0 .663-.344 1.223-.841 1.586l.705 3.702zM22 14H10v-4c0-3.309 2.692-6 6-6s6 2.691 6 6v4z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-phone-receiver-02" viewbox="0 0 32 32">
		<path d="M9.119 22.897c.084.079.891.829 1.44 1.281 4.911 4.05 11.202 6.226 12.452 5.685 3.692-1.6 4.225-2.455 3.989-2.985-.711-1.601-4.961-4.237-5.937-4.198-1.503.059-2.18 1.856-3.392 2.049-.8.128-4.991-2.56-6.419-3.964-1.404-1.428-4.092-5.619-3.964-6.419.193-1.212 1.99-1.89 2.049-3.392.038-.976-2.598-5.225-4.198-5.937-.53-.236-1.385.298-2.985 3.989-.542 1.25 1.635 7.541 5.685 12.452a38.459 38.459 0 0 0 1.28 1.439z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-phone-receiver-message-02" viewbox="0 0 32 32">
		<path d="M28 2H16a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1v3.168a.4.4 0 0 0 .65.313L22 14h6a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-1 8H17a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2zm0-4H17a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2zM7.838 21.458c-4.05-4.911-6.226-11.202-5.685-12.452 1.6-3.692 2.455-4.225 2.985-3.989 1.601.711 4.237 4.961 4.198 5.937-.059 1.503-1.856 2.18-2.049 3.392-.128.8 2.56 4.991 3.964 6.419 1.428 1.404 5.619 4.092 6.419 3.964 1.212-.193 1.89-1.991 3.392-2.049.976-.038 5.225 2.598 5.937 4.198.236.53-.298 1.385-3.989 2.985-1.25.542-7.541-1.635-12.452-5.685a40.357 40.357 0 0 1-1.44-1.281c-.078-.084-.828-.891-1.28-1.439z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-plus" viewbox="0 0 32 32">
		<path d="M16 16h11a1 1 0 0 1 0 2H16v11a1 1 0 0 1-2 0V18H3a1 1 0 0 1 0-2h11V5a1 1 0 0 1 2 0v11z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-printer-document-text" viewbox="0 0 32 32">
		<path d="M24 22H8v-2h16v2zm8-9v10a1 1 0 0 1-1 1h-3v4c0 2.213-1.789 4-4 4H8c-2.211 0-4-1.787-4-4v-4H1a1 1 0 0 1-1-1V13a1 1 0 0 1 1-1h3V4c0-2.213 1.789-4 4-4h12l8 8v4h3a1 1 0 0 1 1 1zm-6 5H6v10c0 1.103.896 2 2 2h16c1.104 0 2-.897 2-2V18zm0-8h-6c-1.106 0-2-.895-2-2V2H8a2 2 0 0 0-2 2v8h20v-2zm-2 14H8v2h16v-2z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-round-footer" preserveaspectratio="none" viewbox="0 0 47.672 26.625">
		<path d="M46.882 26.625H0V0h42.734s3.59 7.214 4.341 10.467c1.447 6.27-.193 16.158-.193 16.158z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-save-searches" viewbox="0 0 64 52.1">
		<path d="M27.5 16.5c5 0 9.1 4.1 9.1 9.1s-4.1 9.1-9.1 9.1-9.1-4.1-9.1-9.1 4.1-9.1 9.1-9.1m0-2c-6.2 0-11.2 5-11.2 11.2s5 11.2 11.2 11.2 11.2-5 11.2-11.2-5-11.2-11.2-11.2zm7.9 21.8l7.5 7.5c.6.6 1.6.6 2.2 0l.7-.7c.6-.6.6-1.6 0-2.2l-7.5-7.5-2.9 2.9z" fill="currentColor"></path>
		<path d="M24.7 4c1.1 0 2.1.4 2.8 1.2l6.8 6.8H56c2.2 0 4 1.8 4 4v28c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V8c0-2.2 1.8-4 4-4h16.7m0-4H8C3.6 0 0 3.6 0 8v36c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V16c0-4.4-3.6-8-8-8H36l-5.7-5.7C28.8.8 26.8 0 24.7 0z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-sliders-02" viewbox="0 0 32 32">
		<path d="M10 10V8a4 4 0 0 0-4-4V1a1 1 0 0 0-2 0v3a4 4 0 0 0-4 4v2a4 4 0 0 0 4 4v17a1 1 0 0 0 2 0V14a4 4 0 0 0 4-4zm-8 0V8c0-1.103.897-2 2-2h2c1.103 0 2 .897 2 2v2c0 1.103-.897 2-2 2H4c-1.103 0-2-.897-2-2zm18 14v-2a4 4 0 0 0-4-4V1a1 1 0 0 0-2 0v17a4 4 0 0 0-4 4v2a4 4 0 0 0 4 4v3a1 1 0 0 0 2 0v-3a4 4 0 0 0 4-4zm-8 0v-2c0-1.103.897-2 2-2h2c1.103 0 2 .897 2 2v2c0 1.103-.897 2-2 2h-2c-1.103 0-2-.897-2-2zm18-14V8a4 4 0 0 0-4-4V1a1 1 0 0 0-2 0v3a4 4 0 0 0-4 4v2a4 4 0 0 0 4 4v17a1 1 0 0 0 2 0V14a4 4 0 0 0 4-4zm-8 0V8c0-1.103.897-2 2-2h2c1.103 0 2 .897 2 2v2c0 1.103-.897 2-2 2h-2c-1.103 0-2-.897-2-2z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-smile" viewbox="0 0 63.39 20.04">
		<path d="M34.09 11a46 46 0 0 0 15.08-2.38A47.92 47.92 0 0 0 62.1 1.87l3.68 8.59a50.31 50.31 0 0 1-14.44 8.38 48.18 48.18 0 0 1-17.25 3.08 48.21 48.21 0 0 1-17.26-3.08 50.28 50.28 0 0 1-14.44-8.38l3.68-8.59A47.09 47.09 0 0 0 19 8.62 46.45 46.45 0 0 0 34.09 11" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-speech-bubble-02" viewbox="0 0 32 32">
		<path d="M27 0H5a5 5 0 0 0-5 5v14a5 5 0 0 0 5 5h5l4.88 6.507a1.4 1.4 0 0 0 2.24 0L22 24h5a5 5 0 0 0 5-5V5a5 5 0 0 0-5-5zm3 19c0 1.654-1.346 3-3 3h-6l-5 6.667L11 22H5c-1.654 0-3-1.346-3-3V5c0-1.654 1.346-3 3-3h22c1.654 0 3 1.346 3 3v14z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-square-social-facebook" viewbox="0 0 64 64">
		<path d="M32 0C14.327 0 0 14.327 0 32c0 17.674 14.327 32 32 32 17.674 0 32-14.326 32-32C64 14.327 49.674 0 32 0zm0 60C16.536 60 4 47.464 4 32S16.536 4 32 4s28 12.536 28 28-12.536 28-28 28z" fill="currentColor"></path>
		<path d="M32.5 48a1.5 1.5 0 0 0 1.5-1.5V32h3.848a1.5 1.5 0 0 0 1.477-1.235l.359-2A1.5 1.5 0 0 0 38.207 27H34v-2.917c0-1.647.826-2.597 3.1-2.597h1.4a1.5 1.5 0 0 0 1.5-1.5v-2.393a1.5 1.5 0 0 0-1.396-1.497A42.662 42.662 0 0 0 35.773 16C31.592 16 28 18.651 28 23.519V27h-2.5a1.5 1.5 0 0 0-1.5 1.5v2a1.5 1.5 0 0 0 1.5 1.5H28v14.5a1.5 1.5 0 0 0 1.5 1.5h3z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-square-social-gplus" viewbox="0 0 64 64">
		<path d="M32 0C14.327 0 0 14.327 0 32c0 17.674 14.327 32 32 32 17.674 0 32-14.326 32-32C64 14.327 49.674 0 32 0zm0 60C16.536 60 4 47.464 4 32S16.536 4 32 4s28 12.536 28 28-12.536 28-28 28z" fill="currentColor"></path>
		<path d="M34.122 33.954c-.989-.658-2.879-2.259-2.879-3.2 0-1.103.335-1.646 2.099-2.943 1.809-1.329 3.043-2.373 3.09-4.547.055-2.599-1.23-4.979-2.623-4.979h2.367a.5.5 0 0 0 .342-.135l1.377-1.286a.499.499 0 1 0-.342-.864h-9.669c-4.903 0-9.518 2.911-9.518 6.958 0 4.136 3.343 7.182 8.331 7.182.347 0 1.014-.175 1.014-.175-1.017 1.963.092 4.404.933 4.32-.628 0-1.749-.026-2.41 0C19.958 34.536 16 38.139 16 41.91 16 45.625 21.125 48 27.198 48c6.924 0 10.747-3.67 10.747-7.385.002-2.98-.933-4.739-3.823-6.661zm-6.058-5.5c-2.818-.079-5.346-2.609-5.766-6.098-.298-2.463 1.787-4.633 4.538-4.749 2.391-.101 5.177 1.556 5.664 5.036.486 3.48-1.62 5.89-4.436 5.811zm-.857 17.655c-4.198 0-7.261-2.201-7.261-5.203 0-2.943 3.919-4.271 8.117-4.229.98.01 6.21.537 6.937 3.321.09.345.134.698.134 1.062.001 3.003-2.025 5.049-7.927 5.049zM47 32h-3v3a1 1 0 1 1-2 0v-3h-3a1 1 0 0 1 0-2h3v-3a1 1 0 0 1 2 0v3h3a1 1 0 0 1 0 2z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-square-social-twitter" viewbox="0 0 64 64">
		<path d="M32 0C14.327 0 0 14.327 0 32c0 17.674 14.327 32 32 32 17.674 0 32-14.326 32-32C64 14.327 49.674 0 32 0zm0 60C16.536 60 4 47.464 4 32S16.536 4 32 4s28 12.536 28 28-12.536 28-28 28z" fill="currentColor"></path>
		<path d="M46.93 20.347a.2.2 0 1 0-.282-.25 12.935 12.935 0 0 1-3.701 1.362 6.485 6.485 0 0 0-4.793-2.125c-3.625 0-6.564 3.014-6.564 6.731 0 .528.058 1.042.17 1.534-5.012-.258-9.503-2.54-12.711-6.067a.8.8 0 0 0-1.355.296c-.58 1.838-.86 5.074 2.565 7.726-.626.017-1.255-.132-1.772-.309a.8.8 0 0 0-1.041.922c.355 1.699 1.491 4.383 5.106 5.229a6.077 6.077 0 0 1-1.696.234.799.799 0 0 0-.693 1.196c.758 1.333 2.386 3.221 5.556 3.36-2.228 1.869-4.78 2.545-6.716 2.765a.801.801 0 0 0-.231 1.529A18.193 18.193 0 0 0 26.064 46c12.077 0 18.679-10.258 18.679-19.155 0-.291-.005-.582-.019-.871a13.484 13.484 0 0 0 2.885-2.917.2.2 0 0 0-.004-.24.201.201 0 0 0-.231-.064c-.996.391-2.049.661-3.146.795a6.7 6.7 0 0 0 2.702-3.201z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-star" viewbox="-0.75 -0.583 60.25 56.167">
		<path d="M28.676.204a3.011 3.011 0 0 0-1.579 1.409l-7.783 14.905-16.743 2.41a3 3 0 0 0-1.657 5.125l11.772 11.401-3.12 16.116a3 3 0 0 0 4.311 3.239l15.045-7.697 14.884 7.697a3.007 3.007 0 0 0 4.342-3.133l-2.561-16.295 12.176-11.437a2.999 2.999 0 0 0-1.637-5.158l-16.479-2.313-7.193-14.785A2.994 2.994 0 0 0 28.676.204z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-target-02" viewbox="0 0 32 32">
		<path d="M19 16a3.001 3.001 0 0 1-6 0 3.001 3.001 0 0 1 6 0zM16 2C8.281 2 2 8.281 2 16s6.281 14 14 14 14-6.281 14-14S23.719 2 16 2m0-2c8.836 0 16 7.164 16 16s-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0zm0 8c-4.41 0-8 3.588-8 8s3.59 8 8 8 8-3.588 8-8-3.59-8-8-8m0-2c5.52 0 10 4.48 10 10s-4.48 10-10 10c-5.523 0-10-4.48-10-10S10.477 6 16 6z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-trashcan" viewbox="0 0 32 32">
		<path d="M26 8h-4V6c0-2.211-1.787-4-4-4h-4c-2.211 0-4 1.785-4 4v2H6a2 2 0 0 0-2 2v2h2v14a6 6 0 0 0 6 6h8a6 6 0 0 0 6-6V12h2v-2a2 2 0 0 0-2-2zM12 30a4 4 0 0 1-4-4V12h4v18zm6 0h-4V12h4v18zM12 8V6c-.002-1.105.895-2 2-2h4c1.104-.002 2 .895 2 2v2h-8zm8 22V12h4v14a4 4 0 0 1-4 4z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-two-arrows-refresh-03" viewbox="0 0 32 32">
		<path d="M.508 16a.5.5 0 0 1-.5-.516A15.942 15.942 0 0 1 4.686 4.687 15.947 15.947 0 0 1 16 0a15.95 15.95 0 0 1 11.314 4.686c.069.069.13.142.197.211l3.447-3.76A.598.598 0 1 1 32 1.542V11a1 1 0 0 1-1 1h-8.636a.6.6 0 0 1-.442-1.005l4.227-4.611c-.087-.093-.159-.193-.25-.284C23.255 3.456 19.74 2 16 2S8.745 3.456 6.1 6.1a13.948 13.948 0 0 0-4.086 9.417.498.498 0 0 1-.499.483H.508zm3.981 11.103c.067.07.128.143.197.211A15.95 15.95 0 0 0 16 32a15.95 15.95 0 0 0 11.314-4.686 15.944 15.944 0 0 0 4.678-10.797.499.499 0 0 0-.5-.517h-1.007c-.27 0-.49.213-.499.483A13.95 13.95 0 0 1 25.9 25.9C23.255 28.544 19.74 30 16 30s-7.255-1.456-9.9-4.1c-.09-.09-.162-.191-.249-.283l4.227-4.611A.599.599 0 0 0 9.636 20H1a1 1 0 0 0-1 1v9.458a.6.6 0 0 0 1.043.405l3.446-3.76z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-two-horizontal-rectangles" viewbox="0 0 32 32">
		<path d="M29 2c.551 0 1 .449 1 1v8c0 .551-.449 1-1 1H3c-.551 0-1-.449-1-1V3c0-.551.449-1 1-1h26m0-2H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h26a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3zm0 20c.551 0 1 .449 1 1v8c0 .551-.449 1-1 1H3c-.551 0-1-.449-1-1v-8c0-.551.449-1 1-1h26m0-2H3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h26a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-two-pictures" viewbox="0 0 32 32">
		<path d="M16 16a2 2 0 1 1 4.001.001A2 2 0 0 1 16 16zm.396 4.396a.798.798 0 0 0-.904-.159l-3.228 1.506a.801.801 0 0 1-.946-.204L7.3 16.851a.8.8 0 0 0-1.297.115L4.11 20.187a.803.803 0 0 0-.11.406V25.2a.8.8 0 0 0 .8.8h15.269a.8.8 0 0 0 .566-1.366l-4.239-4.238zM32 8v12a4 4 0 0 1-4 4h-2v2a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V14a4 4 0 0 1 4-4h2V8a4 4 0 0 1 4-4h18a4 4 0 0 1 4 4zm-8 6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V14zm6-6a2 2 0 0 0-2-2H10a2 2 0 0 0-2 2v2h14a4 4 0 0 1 4 4v8h2a2 2 0 0 0 2-2V8z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-user-speech-bubble" viewbox="0 0 32 32">
		<path d="M30 0H20a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2v4.552a.6.6 0 0 0 1.023.424L28 10h2a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 8h-2.828L24 11.172V8h-4V2h10v6zM2.18 32h17.65a2.001 2.001 0 0 0 1.971-2.341c-.687-3.992-3.142-7.413-6.858-8.879A6.991 6.991 0 0 0 18 15a7 7 0 1 0-14 0 6.988 6.988 0 0 0 3.026 5.755C3.42 22.222.922 25.668.209 29.646A2 2 0 0 0 2.18 32zM6 15c0-2.757 2.243-5 5-5s5 2.243 5 5-2.243 5-5 5-5-2.243-5-5zm4.934 7c.175 0 .353.005.531.015 4.29.246 7.573 3.379 8.365 7.984L2.178 30c.691-3.853 3.726-8 8.756-8z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-user" viewbox="0 0 32 32">
		<path d="M3.86 20.934c-1.286 2.186-1.713 4.47-1.853 6.826-.065 1.1.328 2.178 1.086 2.98S4.91 32 6.016 32H25.98a4.025 4.025 0 0 0 2.918-1.252 3.991 3.991 0 0 0 1.095-2.972c-.124-2.194-.498-4.332-1.609-6.392-1.726-3.2-4.671-5.554-8.067-6.664 2.211-1.423 3.684-3.894 3.684-6.719a8 8 0 1 0-16 0c0 2.824 1.471 5.293 3.68 6.717-3.235 1.053-6.067 3.234-7.821 6.216zM10.001 8c0-3.308 2.692-6 6-6s6 2.692 6 6-2.692 6-6 6-6-2.692-6-6zm5.995 8c4.382 0 8.554 2.486 10.628 6.333.818 1.518 1.242 3.231 1.373 5.556a1.997 1.997 0 0 1-.548 1.482c-.38.4-.916.629-1.469.629H6.016a2.03 2.03 0 0 1-1.469-.634 1.998 1.998 0 0 1-.543-1.487c.148-2.495.636-4.324 1.581-5.931A12.119 12.119 0 0 1 15.996 16z" fill="currentColor"></path>
	</symbol>
	<symbol id="ico-virtual-play-arrow" viewbox="0 0 40 60">
		<path d="M0 0v60l40-30L0 0z" fill="currentColor"></path>
    </symbol>
</svg>
<svg class="ico abs-center ico-fav" role="presentation">
    <use xmlns:xlink="http://www.w3.org/1999/xlink"     
    xlink:href="//www.habitaclia.com/dotnet/content/icon/dist/src_504911268000000000.svg#ico-heart-02"></use>
</svg>

Sprites - Uso

gulp.task('svgstore', function () {

    gulp.src(paths.sourceIcons + '/**/*.svg')
        .pipe(svgo())
        .pipe(rename({ prefix: 'ico-' }))
        .pipe(svgmin(function (file) {
            var prefix = path.basename(file.relative, path.extname(file.relative));
            return {
                plugins: [{
                    cleanupIDs: {
                        prefix: prefix + '-',
                        minify: true
                    }
                }]
            }
        }))
         .pipe(cheerio({
             run: function ($) {
                 $('[fill]').attr('fill', 'currentColor');
             },
             parserOptions: { xmlMode: true }
         }))
        .pipe(svgstore({ inlineSvg: true }))
        .pipe(gulp.dest(paths.spriteIconFolder));

    return;
});
<symbol id="ico-360-virtual" viewbox="0 0 54.71 50.94">
    <path d="M12.94 32.32a4.88 4.88 0 0 0 3.31-.91 3.5 3.5 0 0.16-2.81z" fill="currentColor"></path>
</symbol>

Sprites - Uso

 .ico-fav{
    transition: all .1s ease-in-out;
    color: #aeaeae;
 }
 .ico-fav:hover{
    color: #f60;
 }

Responsive

Ejemplo

Ejemplo

Ejemplo

Codepen by Sarah Drasner

Recursos

Recursos

Adrià Velardos

UI & Frontend Engineer

#HTML5 #CSS3 #SASS #Javascript #Animation #SVG #ITCSS #Mapping

adriavelardos@gmail.com

@adridoz

¡Gracias!

Made with Slides.com