Objetivo: Nessa matéria mostraremos a estrutura mínima de marcação XML para um documento SVG. Mostraremos o prólogo XML, a declaração DOCTYPE e o elemento raiz, bem como comentaremos a geração de estrutura XML por alguns dos editores SVG.
Nessa matéria entenda-se por estrutura de documento SVG a marcação XML básica necessária para a criação de um documento (gráfico) SVG.
A marcação de documentos XML deve obrigatoriamente começar com o chamado prólogo XML cuja sintaxe mais simplificada declara apenas a versão da XML com a qual a marcação está em conformidade. Observe a seguir o prólogo XML mínimo.
<?xml version="1.0"?>
O prólogo XML pode conter outras declarações que fornecem informações adicionais sobre o documento como por exemplo a declaração standalone e a declaração encoding para a codificação de caracteres. A declaração standalone admite os valores no e yes conforme a marcação dependa ou não, respectivamente, de uma marcação externa declarativa para ser convenientemente processada pelo parser XML. A ausência dessa declaração assume por padrão que o seu valor é no, ou seja, havendo marcação externa declarativa ela será considerada no parseamento da marcação XML.
Entenda-se por marcação externa declarativa um documento público contendo um conjunto de instruções para parseamento XML (uma DTD) criada por terceiros e necessárias para parseamento de uma marcação XML personalizada.
A declaração encoding define a codificação de caracteres adotada no documento e em XML o padrão geral, e a recomendação, é a adoção de utf-8.
Observe a seguir um prólogo XML com as duas declarações acima comentadas.
<?xml version="1.0" standalone="yes" encoding="utf-8"?>
As Recomendações do W3C para SVG 1.1 compreendem 3 (três) módulos a saber:
Cada um desses módulos admite a sua DTD com a sintaxe mostrada a seguir.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
E um exemplo de marcação com prólogo e DTD para um documento SVG destinado a desktop é mostrado a seguir.
<?xml version="1.0" standalone="yes" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Façamos algumas considerações sobre DTD (DOCTYPE) XML.
Ao contrário da HTML e da XHTML servida como text/html a presença do DOCTYPE em documento XML não tem qualquer influência sobre o modo de renderização do documento. Dessa forma o uso de DTD em documento XML é facultativo.
A DTD para SVG 1.1 Full é constituida de duas partes:
o identificador público para SVG 1.1: PUBLIC "-//W3C//DTD SVG 1.1//EN"
o identificador de sistema para a Recomendação SVG 1.1: http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd.
O identificador de sistema aponta para um documento hospedado no site do W3C descrevendo a sintaxe para fins de validação. Esse documento é modularizado, ou seja, está dividido em vários outros documentos, significando que o validador terá que processar os vários documentos. E, aqui é bom lembrar que documento XML inválido causa erro fatal e e como consequência o processamento é interrompido e o resultado é uma mensagem de erro no agente de usuário.
As Recomendações do W3C para SVG 1.1 afirmam que a validação de documentos XML que adotam uma DTD é problemática em razão da forma como DTDs manipulam namespaces e em consequência, embora elas mencionem as DTDs para SVG recomendam NÃO usar DTD em documentos XML para SVG.
Então, chegamos finalmente a conclusão que a estrutura básica de um documento SVG deve começar simplesmente com o prólogo mínimo como mostrado no início dessa matéria e transcrito a seguir.
<?xml version="1.0"?>
Todo documento XML deve conter um elemento raiz e o elemento raiz de documentos SVG é o elemento svg com suas tags de abertura e fechamento <svg></svg>.
O elemento raiz deve conter a declaração de namespace xmlns="http://www.w3.org/2000/svg"
e se o gráfico usar links em sua marcação deve-se incluir também o namespace xmlns:xlink="http://www.w3.org/1999/xlink". Adicionalmente é de boa prática declarar-se as dimensões da área ocupada pelo gráfico com uso das declarações width e height e usar os elementos
<desc></desc> e <title></title> destinados a fornecer uma descrição sumária do gráfico e declarar um título para o documento.
Reunindo tudo o que mostramos nessa matéria a estrutura mínima recomendada para um documento svg é conforme mostrada a seguir.
<?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="nnn" height="nnn"> <desc>Retângulo com bordas criado pelo Maujor para uso no site SVG</desc> <title>Uso dos atributos stroke e fill</title> > </svg>
Se você usar um editor SVG para criar seus gráficos, tais como o Adobe Illustrator, eles irão gerar a estrutura XML, normalmente, com muitas outras declarações de namespace com cada editor contemplando as suas necessidades nativas.
Existem muitos editores SVG disponíveis na Internet, tanto comerciais como gratuitos. Alguns editores com link para seus sites (abrem em outra janela) são listados a seguir.
Que tal começar agora mesmo? Convido você a criar seu primeiro gráfico SVG, salvar no seu HD, visualizar em um navegador com suporte nativo para SVG (Chrome, Firefox, Opera) e inspecionar o código fonte. Topa?
O Google, na página que hospeda o editor SVG Edit disponibiliza o editor online para testes. Use-o para criar seu primeiro gráfico SVG. Se você gostar baixe o editor e instale no seu computador.
Quero criar meu primeiro gráfico SVG (abre o editor em outra janela)
Visitantes: Hoje: 15 Total: 96.049