Começando

Um exemplo simples

Vamos mergulhar de cabeça com um exemplo simples. Dê uma olhada no código abaixo.

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

Copie o código e cole em um arquivo demo1.svg. Em seguida abra o mesmo no firefox. Ele vai renderizar como na figura abaixo. (Usuarios do Firefox: clique aqui)

svgdemo1.png

O processo de renderização envolve o seguinte:

  1. Começamos com o elemento raiz SVG:
    • Uma declaração Doctype como é conhecida a partir do (X)HTML deve ser deixado de fora porque a validação SVG baseado em DTD mais atrapalha do que resolve
    • para identificar a versão do SVG para outros tipos de validação os atributos versão e baseProfilesempe devem ser usados em vez disso
    • por se tratar de um XML, SVG sempre deve ter vinculado o namespace correto (no atributo xmlns). Veja a página Namespaces Crash Course para mais informações.
  2. O plano de fundo é definido como vermelho através do desenho de um retângulo <rect/> que cobre completamente a área da imagem.
  3. Um círculo verde <circle/> com raio de 80px é desenhado no centro do retângulo vermelho (deslocado 30+120px para dentro, e 50+50px para cima).
  4. O texto "SVG" é desenhado. O interior de cada letra é preenchido com branco. O texto é posicionado definindo uma âncora no local que queremos o ponto central: nesse caso, o ponto central deve corresponder ao centro do círculo verde. Ajustes finos podem ser feitos no tramanho da fonte e na posição vertical para garantir que o resultado final seja agradável.

Propriedades básicas de arquivos SVG

  • A primeira coisa importante que deve-se notar é a ordem de renderização dos elementos. A regra glocal para arquivos SVG é, elementos posteriores são renderizadosem cima de elementos anteriores. O elemento mais abaixo será o mais visível.
  • Arquivos SVG na internet podem ser mostrados no diretamente no navegador ou  embutido nos arquivos HTML por diversos métodos:
    • Se o HTML é XHTML e é entregue da foma application/xhtml+xml, o SVG pode ser diretamente embutido no código XML.
    • Se o HTML é HTML5, e o navegador é compatível com HTML5, o SVG pode ser diretamente embutido, também. Entretando, podem ser necessárias algumas mudanças na sintáxe para estar em conformidade com a especificação HTML5.
    • O arquivo SVG pode ser referenciado com um elemento object:
              <object data="image.svg" type="image/svg+xml" />
    • Assim como o elemento iframe pode ser usado:
              <iframe src="image.svg"></iframe>
    • Um elemento img pode ser usado teoricamento, também. Contudo esta técnica não funciona no Firefox anterior ao 4.0.
    • Finalmente SVG pode ser criada dinamicamento com JavaScript e inserido no HTML DOM. Como isso tecnologias de substituição podem ser implementadas em navegadores que normalmente não processam SVG.
    See this dedicated article for an in-depth dealing with the topic.
  • How SVG handles sizes and units will be explained on the next page.

SVG File Types

SVG files come in two flavors. Normal SVG files are simple text files containing SVG markup. The recommended filename extension for these files is ".svg" (all lowercase).

Due to the potentially massive size SVG files can reach when used for some applications (e.g., geographical applications), the SVG specification also allows for gzip-compressed SVG files. The recommended filename extension for these files is ".svgz" (all lowercase). Unfortunately it is very problematic to get gzip-compressed SVG files to work reliably across all SVG capable user agents when served from Microsofts IIS server, and Firefox can not load gzip-compressed SVG from the local computer. Avoid gzip-compressed SVG except when you are publishing to a webserver that you know will serve it correctly (see below).

A Word on Webservers

Now that you have an idea of how to create basic SVG files, the next stage is to upload them to a Webserver. There are some gotchas at this stage though. For normal SVG files, servers should send the HTTP headers:

Content-Type: image/svg+xml
Vary: Accept-Encoding

For gzip-compressed SVG files, servers should send the HTTP headers:

Content-Type: image/svg+xml
Content-Encoding: gzip
Vary: Accept-Encoding

You can check that your server is sending the correct HTTP headers with your SVG files by using a site such as web-sniffer.net. Submit the URL of one of your SVG files and look at the HTTP response headers. If you find that your server is not sending the headers with the values given above, then you should contact your Web host. If you have problems convincing them to correctly configure their servers for SVG, there may be ways to do it yourself. See the server configuration page on the SVG wiki for a range of simple solutions.

Server misconfiguration is a very common reason for SVG failing to load, so make sure you check yours. If your server is not configured to send the correct headers with the SVG files it serves, then Firefox will most likely show the markup of the files as text or encoded garbage, or even ask the viewer to choose an application to open them.