2

Bem, o SVG é muito importante para a web, uma vez que é vetorial e posso redimensioná-lo à vontade. É um formato de imagem escrito em xml e é um dos padrões de imagem para web. Mas, quando tento implementá-lo numa página web, ele simplesmente não me obedece! Ele fica garrado na parte superior esquerda da página. Alguém sabe me dizer como faço para manipulá-lo?

Exemplo de código de uma imagem SVG:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW X6 -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="210mm" 
        height="297mm" version="1.1" shape-rendering="geometricPrecision" 
        text-rendering="geometricPrecision" image-rendering="optimizeQuality" 
        fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 21000 29700"
        xmlns:xlink="http://www.w3.org/1999/xlink">
 <g id="Camada_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <circle fill="red" cx="10092" cy="13553" r="1508"/>
 </g>
</svg>

O código acima pode ser visto num browser, é um simples círculo. O problema é que eu não consigo posicionar este tipo de imagem na forma que eu quero. Como faço isso?

5
  • Ah desculpa. Corrigi a pergunta e adicionei um exemplo. Espero que entenda agora =D
    – user7986
    Commented 24/04/2014 às 12:20
  • 1
    Você está abrindo o svg direto no browser, ou embutindo em um html?
    – bfavaretto
    Commented 24/04/2014 às 12:25
  • Abrindo direto no browser. Será que estou passando algum argumento inválido? Pois não conheço ainda sobre xml/xhtml e os svg são escritos nessa linguagem
    – user7986
    Commented 24/04/2014 às 12:26
  • 2
    Qual comportamento você está esperando que ele tenha ao ser aberto no browser? Pois é como abrir um link para uma imagem, o browser simplesmente renderiza o resultado e exibe para você ancorado no canto superior esquerdo.
    – Piovezan
    Commented 24/04/2014 às 13:00
  • 1
    Eu abro esse SVG no Chrome e tudo parece normal. Talvez eu não esteja entendendo qual é o problema.
    – bfavaretto
    Commented 24/04/2014 às 16:57

2 Respostas 2

4

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 viewBoxque 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 heighte 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).

0
0

Olha esse exemplo que fiz no JSFiddle, no link tem a referência de onde produzi a imagem, é só clicar em preview HTML, e depois no console pegar o código fonte.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .