SVG

SVG (Scalable Vector Graphics ou Gráficos Vetoriais Escaláveis, em português) é uma linguagem baseada em XML para descrever imagens de vetor.

O SVG pode ser usado no HTML de várias formas. Em quaisquer delas, você precisa sempre definir a largura ou a altura da imagem, ou ambas, caso a imagem não tenha nenhum aspect ratio herdado. Uma das formas de adicionar imagens SVG é pelo elemento <img>:

<img src="sua-imagem.svg" width="300" height="150">

Outra forma de usar o SVG é no elemento <object>. A vantagem do <object> sobre o <img> é que os componentes do SVG podem ser manipulados usando Javascript e CSS, porque eles são importados no documento.

<object type="image/svg+xml" data="sua-imagem.svg" width="300" height="150">

Você também pode usar o CSS para usar imagens de SVG (como imagens de fundo):

.seu-seletor {
  background-image: url(sua-imagem.svg);
  background-size: 100% 100%;
  width: 50px;
  height: 50px;
}

O SVG também pode ser adicionado de forma inline, usando o elemento <svg>. Basicamente, nesse método, você cria elementos que vão compor a imagem. Esse método tem a mesma vantagem do <object> de permitir a manipulação dos elementos.

<svg width="300" height="150">
  <rect width="100%" height="100%" fill="black">
  <circle cx="150" cy="100" r="90" fill="blue">
</svg>