{"id":4020,"date":"2016-04-06T10:02:59","date_gmt":"2016-04-06T13:02:59","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=4020"},"modified":"2016-04-06T10:02:59","modified_gmt":"2016-04-06T13:02:59","slug":"svg-sprite-como-criar-um-arquivo-de-icones-usando-svg","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/html\/svg-sprite-como-criar-um-arquivo-de-icones-usando-svg","title":{"rendered":"SVG Sprite – Como criar um arquivo de \u00edcones usando SVG"},"content":{"rendered":"
\"SVG
Sprite com SVG<\/figcaption><\/figure>\n

Quando se trata de implementar um sistema de \u00edcone para seus projetos web, SVG \u00e9 uma \u00f3tima escolha! Neste artigo vamos criar um SVG Sprite usando uma t\u00e9cnica que baseia-se na utiliza\u00e7\u00e3o de dois elementos: <symbol><\/em> e <use><\/em>.<\/p>\n

<\/p>\n

O elemento <symbol><\/em> \u00e9 usado para agrupar elementos<\/strong>, j\u00e1 o elemento <use><\/em> usamos para fazer refer\u00eancia<\/strong> ao \u00edcone que ser\u00e1 usado.<\/p>\n

Vamos considerar o c\u00f3digo SVG abaixo:<\/p>\n

\r\n<svg xmlns="http:\/\/www.w3.org\/2000\/svg" xmlns:xlink="http:\/\/www.w3.org\/1999\/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24">\r\n    <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"><\/path>\r\n<\/svg>\r\n<\/pre>\n
Logo em seguida vamos \u201cembrulhar\u201d o seu conte\u00fado dentro de um <symbol><\/em>, desta forma:<\/p>\n
\r\n<svg>\r\n    <symbol viewBox="0 0 24 24" id="heart">\r\n        <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"><\/path>\r\n    <\/symbol>\r\n<\/svg>\r\n<\/pre>\n
Se inserirmos esse c\u00f3digo na p\u00e1gina, percebemos que o \u00edcone n\u00e3o \u00e9 vis\u00edvel<\/strong>, e isso \u00e9 porque precisamos fazer refer\u00eancia a ele usando o elemento <use><\/em>, assim:<\/p>\n
\r\n<body>\r\n    <svg style="display: none;">\r\n        <symbol viewBox="0 0 24 24" id="heart">\r\n            <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"><\/path>\r\n        <\/symbol>\r\n    <\/svg>\r\n\r\n    <svg>\r\n        <use xlink:href="#heart"\/> <!-- this is our visible icon -->\r\n    <\/svg>\r\n<\/body>\r\n<\/pre>\n
Resultado:<\/strong><\/p>\n
\"Exemplo<\/p>\n
Em outras palavras, depois de ter definido um grupo de objetos gr\u00e1ficos (usando <symbol><\/em>), voc\u00ea pode exibi-lo quantas vezes quiser<\/strong> usando o elemento <use><\/em>. Voc\u00ea especifica o grupo que deseja exibir usando o atributo xlink:href<\/em>, que, no nosso caso, \u00e9 o ID do <symbol><\/em> que deseja exibir (#heart).<\/p>\n
\nPerceba que usamos style=”display: none;” para o SVG envolvendo o elemento <symbol><\/em>.\n<\/div>\n
Mesmo se o <symbol><\/em> n\u00e3o for apresentado, o elemento <svg><\/em> que o envolve ainda \u00e9 processado e vai ocupar algum espa\u00e7o na sua p\u00e1gina<\/strong>, e \u00e9 por isso que precisamos escond\u00ea-lo.<\/p>\n
Agora que conhecemos os elementos <symbol><\/em> e <use><\/em> e sabemos como funcionam, vamos construir nosso Sprite SVG<\/strong>.<\/p>\n
Criando seu SVG Sprite<\/h2>\n
Primeiro, voc\u00ea precisa ter todos os seus \u00edcones<\/strong>, cada um em um arquivo .svg separado. Voc\u00ea pode, ent\u00e3o, criar um novo arquivo .svg (Vazio). Vou cham\u00e1-lo de myicons.svg<\/em>.<\/p>\n
Dentro deste novo arquivo, inserir uma tag <svg><\/em> e, em seguida, para cada um de seus \u00edcones, um <symbol><\/em> que ir\u00e1 englobar o c\u00f3digo do \u00edcone<\/strong>.<\/p>\n
\r\n<svg xmlns="http:\/\/www.w3.org\/2000\/svg" xmlns:xlink="http:\/\/www.w3.org\/1999\/xlink">\r\n    <symbol viewBox="0 0 24 24" id="heart">\r\n        <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"><\/path>\r\n    <\/symbol>\r\n\r\n    <symbol viewBox="0 0 32 32" id="arrow">\r\n        <path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z"><\/path>\r\n    <\/symbol>\r\n<\/svg>\r\n<\/pre>\n
Explica\u00e7\u00e3o do nosso c\u00f3digo SVG Sprite:<\/p>\n