Sobre o SVG

Formatos de imagem bitmap para a Web (GIF, JPEG, WBMP e PNG) descrevem imagens usando uma grade de pixels. Os arquivos resultantes tendem a ser volumosos, limitados a uma única resolução (geralmente baixa) e consomem grandes quantidades de largura de banda na Web. O SVG, por outro lado, é um formato de vetor que descreve imagens como formas, caminhos, textos e efeitos de filtro. Os arquivos resultantes são compactos e fornecem elementos gráficos de alta qualidade na Web, impressos e até mesmo em dispositivos portáteis com recursos limitados. Os usuários podem ampliar a exibição de uma imagem SVG na tela, sem sacrificar a nitidez, os detalhes ou a clareza. Além disso, o SVG fornece suporte superior para texto e cores, o que garante que os usuários verão as imagens exatamente como elas aparecem na prancheta do Illustrator.

O formato SVG é totalmente baseado em XML e oferece muitas vantagens a desenvolvedores e usuários. Com o SVG, você pode usar XML e JavaScript para criar gráficos da Web que respondem a ações de usuários com efeitos sofisticados, como realce, dicas de ferramentas, áudio e animação.

É possível salvar a arte no formato SVG usando o comando Salvar, Salvar como, Salvar uma cópia ou Salvar para Web e dispositivos Para acessar o conjunto completo de opções de exportação de SVG, use o comando Salvar, Salvar como ou Salvar uma cópia. O comando Salvar para Web e dispositivos fornece um subconjunto de opções de exportação de SVG que são aplicáveis a trabalhos orientados para a Web.

Para assistir a um vídeo sobre como criar conteúdo móvel no Illustrator, consulte www.adobe.com/go/vid0207_br.

A forma como o trabalho artístico for configurado no Illustrator afetará o arquivo SVG resultante. Lembre-se destas orientações:

  • Use camadas para adicionar estrutura a um arquivo SVG. Ao salvar um trabalho artístico no formato SVG, cada camada é convertida em um elemento de grupo (<g>). (Por exemplo, uma camada denominada Button1 se transforma em <g id="Button1_ver3.0"> no arquivo SVG.) As camadas aninhadas se tornam grupos aninhados SVG e camadas ocultas são preservadas com a propriedade de estilo SVG display="none".

  • Se você quiser que os objetos em diferentes camadas apareçam transparentes, ajuste a opacidade de cada objeto em vez de cada camada. Se você alterar a opacidade em nível de camada, o arquivo SVG resultante não exibirá a transparência da forma como ela aparece no Illustrator.

  • Dados de rasterização não são dimensionáveis no SVG Viewer e não podem ser editados como outros elementos SVG. Se possível, evite criar um trabalho final que será rasterizado no arquivo SVG. Malhas de gradiente e objetos que usam os efeitos Rasterizar, Artísticas, Desfoque, Traçados de pincel, Distorcer, Pixelizar, Nitidez, Croqui, Estilizar, Textura e Vídeo são rasterizados quando salvos no formato SVG. De maneira semelhante, os estilos de gráficos que incluem esses efeitos também produzem rasterização. Use efeitos SVG para adicionar efeitos de gráfico sem causar rasterização.

  • Use símbolos e simplifique os caminhos no seu trabalho artístico para melhorar o desempenho do SVG. Evite também usar pincéis que produzem muitos dados de caminho, como Carvão, Cinzas e Caneta de rolagem, se o desempenho for de alta prioridade.

  • Use fatias, mapas de imagem e scripts para adicionar links da Web a um arquivo SVG.

  • Uma linguagem de scripts, como JavaScript, proporciona uma funcionalidade ilimitada a um arquivo SVG. Movimentos do ponteiro e do teclado podem invocar funções de script, como efeitos de sobreposição. Scripts também podem usar o modelo de objetos de documento (DOM) para acessar e modificar o arquivo SVG, inserindo ou excluindo elementos SVG, por exemplo.

Aplicar efeitos SVG

Você pode usar efeitos SVG para adicionar propriedades de gráficos, como sombras projetadas, ao seu trabalho artístico. Efeitos SVG diferem das suas contrapartes em bitmap por serem baseados em XML e independentes de resolução. De fato, um efeito SVG não é nada mais do que uma série de propriedades XML que descrevem várias operações matemáticas. O efeito resultante é renderizado no objeto de destino em vez de no gráfico de origem.

O Illustrator oferece um conjunto padrão de efeitos SVG. Você pode usar esses efeitos com suas propriedades padrão, editar o código XML para produzir efeitos personalizados ou gravar novos efeitos SVG.

Observação:

Para modificar os filtros SVG padrão do Illustrator, use um editor de texto para editar o arquivo Filtros SVG da Adobe.svg, na pasta Documents and Settings/<userdir>/Application Data/Adobe/Adobe Illustrator CS5 Settings/<location>. É possível modificar definições de filtros existentes, excluir definições de filtros e adicionar novas definições de filtros.

  1. Selecione um objeto ou grupo (ou direcione uma camada no painel Camadas).
  2. Siga um destes procedimentos:
    • Para aplicar um efeito com suas configurações padrão, selecione-o na seção inferior do submenu Efeito > Filtros SVG.

    • Para aplicar um efeito com configurações personalizadas, escolha Efeito > Filtros SVG > Aplicar filtro SVG. Na caixa de diálogo, selecione o efeito e clique no botão Editar filtro SVG . Edite o código padrão e clique em OK.

    • Para criar e aplicar um novo efeito, escolha Efeito > Filtros SVG > Aplicar filtro SVG. Na caixa de diálogo, clique no botão Novo filtro SVG , insira o novo código e clique em OK.

      Quando você aplicar um efeito de filtro SVG, o Illustrator exibirá uma versão rasterizada do objeto na prancheta. Você pode controlar a resolução dessa imagem de visualização ao modificar a configuração de resolução de rasterização do documento.

      Nota: um efeito SVG deve ser o último quando um objeto usa vários efeitos. Em outras palavras, ele deve aparecer na parte inferior do painel Aparência (logo acima da entrada Transparência). Se outros efeitos acompanharem um efeito SVG, a saída SVG consistirá em um objeto rasterizado.

