Compartilhar via

Desenhando formas básicas

  • Artigo

Este tópico descreve o VML, um recurso que foi preterido a partir do Windows Internet Explorer 9. Páginas da Web e aplicativos que dependem de VML devem ser migrados para SVG ou outros padrões amplamente compatíveis.

Observação

A partir de dezembro de 2011, este tópico foi arquivado. Como resultado, ele não é mais mantido ativamente. Para obter mais informações, consulte Conteúdo arquivado. Para obter informações, recomendações e diretrizes sobre a versão atual do Windows Internet Explorer, consulte Internet Explorer Developer Center.

 

Neste tópico, ilustraremos como é fácil desenhar uma forma usando VML.

Para criar uma elipse vermelha em uma página da Web, conforme mostrado na imagem a seguir, você pode desenhar a elipse usando uma ferramenta de edição gráfica, salvar o desenho como um bitmap e inserir o bitmap em sua página da Web:

oval1.gif (627 bytes)

Como alternativa, você pode usar VML para desenhar gráficos. No exemplo anterior, você pode digitar as seguintes linhas na <BODY> região da página da Web para desenhar a elipse vermelha:

<v:oval style='width:100pt;height:75pt' fillcolor="red"> </v:oval>

<v:...> e </v:...> são a marca de início e a marca de fim na sintaxe XML.style='width:100pt; height:75pt' fornece informações de CSS. oval e fillcolor="red" são elementos VML.

Você pode alterar os elementos gráficos simplesmente alterando seus atributos de propriedade no VML. No exemplo anterior, se você alterar fillcolor="red" para fillcolor="blue", conforme mostrado na seguinte representação VML, a elipse vermelha mudará para azul:

<v:oval style='width:100pt;height:75pt' fillcolor="blue"> </v:oval>

Os navegadores que dão suporte a VML podem renderizar e exibir os gráficos representados no VML sem precisar baixar arquivos de imagem separados. A maioria dos gráficos representados no VML são renderizados mais rapidamente em navegadores e exigem menos espaço em disco e tempo de download.

voltar ao início Voltar ao início

Estrutura XML

O VML é formatado de acordo com as regras da Linguagem de Marcação Extensível (XML). Qualquer analisador XML padrão pode analisar o VML e entregar os dados resultantes a um processador específico de VML. Para permitir que os navegadores saibam como entregar dados a um processador específico de VML, você precisa digitar algumas informações, como namespaces e objetos personalizados inseridos. Em seguida, você pode usar VML para digitar gráficos na <BODY> região, assim como fez no exemplo anterior.

O "v:" prefixo em cada marca XML identifica a marca como VML. O "v:" prefixo na <BODY> região deve ser consistente com <html xmlns:v="...">.

voltar ao início Voltar ao início

Informações do CSS

O VML usa Folhas de Estilos em Cascata, Nível 2 (CSS2) para determinar o tamanho dos gráficos e posicionar os gráficos em uma página da Web. No exemplo anterior, especificamos o tamanho da elipse como 100 pontos (largura) por 75 pontos (altura) (style='width:100pt;height:75pt' ).

voltar ao início Voltar ao início

Elementos VML

No exemplo anterior, usamos um elemento predefinido <oval> de VML para desenhar uma elipse. Em seguida, usamos o atributo de propriedade fillcolor do <oval> elemento para preencher a elipse com vermelho.

Com base na seção Marcas de início, marcas de fim e marcas de Empty-Element da especificação XML 1.0, as marcas de elemento vazio podem ser usadas para qualquer elemento que não tenha conteúdo. Por exemplo, conforme mostrado na representação VML a seguir, não há conteúdo (sub-elemento) dentro do <oval> elemento . (Observe que o estilo e o fillcolor são os atributos do <oval> elemento; eles não são sub-elementos.)

<v:oval style='width:100pt;height:75pt' fillcolor="red"> </v:oval>

Portanto, você pode usar a marca de elemento vazio, conforme mostrado na representação VML a seguir, para representar a mesma coisa que a linha acima.

<v:oval style='width:100pt;height:75pt' fillcolor="red" />

voltar ao início Voltar ao início

Resumo

Você pode usar o VML para desenhar gráficos em uma página da Web e, em seguida, personalizar esses gráficos simplesmente alterando seus atributos de propriedade. Além disso, a maioria dos gráficos representados no VML são renderizados mais rapidamente em navegadores e levam menos tempo de download e espaço em disco.