Na verdade o SVG que você postou não é um simples círculo. É um objeto que contém um círculo. É importante distinguir isto pois se você estiver tentando posicionar o círculo, não vai funcionar a menos que você entenda o objeto no qual ele está contido.
É importante entender os atributos que você está usando para descrever o SVG. Vou remover os que são irrelevantes para esta questão e manter apenas os outros:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="210mm" height="297mm"
viewBox="0 0 21000 29700"> ... </svg>
Você está usando os atributos height
e width
em mm
, então essa unidade valerá para os valores que você estiver usando dentro do SVG. O viewBox
é o seu sistema de coordenadas. Você está associando 210mm com 21000, e 297mm com 29700. Vou dividir isto por 100 para ficar mais fácil de trabalhar:
<svg xmlns="http://www.w3.org/2000/svg" width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297">
<g id="Camada_x0020_1">
<circle fill="red" cx="100.92" cy="135.53" r="15.08"/>
</g>
</svg>
O que você tem aqui é uma tela de 210x297mm com um círculo situado mais ou menos no meio.
Eu fiz um JSFiddle onde troquei mm
por px
para que o SVG inteiro fosse visível na tela. O fiddle contem um bloco de HTML antes, que empurra o SVG para uma posição diferente (veja que ele não fica preso na parte superior da página).
<h1>Texto em HTML</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="210px"
height="297px"
viewBox="0 0 210 297">
<g>
<circle fill="red" cx="100.92" cy="135.53" r="15.08"/>
</g>
</svg>
Você pode posicionar esse SVG na página como quiser usando CSS. Eu pus uma borda em volta dele para distinguir o SVG (retângulo invisível de 210x297px) do círculo (vermelho, que tem 15.08px de raio):
svg {
border: solid blue 1px;
}
Se você quiser usar apenas o círculo, você pode definir um viewBox
que tenha exatamente as dimensões dele:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 200 200">
<circle fill="red" cx="100" cy="100" r="100"/>
</svg>
E não usar o height
e width
, deixando o controle para fazer no CSS ou usar o tamanho default (que será definido pelo elemento pai):
<div id="circulo">
<svg> ... </svg>
</div>
Assim você define as dimensões que desejar. O viewBox
é um sistema de coordenadas relativo. Ele vai se adequar às coordenadas absolutas (em cm
, mm
, px
) que você definir através de atributos, CSS ou contexto. Se você usar um CSS contendo:
#circulo {
width: 150px;
height: 150px;
}
O div
terá dimensões 150 x 150px e reduzirá o SVG proporcionalmente. O comportamento default é não distorcer a imagem, então a menor dimensão determinará o tamanho do círculo. Experimente variar as dimensões e veja o que acontece.
Veja JSFiddle no. 2
Você pode agora tratar o SVG como qualquer outro componente do DOM, alterar seu posicionamento com CSS, acessar componentes internos identificados com ID via CSS ou JavaScript, etc.
Eu usei um exemplo de SVG embutido na página, mas tudo também vale para SVG incluído via tag <img>
(exceto a possibilidade de acessar elementos internos do SVG via DOM). Veja JSFiddle no. 3. Lembrando que se usar um SVG externo dessa forma, você não pode omitir os atributos de namespace e versão (que o HTML5 tolera e assume default se você não usar).