Solucionado
Ola!
Vi algumas referencias na web e muitas pessoas utilizam a tag
<img src="icone.svg">Existe vantagens ou desvantagens em usar dessa maneira? conseguiria chamar o id de um arquivão de svg com vários símbolos dessa maneira de alguma forma, seguindo a teoria de "sprites" ?
Oi Marcio,
O bom da imagem ser em SVG é que você pode esticar a vontade que ela nunca vai distorcer, por ser um vetor.
Consegue fazer sprite com um svg sim, só a extensão que muda mesmo, e essa característica que citei acima.
Espero ter ajudado e bons estudos,
Abcs!
Salve Natan!
No codigo citado estou usando a extenção SVG dentro da tag img, e ele nao distorceu, pelo que notei e uma outra forma de chamar o sgv. Queria entender na pratica se e uma alternativa valida.
Oi Marcio!
Exato, o SVG não distorce, ele aumenta infinito sem perder qualidade. Atualmente o logo aqui da Alura está em SVG. (https://cursos.alura.com.br/images/gnarus/logo-alura.svg).
Eu mesmo uso SVG sempre que possível.
Abcs!
Salve Natan acho q nao estou sendo claro na minha duvida:
Tenho ciência das vantagens e characteristics do SVG, ( essa não é a minha duvida).
A duvida é que visualizei algumas maneiras diferentes de fazer a chamada do svg no html, e nao esta claro pra mim as diferenças entre elas:
tag como objeto:
<object type="image/svg+xml" data="icone.svg" class="logo"></object>com a tag svg:
<svg role="img" >
<use xlink:href="icone.svg"/>
</svg>e com a tag img:
<img src="icone.svg">Outra dúvida, é se nas opções, supra-citadas, consigo parametrizar o id com # para usar o dentro do xml do svg viabilizando a técnica de sprite como mencionado no capitulo 5 do treinamento ( sei que na opcao de , consigo, pois é a forma que é explicado no treinamento, mas e as outras?).
Oi Marcio!
Perdão, tinha entendido outra coisa.
Você usar com o elemento img te impossibilita de mudar as propriedades desse SVG, por meio do JS por exemplo. Já com o <svg> e o <object> ok!
O CSS Tricks fez este excelente post sobre o assunto.
Para o sprite, que depende de por a imagem via CSS, normalmente a galera puxa um arquivo .svg mesmo, como outro background qualquer.
Com relação a sua outra dúvida, basta por o ID normalmente,
Abcs!
Oi Marcio,
Infelizmente não rola apontar um <symbol> usando a tag <img>. Imagino que no futuro ate seja, faz sentido e muita gente pede isso. Mas hoje a unica forma é com <use> mesmo no svg.
Já sobre o <object>, não é mais recomendado. Era o jeito antigão, não faz mais sentido.
Entao hoje vá de <img> se for uma imagem simples. E de <svg> inline pra todos os outros - sprites, animações, customizar CSS etc.