Importar efeitos de um arquivo SVG

  1. Selecione Efeito > Filtro SVG > Importar filtro SVG.
  2. Selecione o arquivo SVG do qual deseja importar efeitos e clique em Abrir.

Visão geral do painel Interatividade SVG

Use o painel Interatividade SVG (Janela > Interatividade SVG) para adicionar interatividade ao seu trabalho artístico quando ele for exportado para visualização em um navegador da Web. Por exemplo, ao criar um evento que aciona um comando JavaScript, você pode criar um movimento rapidamente em uma página da Web quando o usuário realizar uma ação, como mover o cursor do mouse sobre um objeto. O painel Interatividade SVG também permite ver todos os eventos e arquivos JavaScript associados ao arquivo atual.

Excluir um evento do painel Interatividade SVG

  • Para excluir um evento, selecione-o e clique no botão Excluir ou escolha Excluir evento no menu do painel.
  • Para excluir todos os eventos, escolha Limpar eventos no menu do painel.

Listar, adicionar ou remover eventos vinculados a um arquivo

  1. Clique no botão Vincular arquivos JavaScript .
  2. Na caixa de diálogo Arquivos JavaScript, selecione uma entrada JavaScript e siga um destes procedimentos:
    • Clique em Adicionar para procurar arquivos JavaScript adicionais.

    • Clique em Remover para remover a entrada JavaScript selecionada.

Adicionar interatividade SVG ao trabalho artístico

  1. No painel Interatividade SVG, selecione um evento. (Consulte Eventos SVG.)
  2. Insira o JavaScript correspondente e pressione Enter.

Eventos SVG

onfocusin

Aciona a ação quando o elemento recebe foco, como uma seleção com o ponteiro.

onfocusout

Aciona a ação quando o elemento perde foco (geralmente quando outro elemento recebe foco).

onactivate

Aciona a ação com um clique do mouse ou pressionamento de tecla, dependendo do elemento SVG.

onmousedown

Aciona a ação quando o botão do mouse é pressionado sobre um elemento.

onmouseup

Aciona a ação quando o botão do mouse é solto sobre um elemento.

onclick

Aciona a ação quando o botão do mouse é clicado sobre um elemento.

onmouseover

Aciona a ação quando o ponteiro é movido até um elemento.

onmousemove

Aciona a ação quando o ponteiro está sobre um elemento.

onmouseout

Aciona a ação quando o ponteiro é afastado de um elemento.

onkeydown

Aciona a ação quando uma tecla é pressionada.

onkeypress

Aciona a ação enquanto uma tecla é pressionada.

onkeyup

Aciona a ação quando uma tecla é solta.

onload

Aciona a ação depois que o documento SVG foi completamente analisado pelo navegador. Use esse evento para chamar funções de inicialização únicas.

onerror

Aciona a ação quando um elemento não é carregado adequadamente ou quando outro erro ocorre.

onabort

Aciona a ação quando o carregamento da página é interrompido antes da conclusão do carregamento do elemento.

onunload

Aciona a ação quando o documento SVG é removido de uma janela ou quadro.

onzoom

Aciona a ação quando o nível de zoom é alterado para o documento.

onresize

Aciona a ação quando a exibição do documento é redimensionada.

onscroll

Aciona a ação quando a exibição do documento é rolada ou deslocada.

Opções de exportação SVG otimizadas para a Web

Uma nova opção de exportação SVG (Arquivo > Exportar > SVG) está disponível. O novo fluxo de trabalho permite que você gere arquivos SVG padronizados, aperfeiçoados para a Web para seus projetos de design na Web e na tela.

As opções disponíveis são:

  • Estilização. Escolha como deseja que o código resultante seja gravado no arquivo SVG. Escolha entre CSS interno, Estilo incorporado ou Atributos de apresentação.
  • Fonte. Escolha como as fontes são representadas no arquivo SVG. Os contornos preservam a definição de caminho e são mais compatíveis.
  • Imagens: Escolha se deseja que as imagens sejam salvas como incorporadas dentro do documento ou como arquivos vinculados fora do documento.
  • IDs de objetos: Escolha como os tipos de ID (nomes) são atribuídos aos objetos no arquivo SVG. Escolha entre Nomes de camadas, Mínimo ou Único. Esta opção determina como os nomes duplicados de objetos são manipulados e como os objetos são nomeados no CSS exportado.
  • Decimal: Escolha quanta informação você deseja preservar sobre a precisão dos locais do objeto. Um valor mais alto para Decimal aumentará a precisão de como os objetos são apresentados, e isso aumenta a fidelidade visual do SVG renderizado. Contudo, ao aumentar o valor de Decimal, você também aumenta o tamanho do arquivo SVG exportado resultante.
  • Minify: Otimiza o tamanho do arquivo SVG removendo grupos vazios e espaços em branco. Escolher essa opção também reduz a legibilidade do código SVG resultante.
  • Responsivo. Marcar essa opção garante que SVG gerou escalas dentro de um navegador. Nenhum valor tamanho absoluto é gravado.
  • Mostrar código: Abre o conteúdo exportado no editor de texto padrão.
  • Mostrar no navegador (ícone): Exibe a imagem em seu navegador da Web padrão.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online