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.