Como usar imagem svg no seu site
Passo a passo de como usar imagens svg no seu site e deixá-lo mais leve e rápido. Vamos aprender a inserir imagem svg nas suas aplicações

Incorporar svg no seu site

Você provavelmente já encontrou várias maneiras de incorporar SVG em HTML, mas com as atualizações mais recentes de navegador e tecnologia, ainda precisamos de uma tag <object> ou podemos usar <img> em vez disso? Quais são os seus prós e contras e como eles se comparam?

Uma maneira simples de usar esse recurso é usar a tag <img>. Ele tem uma sintaxe semelhante à forma como incorporamos outros formatos de imagem como PNG, JPEG e GIF. E tem suporte ao (IE9+).

Benefícios de usar svg no seu site

O arquivo svg é mais leve que o jpg e png na maioria dos casos, com isso seu site ou suas aplicações se tornaram mais leves e rápidos.
Sites mais rápidos tendem a posicionar melhor nas buscas do Google.

Modo de utilização do svg

  • Você pode usarcomo imagem <img src="img/exemplo.svg" alt="FeedBuzzy" />
  • Como background
  • Inline <svg xmlns="http://www.w3.org/2000/svg" width="47.25" height="38.25" viewBox="0 0 47.25 38.25"><path d="M10.734 20.435"></path><path fill="#1D1D1B" d="M33.762 13.17c-.036-5.59-4.613-10.107-10.201-10.071-5.59.036-10.108 4.612-10.072 10.202.009 1.455.33 2.837.892 4.084h-.002l9.407 20.57 9.14-20.689h-.002c.546-1.255.847-2.641.838-4.096zm-10.086 7.844c-4.289.027-7.801-3.439-7.829-7.729-.027-4.288 3.439-7.801 7.729-7.829 4.289-.027 7.801 3.44 7.829 7.729.027 4.29-3.441 7.801-7.729 7.829z"></path></svg>
  • Via iframe <iframe src="img/img.svg" frameborder="0"></iframe>
  • Via objeto <object data="img/img.svg" type=""></object>
  • Via embed <embed src="img/img.svg" type="" />

Conclusão

Se você puder usar esse recurso no seu site ou blog sempre dê preferência em usar imagens em svg.
O site vai agradecer.
Agora que você já sabe como usar svg no seu site busque por esses arquivos na web e use como queira.

SUA REAÇÃO!



Facebook